tango-app-ui-analyse-zone 3.7.1-beta.12 → 3.7.1-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2022/lib/components/overallcards/overallcards.component.mjs +3 -3
  2. package/esm2022/lib/components/tango-analyse-zone/tango-analyse-zone.component.mjs +2 -2
  3. package/esm2022/lib/components/zone-v2/customer-journey/customer-journey.component.mjs +41 -32
  4. package/esm2022/lib/components/zone-v2/store-heatmap/store-heatmap.component.mjs +4 -5
  5. package/esm2022/lib/components/zone-v2/summary-table/summary-table.component.mjs +3 -3
  6. package/esm2022/lib/components/zone-v2/zones-cards/zones-cards.component.mjs +4 -3
  7. package/fesm2022/tango-app-ui-analyse-zone.mjs +699 -690
  8. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  9. package/lib/components/zone-v2/customer-journey/customer-journey.component.d.ts +3 -0
  10. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -498,11 +498,11 @@ class OverallcardsComponent {
498
498
  });
499
499
  }
500
500
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, deps: [{ token: i0.NgZone }, { token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
501
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\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>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\" [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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 d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\" class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div></th>\r\n <th> <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && 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 === 'Trolley' ? '#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('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && 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 === 'Basket' ? '#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 class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && storeIdarray[0] ==='459-4'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:241px;margin-bottom:6%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { 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"] }] });
501
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\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>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\" [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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 d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\" class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div></th>\r\n <th> <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && 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 === 'Trolley' ? '#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('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && 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 === 'Basket' ? '#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 class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:241px;margin-bottom:6%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { 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"] }] });
502
502
  }
503
503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, decorators: [{
504
504
  type: Component,
505
- args: [{ selector: 'lib-overallcards', template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\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>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\" [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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 d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\" class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div></th>\r\n <th> <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && 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 === 'Trolley' ? '#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('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && 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 === 'Basket' ? '#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 class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && storeIdarray[0] ==='459-4'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:241px;margin-bottom:6%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}\n"] }]
505
+ args: [{ selector: 'lib-overallcards', template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\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>\r\n <div class=\"col-4\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\" [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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 d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\" class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div></th>\r\n <th> <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && 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 === 'Trolley' ? '#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('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && 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 === 'Basket' ? '#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 class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:241px;margin-bottom:6%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}\n"] }]
506
506
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }] });
507
507
 
508
508
  class TopPerformingZonesComponent {
@@ -2604,7 +2604,7 @@ class TangoAnalyseZoneComponent {
2604
2604
  ]);
2605
2605
  }
2606
2606
  updateStoreId() {
2607
- this.storeId = this.headerData.stores.filter((store) => store.checked).length;
2607
+ this.storeId = this.headerData?.stores?.filter((store) => store?.checked).length;
2608
2608
  }
2609
2609
  checkTodayReportStatus() {
2610
2610
  this.dataProcessedLoading = true;
@@ -2688,11 +2688,11 @@ class ZonesCardsComponent {
2688
2688
  });
2689
2689
  }
2690
2690
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZonesCardsComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i4.Router }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
2691
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.footfall?.zoneName ? zoneCardsData?.footfall?.zoneName?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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 Store impression</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.impression?.zoneName ? zoneCardsData?.impression?.zoneName : '--'}}\r\n \r\n </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\">Top Zone Bounced Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.bounced?.zoneName ? zoneCardsData?.bounced?.zoneName : '--'}}\r\n \r\n </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\">Top Engagers Zone Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.engagers?.zoneName ? zoneCardsData?.engagers?.zoneName : '--'}}\r\n \r\n </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 Top Zone Dwell Time</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.avgDwellTime?.zoneName ? zoneCardsData?.avgDwellTime?.zoneName : '--'}}</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"] });
2691
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.footfall?.zoneName ? (zoneCardsData?.footfall?.zoneName | titlecase) : '--'}}</div>\r\n <div class=\"cardtext\">Zone with the <br> Highest Footfall <span class=\"subcount\">- {{zoneCardsData?.footfall?.zoneFootfallCount ? zoneCardsData?.footfall?.zoneFootfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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 Store impression</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.impression?.zoneName ?(zoneCardsData?.impression?.zoneName | titlecase) : '--'}}\r\n \r\n </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\">Top Zone Bounced Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.bounced?.zoneName ? zoneCardsData?.bounced?.zoneName : '--'}}\r\n \r\n </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\">Top Engagers Zone Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.engagers?.zoneName ? zoneCardsData?.engagers?.zoneName : '--'}}\r\n \r\n </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 Top Zone Dwell Time</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.avgDwellTime?.zoneName ? zoneCardsData?.avgDwellTime?.zoneName : '--'}}</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"], dependencies: [{ kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
2692
2692
  }
2693
2693
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZonesCardsComponent, decorators: [{
2694
2694
  type: Component,
2695
- 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?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.footfall?.zoneName ? zoneCardsData?.footfall?.zoneName?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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 Store impression</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.impression?.zoneName ? zoneCardsData?.impression?.zoneName : '--'}}\r\n \r\n </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\">Top Zone Bounced Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.bounced?.zoneName ? zoneCardsData?.bounced?.zoneName : '--'}}\r\n \r\n </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\">Top Engagers Zone Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.engagers?.zoneName ? zoneCardsData?.engagers?.zoneName : '--'}}\r\n \r\n </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 Top Zone Dwell Time</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.avgDwellTime?.zoneName ? zoneCardsData?.avgDwellTime?.zoneName : '--'}}</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"] }]
2695
+ 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?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.footfall?.zoneName ? (zoneCardsData?.footfall?.zoneName | titlecase) : '--'}}</div>\r\n <div class=\"cardtext\">Zone with the <br> Highest Footfall <span class=\"subcount\">- {{zoneCardsData?.footfall?.zoneFootfallCount ? zoneCardsData?.footfall?.zoneFootfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'}}</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 Store impression</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.impression?.zoneName ?(zoneCardsData?.impression?.zoneName | titlecase) : '--'}}\r\n \r\n </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\">Top Zone Bounced Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.bounced?.zoneName ? zoneCardsData?.bounced?.zoneName : '--'}}\r\n \r\n </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\">Top Engagers Zone Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">\r\n \r\n {{zoneCardsData?.engagers?.zoneName ? zoneCardsData?.engagers?.zoneName : '--'}}\r\n \r\n </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 Top Zone Dwell Time</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-auto py-3 px-3\">\r\n <div class=\"cardcount my-2\">{{zoneCardsData?.avgDwellTime?.zoneName ? zoneCardsData?.avgDwellTime?.zoneName : '--'}}</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"] }]
2696
2696
  }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i4.Router }, { type: i4.ActivatedRoute }] });
2697
2697
 
2698
2698
  class StoreZoomHeatmapComponent {
@@ -2747,588 +2747,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2747
2747
  type: Input
2748
2748
  }] } });
2749
2749
 
2750
- class ImageDirectoryViewComponent {
2750
+ class StoreHeatmapComponent {
2751
+ zone;
2752
+ modalService;
2753
+ fb;
2751
2754
  Zonev2Service;
2752
- cd;
2753
- Imagedata;
2754
- processType;
2755
- footfallDate;
2756
- storeName;
2757
- storeId;
2755
+ changeDetector;
2756
+ toast;
2757
+ gs;
2758
+ elementRef;
2759
+ route;
2760
+ carousel;
2761
+ destroy$ = new Subject();
2762
+ selectedTab = '';
2758
2763
  headerData;
2759
- imageArray;
2760
- folderName;
2761
- Images;
2762
- itemsPerPage = 10;
2763
- currentPage = 1;
2764
- totalItems = 1;
2765
- paginationSizes = [1];
2766
- pageSize = 1;
2767
- dataSubscrptionValue = [];
2768
- statusValues;
2769
- filteredData;
2770
- objData;
2771
- storeArrayValue;
2772
- constructor(Zonev2Service, cd) {
2764
+ dayjs = dayjs;
2765
+ disableDay = false;
2766
+ disableWeek = false;
2767
+ disableMonth = false;
2768
+ type = 'daily';
2769
+ heatmapLoading = true;
2770
+ heatmapNoData = false;
2771
+ zoneName = '';
2772
+ selectedDate = '';
2773
+ overallStoreData = {};
2774
+ overallStoreconcentrationData = {};
2775
+ // zoneConcentrationData: any[] = [];
2776
+ availableZones = [];
2777
+ overallStoreConcentrationDates = [];
2778
+ periodzone = 1;
2779
+ customOption = false;
2780
+ searchInput = "";
2781
+ sortColumName = '';
2782
+ sortBy = 1;
2783
+ sortDirection = -1;
2784
+ genderAnalysis = [];
2785
+ ageAnalysis = [];
2786
+ cardDataLoading = true;
2787
+ cardNoData = false;
2788
+ genderroot;
2789
+ arcroot;
2790
+ currentZone; // Declare as 'any' or use a specific type if known
2791
+ otherZone;
2792
+ arcDiagram;
2793
+ currentSlideIndex = 0;
2794
+ customArrow = false;
2795
+ trajectoryNoData = false;
2796
+ trajectoryLoading = true;
2797
+ trajectoryRateNoData = false;
2798
+ trajectoryRateLoading = true;
2799
+ cardcustomArrow = false;
2800
+ currentSlide = 0;
2801
+ dateList;
2802
+ zoneNameList;
2803
+ constructor(zone, modalService, fb, Zonev2Service, changeDetector, toast, gs, elementRef, route) {
2804
+ this.zone = zone;
2805
+ this.modalService = modalService;
2806
+ this.fb = fb;
2773
2807
  this.Zonev2Service = Zonev2Service;
2774
- this.cd = cd;
2808
+ this.changeDetector = changeDetector;
2809
+ this.toast = toast;
2810
+ this.gs = gs;
2811
+ this.elementRef = elementRef;
2812
+ this.route = route;
2775
2813
  }
2776
2814
  ngOnInit() {
2777
- this.Images = this.Imagedata?.images?.entryTimeImage;
2778
- this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
2779
- this.totalItems = this.filteredData[0].count;
2780
- this.getStoreActive();
2815
+ this.gs.dataRangeValue
2816
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
2817
+ .subscribe((data) => {
2818
+ this.headerData = data;
2819
+ let sDate = this.dayjs(this.headerData.date.startDate);
2820
+ let eDate = this.dayjs(this.headerData.date.endDate);
2821
+ this.customArrow = false;
2822
+ this.cardcustomArrow = false;
2823
+ this.type = 'daily';
2824
+ // if(eDate.diff(sDate,'day') < 6) {
2825
+ // this.disableWeek = true;
2826
+ // this.disableMonth = true;
2827
+ // // this.type = 'daily';
2828
+ // }
2829
+ // else if(eDate.diff(sDate,'day') < 27) {
2830
+ // this.disableMonth = true;
2831
+ // this.disableDay = false;
2832
+ // this.disableWeek = false;
2833
+ // // this.type = 'weekly';
2834
+ // }
2835
+ // else {
2836
+ // this.disableDay = false;
2837
+ // this.disableWeek = false;
2838
+ // this.disableMonth = false;
2839
+ // // this.type = 'monthly';
2840
+ // }
2841
+ this.route.queryParams.subscribe(params => {
2842
+ this.zoneName = params['zoneName'];
2843
+ if (this.zoneName) {
2844
+ this.changeTab(this.zoneName);
2845
+ }
2846
+ });
2847
+ this.getAvailableZoneNames();
2848
+ // this.getTrajectoryAnalysis();
2849
+ // this.getOverallStoreConcentrationData();
2850
+ // this.getOverallStoreHeatmapDates();
2851
+ });
2781
2852
  }
2782
- destroy$ = new Subject();
2783
2853
  ngOnDestroy() {
2854
+ if (this.genderroot) {
2855
+ this.genderroot.dispose();
2856
+ }
2857
+ if (this.arcroot) {
2858
+ this.arcroot.dispose();
2859
+ }
2784
2860
  this.destroy$.next(true);
2785
2861
  this.destroy$.complete();
2786
2862
  }
2787
- getStoreActive() {
2788
- let obj = {
2789
- "clientId": this.headerData.client,
2790
- "storeId": this.storeId
2863
+ changeTab(tabName) {
2864
+ this.selectedTab = tabName;
2865
+ this.zoneName = tabName;
2866
+ this.getOverallStoreHeatmapDates();
2867
+ this.getTrajectoryAnalysis();
2868
+ this.getTrajectoryRateAnalysis();
2869
+ this.getAnalaysisSummary();
2870
+ this.changeDetector.detectChanges();
2871
+ }
2872
+ getAvailableZoneNames() {
2873
+ // this.cardcustomArrow = false;
2874
+ this.heatmapLoading = true;
2875
+ this.heatmapNoData = true;
2876
+ this.cardDataLoading = true;
2877
+ this.overallStoreData = [];
2878
+ const requestData = {
2879
+ fromDate: this.headerData.date.startDate,
2880
+ toDate: this.headerData.date.endDate,
2881
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2882
+ clientId: this.headerData.client,
2791
2883
  };
2792
- this.Zonev2Service
2793
- .getStoresActive(obj)
2794
- .pipe(takeUntil(this.destroy$))
2795
- ?.subscribe({
2796
- next: (res) => {
2797
- if (res && res.code === 200) {
2798
- this.dataSubscrptionValue = res.data.storeSubscription.product;
2884
+ this.Zonev2Service.getAvailableZoneNames(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
2885
+ if (response?.code === 200 && response?.status === "success") {
2886
+ this.availableZones = response.data.availableZoneData;
2887
+ if (this.availableZones.length) {
2888
+ this.selectedTab = this.availableZones[0].zoneName;
2889
+ this.zoneName = this.selectedTab;
2890
+ // this.changeTab(this.selectedTab);
2799
2891
  }
2892
+ // this.zoneName = response.data.zoneConcentrationData[0].zoneName;
2893
+ // this.zoneName = this.availableZones.length ? this.availableZones[0].zoneName : '';
2894
+ this.heatmapLoading = false;
2895
+ this.heatmapNoData = false;
2896
+ this.getOverallStoreHeatmapDates();
2897
+ this.getTrajectoryAnalysis();
2898
+ this.getTrajectoryRateAnalysis();
2899
+ this.getAnalaysisSummary();
2900
+ }
2901
+ else {
2902
+ // this.zonesummaryLoading = false;
2903
+ // this.zonesummaryNoData = true;
2904
+ this.heatmapLoading = false;
2905
+ this.heatmapNoData = true;
2906
+ this.availableZones = [];
2907
+ this.overallStoreConcentrationDates = [];
2908
+ this.overallStoreconcentrationData = [];
2909
+ this.cardNoData = true;
2910
+ this.cardDataLoading = false;
2911
+ // this.overallStoreData = []
2912
+ this.zoneName = "";
2913
+ this.changeDetector.detectChanges();
2800
2914
  }
2915
+ }, error => {
2916
+ this.availableZones = [];
2917
+ this.zoneName = "";
2918
+ // this.headerData.date.startDate = null;
2919
+ // this.headerData.date.endDate = null;
2920
+ this.changeDetector.detectChanges();
2801
2921
  });
2802
2922
  }
2803
- imageData(type) {
2804
- if (type === 'entry') {
2805
- this.Images = this.Imagedata?.images?.entryTimeImage;
2806
- }
2807
- else if (type === 'exit') {
2808
- this.Images = this.Imagedata?.images?.exitTimeImage;
2809
- }
2810
- else if (type === 'staff') {
2811
- this.Images = this.Imagedata?.images?.staffEngagementImage;
2812
- }
2813
- }
2814
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2815
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryViewComponent, selector: "lib-image-directory-view", inputs: { Imagedata: "Imagedata", processType: "processType", footfallDate: "footfallDate", storeName: "storeName", storeId: "storeId", headerData: "headerData", imageArray: "imageArray", folderName: "folderName" }, ngImport: i0, template: "<div class=\"row h-550px scroll w-100\"></div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8 col-xxl-8\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-md-7\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- Display footfall count or '--' if not available -->\r\n <span class=\"card-label header\">{{storeName | titlecase}} - {{footfallDate | date:'dd MMM, yyyy'}}</span>\r\n </h3>\r\n </div>\r\n <!-- Switch toggle -->\r\n <div class=\"col-md-5 text-end\">\r\n <span class=\"custId\">Customer ID</span>\r\n <span class=\"badge badge-light-primary mx-2\">{{Imagedata?.tempId}}</span>\r\n <span class=\"badge badge-light-danger\">{{processType | titlecase}} </span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row contain\">\r\n <div class=\"col-12 mb-5\">\r\n <img class=\"cursor-pointer\" class=\"img-src\" [src]=\"Images\"\r\n (error)=\"Images = null\" alt=\"\">\r\n <div *ngIf=\"!Images\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\" d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"row slider\">\r\n\r\n <ng-container>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.entryTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.entryTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.entryTimeImage\r\n }\">\r\n <div>Entry Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.entryTimeImage\"\r\n (error)=\"Imagedata?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageData('entry')\">\r\n <div *ngIf=\"!Imagedata?.images?.entryTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.staffEngagementImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.staffEngagementImage,\r\n 'border-gray': Images !== Imagedata?.images?.staffEngagementImage\r\n }\">\r\n <div>Staff Engagement</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.staffEngagementImage\"\r\n (error)=\"Imagedata?.images.staffEngagementImage = null\" alt=\"\" (click)=\"imageData('staff')\">\r\n <div *ngIf=\"!Imagedata?.images?.staffEngagementImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 \" *ngIf=\"Imagedata?.images?.exitTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.exitTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.exitTimeImage\r\n }\">\r\n <div>Exit Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.exitTimeImage\"\r\n (error)=\"Imagedata?.images.exitTimeImage = null\" alt=\"\" (click)=\"imageData('exit')\">\r\n <div *ngIf=\"!Imagedata?.images?.exitTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <span (click)=\"next()\" class=\"next\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\"\r\n fill=\"none\">\r\n <path d=\"M1 11L6 6L1 1\" stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </span> -->\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination> -->\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4\">\r\n <div *ngIf=\"dataSubscrptionValue.tangoTraffic\" class=\"row\">\r\n <div class=\"col-12 mb-5 cam-details-header px-0\">Time Spent</div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Entry Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Exit Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n <!-- <div class=\"py-2 img-doc-time\">Avg Dwell Time</div> -->\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.entryTime ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.exitTime ?? '--'}}</div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.totalTimeSpent ?? '--'}}</div>\r\n <!-- <div class=\"py-2 img-doc-value\">20 Mins</div> -->\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <hr />\r\n\r\n <div *ngIf=\"!dataSubscrptionValue.tangoZone\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Zone\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Identify hotspots and optimize your merchandise with Tango Zone's store heatmap analytics\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/zone-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"row\">\r\n <span class=\"zone-header\">Zones Visited</span>\r\n <ng-container class=\"h-200px scroll\">\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n </ng-container>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"last-visit\">Last Visited Zone</span>\r\n </div>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"badge badge-light-primary mx-2\"> John Jacobs</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"mt-5 col-lg-12\">\r\n <button class=\"btn btn-light-primary1 w-100 px-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4713_25)\">\r\n <path d=\"M19.6673 5.83341L13.834 10.0001L19.6673 14.1667V5.83341Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M12.1673 4.16675H3.00065C2.08018 4.16675 1.33398 4.91294 1.33398 5.83341V14.1667C1.33398 15.0872 2.08018 15.8334 3.00065 15.8334H12.1673C13.0878 15.8334 13.834 15.0872 13.834 14.1667V5.83341C13.834 4.91294 13.0878 4.16675 12.1673 4.16675Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4713_25\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">View Trajectory</span></button>\r\n </div>\r\n <hr />\r\n <div *ngIf=\"!dataSubscrptionValue.tangoTrax\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Trax\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Create AI-driven checklists to streamline your processes and boost compliance with Tango Trax.\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/trax-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"dataSubscrptionValue.tangoTrax\" class=\"row\">\r\n <div class=\"zone-header my-3 ps-3\">Staff Engagement</div>\r\n\r\n <div class=\"row ps-3 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Time taken to assist <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n\r\n <div class=\"py-2 img-doc-time\">Time spent with staff</div>\r\n\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeTakenToAssist ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeSpentWithStaff ?? '--'}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <hr /> -->\r\n", styles: [":host{padding:24px}.tabset{display:flex;border-bottom:1px solid #EAECF0;width:100%}.tabset .tab{padding:12px;color:#667085;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.tabset .selected{background:#eaf8ff;border-bottom:2px solid #009BF3}.active-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#12b76a}.inactive-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#f04438}.camera-number{color:#344054;font-size:14px;font-weight:600;line-height:20px}.camera-name-chip{padding:2px 8px;border-radius:16px;background:#eaf8ff;color:#009bf3;font-size:12px;font-weight:500;line-height:18px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cam-details-header{color:#101828;font-size:18px;font-weight:600;line-height:28px}img{width:100%;border-radius:8px}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.no-preview-sm{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px}.no-preview-sm .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-sm .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.no-preview-md{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 7px}.no-preview-md .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-md .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.slider{position:relative}.slider .previous{position:absolute;top:30%;left:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.slider .next{position:absolute;top:30%;right:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.angle-change-header{color:#000;font-size:16px;font-weight:500;line-height:24px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.img-src{border-radius:12px;border:1px solid var(--Gray-400, #98A2B3);background:var(--Gray-50, #F9FAFB);width:100%;height:311px}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);padding:0 4px}.border-gray-active{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-50, #EAF8FF);padding:0 4px}.zone-header{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.last-visit{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.btn-light-primary1{color:var(--White, #FFF)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize;border-radius:4px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important}.card-label{font-size:18px!important}.productCard{border-radius:12px;background:var(--Gray-50, #F9FAFB)}.product-title{color:var(--Gray-800, #1D2939);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.left-card-count-title{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-style:normal;font-weight:400;line-height:18px}.explore-btn{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.custId{color:var(--Gray-900, #101828);font-size:12px;font-style:normal;font-weight:600;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
2816
- }
2817
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
2818
- type: Component,
2819
- 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"] }]
2820
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
2821
- type: Input
2822
- }], processType: [{
2823
- type: Input
2824
- }], footfallDate: [{
2825
- type: Input
2826
- }], storeName: [{
2827
- type: Input
2828
- }], storeId: [{
2829
- type: Input
2830
- }], headerData: [{
2831
- type: Input
2832
- }], imageArray: [{
2833
- type: Input
2834
- }], folderName: [{
2835
- type: Input
2836
- }] } });
2837
-
2838
- const SELECT_CONTROL_VALUE_ACCESSOR = {
2839
- provide: NG_VALUE_ACCESSOR,
2840
- useExisting: forwardRef(() => ReactiveSelectComponent),
2841
- multi: true,
2842
- };
2843
- class ReactiveSelectComponent {
2844
- onTouched;
2845
- onChanged;
2846
- isDisabled;
2847
- idField;
2848
- nameField;
2849
- label;
2850
- data;
2851
- isOpened = false;
2852
- selected = null;
2853
- selectedId;
2854
- writeValue(val) {
2855
- this.selectedId = val;
2856
- this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
2857
- }
2858
- registerOnChange(fn) {
2859
- this.onChanged = fn;
2860
- }
2861
- registerOnTouched(fn) {
2862
- this.onTouched = fn;
2863
- }
2864
- setDisabledState(isDisabled) {
2865
- this.isDisabled = isDisabled;
2866
- }
2867
- onSelect(item) {
2868
- this.onTouched();
2869
- this.selected = item;
2870
- this.selectedId = item?.[this.idField];
2871
- this.isOpened = false;
2872
- this.onChanged(this.selectedId);
2873
- this.onSelectionChange(item);
2874
- }
2875
- onSelectionChange(item) {
2876
- this.valueChange.emit(item?.[this.idField]);
2877
- }
2878
- onClick(event) {
2879
- if (!this.isDisabled) {
2880
- const targetElement = event.target;
2881
- if (!this.isComponentClicked(targetElement)) {
2882
- this.isOpened = false;
2883
- }
2884
- }
2885
- }
2886
- isComponentClicked(targetElement) {
2887
- const parentElement = targetElement.parentElement;
2888
- if (parentElement) {
2889
- const clickedOnComponent = parentElement.classList.contains('custom-select');
2890
- if (clickedOnComponent) {
2891
- return true;
2892
- }
2893
- else {
2894
- return this.isComponentClicked(parentElement);
2895
- }
2896
- }
2897
- return false;
2898
- }
2899
- valueChange = new EventEmitter();
2900
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2901
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select w-200px\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label w-100\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"isOpened = !isOpened;\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect w-100\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2 w-100\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 w-100\">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#f9fafb!important}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;cursor:default;white-space:nowrap}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.custom-select.items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#eaf8ff!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2902
- }
2903
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
2904
- type: Component,
2905
- 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"] }]
2906
- }], propDecorators: { idField: [{
2907
- type: Input
2908
- }], nameField: [{
2909
- type: Input
2910
- }], label: [{
2911
- type: Input
2912
- }], data: [{
2913
- type: Input
2914
- }], onClick: [{
2915
- type: HostListener,
2916
- args: ['document:click', ['$event']]
2917
- }], valueChange: [{
2918
- type: Output
2919
- }] } });
2920
-
2921
- class ImageDirectoryComponent {
2922
- Zonev2Service;
2923
- gs;
2924
- cd;
2925
- modalService;
2926
- fb;
2927
- selectIndex = 0;
2928
- selectedTime;
2929
- objData;
2930
- objectsArray;
2931
- imagesArrayData;
2932
- processType = "footfall";
2933
- headerData;
2934
- folderView = true;
2935
- dayjs = dayjs;
2936
- dateArray;
2937
- form;
2938
- noData = false;
2939
- loading = true;
2940
- storeArrayValue;
2941
- storeIdarray;
2942
- constructor(Zonev2Service, gs, cd, modalService, fb) {
2943
- this.Zonev2Service = Zonev2Service;
2944
- this.gs = gs;
2945
- this.cd = cd;
2946
- this.modalService = modalService;
2947
- this.fb = fb;
2948
- this.form = this.fb.group({
2949
- selectValue: new FormControl('') // Initialize as FormControl
2950
- });
2951
- }
2952
- ngOnInit() {
2953
- this.gs.dataRangeValue
2954
- .pipe(takeUntil(this.destroy$), debounceTime$1(300))
2955
- .subscribe((data) => {
2956
- if (data !== null || data?.client !== null) {
2957
- this.headerData = data;
2958
- this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
2959
- this.objData = {
2960
- storeId: data.stores
2961
- .filter((store) => store.checked)
2962
- .map((store) => store.storeId),
2963
- clientId: data.client,
2964
- processType: this.processType,
2965
- footfallDate: this.headerData.date.endDate,
2966
- };
2967
- const initialValue = this.getInitialValue();
2968
- const selectControl = this.form.get('selectValue');
2969
- if (selectControl) {
2970
- selectControl.setValue(initialValue);
2971
- }
2972
- this.backToFootfall();
2973
- this.displayDateRange();
2974
- }
2975
- });
2976
- }
2977
- destroy$ = new Subject();
2978
- ngOnDestroy() {
2979
- this.destroy$.next(true);
2980
- this.destroy$.complete();
2981
- }
2982
- getImageFolder() {
2983
- delete this.objData.folderName;
2984
- this.Zonev2Service
2985
- .getFootfallDirectoryFolders(this.objData)
2986
- .pipe(takeUntil(this.destroy$))
2987
- ?.subscribe({
2988
- next: (res) => {
2989
- if (res && res.code === 200) {
2990
- this.objectsArray = res?.data.footfallData;
2991
- this.selectedTime = this.objectsArray[0].folderName;
2992
- this.objData.folderName = this.selectedTime;
2993
- this.getImageView();
2994
- this.cd.detectChanges();
2995
- }
2996
- else {
2997
- this.loading = false;
2998
- this.noData = true;
2999
- }
3000
- },
3001
- error: (err) => {
3002
- this.cd.detectChanges();
3003
- },
3004
- complete: () => { },
3005
- });
3006
- }
3007
- getImageView() {
3008
- this.loading = true;
3009
- this.noData = false;
3010
- this.Zonev2Service
3011
- .getFootfallDirectory(this.objData)
3012
- .pipe(takeUntil(this.destroy$))
3013
- ?.subscribe({
3014
- next: (res) => {
3015
- if (res && res.code === 200) {
3016
- if (!res?.data.footfallData.length) {
3017
- this.loading = false;
3018
- this.noData = true;
3019
- }
3020
- else {
3021
- this.imagesArrayData = res?.data.footfallData;
3022
- this.storeArrayValue = res?.data.storeName;
3023
- this.loading = false;
3024
- this.noData = false;
3025
- this.cd.detectChanges();
3026
- }
3027
- }
3028
- else {
3029
- this.loading = false;
3030
- this.noData = true;
3031
- }
3032
- },
3033
- error: (err) => {
3034
- this.cd.detectChanges();
3035
- },
3036
- complete: () => { },
3037
- });
3038
- }
3039
- getimages(index, obj) {
3040
- this.selectIndex = index;
3041
- (this.objData.footfallDate = obj), (this.folderView = false);
3042
- this.getImageFolder();
3043
- }
3044
- backToFootfall() {
3045
- this.selectIndex = 0;
3046
- this.folderView = true;
3047
- }
3048
- selectedTimes(val) {
3049
- this.selectedTime = val;
3050
- this.objData.folderName = val;
3051
- this.folderView = false;
3052
- this.selectedTime = val;
3053
- this.getImageView();
3054
- }
3055
- imageView(obj, footfallDate) {
3056
- const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
3057
- centered: true,
3058
- size: "xl",
3059
- scrollable: true,
3060
- });
3061
- modalRef.componentInstance.Imagedata = obj;
3062
- modalRef.componentInstance.processType = this.objData.processType;
3063
- modalRef.componentInstance.footfallDate = footfallDate;
3064
- modalRef.componentInstance.storeName = this.storeArrayValue;
3065
- modalRef.componentInstance.storeId = this.storeIdarray;
3066
- modalRef.componentInstance.headerData = this.headerData;
3067
- modalRef.componentInstance.imageArray = this.objectsArray;
3068
- modalRef.componentInstance.folderName = this.objData.folderName;
3069
- modalRef.result.then((result) => { });
3070
- }
3071
- getDateRangeArray(fromDate, toDate) {
3072
- const start = new Date(fromDate); // Convert string to Date object
3073
- const end = new Date(toDate); // Convert string to Date object
3074
- const dateArray = [];
3075
- // Check if the dates are valid
3076
- if (isNaN(start.getTime()) || isNaN(end.getTime())) {
3077
- return dateArray;
3078
- }
3079
- // Loop from start date to end date
3080
- let currentDate = start;
3081
- while (currentDate <= end) {
3082
- dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
3083
- currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
3084
- }
3085
- return dateArray;
3086
- }
3087
- // Method to display or log the date range array
3088
- displayDateRange() {
3089
- const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
3090
- this.dateArray = dates;
3091
- }
3092
- datasets = [
3093
- { value: 'footfall', label: 'Footfall' },
3094
- { value: 'bounced', label: 'Bounced Footfall' },
3095
- { value: 'engager', label: 'Engagers' },
3096
- { value: 'missedOpportunity', label: 'Missed Opportunity' },
3097
- { value: 'conversion', label: 'Conversion' }
3098
- ];
3099
- getInitialValue() {
3100
- // For example, selecting the second item in the dataset
3101
- return this.datasets[0].value; // Change as needed
3102
- }
3103
- onValueChange(selectedId) {
3104
- this.objData.processType = selectedId,
3105
- this.getImageFolder();
3106
- }
3107
- get selectControl() {
3108
- return this.form.get('selectValue');
3109
- }
3110
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, deps: [{ token: Zonev2Service }, { token: i2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
3111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryComponent, selector: "lib-image-directory", ngImport: i0, template: " <div class=\"card-header border-0 px-0\">\r\n <div class=\"col-md-12\">\r\n <div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#EAF8FF\" stroke-width=\"6\" />\r\n <path d=\"M23.8333 14.6666L15.5 24.6666H23L22.1667 31.3333L30.5 21.3333H23L23.8333 14.6666Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one ms-2\">\r\n <ng-container>Examine individual footfall in gallery view with optimal sample images for detailed analysis.</ng-container>\r\n <!-- <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container> -->\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z\"\r\n fill=\"black\" />\r\n </svg> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"folderView\" class=\"p-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-1 mt-5 text-center\" *ngFor=\"let obj of dateArray;let i = index\">\r\n <div (click)=\"getimages(i,obj)\">\r\n <div *ngIf=\"i === selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.154297\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#33B5FF\" />\r\n <path\r\n d=\"M39.8216 36.1667C39.8216 36.7855 39.5758 37.379 39.1382 37.8166C38.7006 38.2542 38.1071 38.5 37.4883 38.5H18.8216C18.2028 38.5 17.6093 38.2542 17.1717 37.8166C16.7341 37.379 16.4883 36.7855 16.4883 36.1667V19.8333C16.4883 19.2145 16.7341 18.621 17.1717 18.1834C17.6093 17.7458 18.2028 17.5 18.8216 17.5H24.6549L26.9883 21H37.4883C38.1071 21 38.7006 21.2458 39.1382 21.6834C39.5758 22.121 39.8216 22.7145 39.8216 23.3333V36.1667Z\"\r\n stroke=\"white\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n <div *ngIf=\"i !== selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.462891\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M40.1302 36.1667C40.1302 36.7855 39.8844 37.379 39.4468 37.8166C39.0092 38.2542 38.4157 38.5 37.7969 38.5H19.1302C18.5114 38.5 17.9179 38.2542 17.4803 37.8166C17.0427 37.379 16.7969 36.7855 16.7969 36.1667V19.8333C16.7969 19.2145 17.0427 18.621 17.4803 18.1834C17.9179 17.7458 18.5114 17.5 19.1302 17.5H24.9635L27.2969 21H37.7969C38.4157 21 39.0092 21.2458 39.4468 21.6834C39.8844 22.121 40.1302 22.7145 40.1302 23.3333V36.1667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n <div *ngIf=\"!folderView\" class=\"p1\">\r\n <div class=\"row\">\r\n <div class=\"d-flex flex-shrink-0 mt-3 justify-content-between align-items-center\">\r\n <span class=\"cursor-pointer\" (click)=\"backToFootfall()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2585_7036)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M25.8327 19H14.166M14.166 19L19.9993 24.8334M14.166 19L19.9993 13.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2585_7036\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2585_7036\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2585_7036\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-auto text-end\">\r\n <form [formGroup]=\"form\">\r\n <lib-reactive-select \r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100 text-start\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 p-0 w-100 overflow-x\">\r\n <div class=\"col text-nowrap\" *ngFor=\"let obj of objectsArray\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\">\r\n <a (click)=\"selectedTimes(obj.folderName)\"\r\n [ngClass]=\"selectedTime === obj?.folderName ? 'active' : ''\" class=\"nav-link cursor-pointer no-border mx-3 mb-2\">\r\n {{obj?.folderName}}<span class=\"mx-2 \" [ngClass]=\"selectedTime === obj?.folderName ? 'badge-num-primary' :'badge-num-muted'\">{{obj?.count?obj?.count:0}}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this image directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row p-3 img-traffic contain\" *ngIf=\"!noData && !loading\">\r\n <div class=\"col-md-3 border-gray mx-2 p-2 mt-5\" *ngFor=\"let obj of imagesArrayData\">\r\n <img *ngIf=\"obj.images.entryTimeImage\" class=\"img-src cursor-pointer\" [src]=\"obj.images.entryTimeImage\" (error)=\"obj?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageView(obj,objData.footfallDate)\">\r\n <div *ngIf=\"!obj.images.entryTimeImage\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n <div class=\"py-2 img-doc-directory\">{{obj.tempId}} <span class=\"badge badge-light-success ms-2\">{{selectControl.value | titlecase}}</span></div>\r\n <div class=\"py-2 img-doc-time\">Entry Time</div>\r\n <div class=\"py-2 img-doc-time\">Exit Time</div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n </div>\r\n <div class=\"col-md-4 text-end\" >\r\n <div class=\"py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1841_143300)\">\r\n <path d=\"M14.1986 5.33333V14H2.19857V5.33333M6.86523 8H9.5319M0.865234 2H15.5319V5.33333H0.865234V2Z\" stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1841_143300\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.199219)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.entryTime}} </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.exitTime}}</div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.totalTimeSpent}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n", styles: [".switch-form-card{padding:8px 16px;border-radius:4px;border-left:3px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.img-src{width:100%;height:210px;border-radius:.625rem}.img-traffic .col-md-3{width:24%!important}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.img-doc-directory{color:var(--Gray-900, #101828)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline}.img-doc-time{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.img-doc-value{color:var(--Gray-600, #475467);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.overflow-x{overflow-x:auto}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:41px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.img-nodata{width:25%;height:15%}.nodata-title{font-size:14px!important;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
3112
- }
3113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
3114
- type: Component,
3115
- 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"] }]
3116
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
3117
-
3118
- class StoreHeatmapComponent {
3119
- zone;
3120
- modalService;
3121
- fb;
3122
- Zonev2Service;
3123
- changeDetector;
3124
- toast;
3125
- gs;
3126
- elementRef;
3127
- route;
3128
- carousel;
3129
- destroy$ = new Subject();
3130
- selectedTab = '';
3131
- headerData;
3132
- dayjs = dayjs;
3133
- disableDay = false;
3134
- disableWeek = false;
3135
- disableMonth = false;
3136
- type = 'daily';
3137
- heatmapLoading = true;
3138
- heatmapNoData = false;
3139
- zoneName = '';
3140
- selectedDate = '';
3141
- overallStoreData = {};
3142
- overallStoreconcentrationData = {};
3143
- // zoneConcentrationData: any[] = [];
3144
- availableZones = [];
3145
- overallStoreConcentrationDates = [];
3146
- periodzone = 1;
3147
- customOption = false;
3148
- searchInput = "";
3149
- sortColumName = '';
3150
- sortBy = 1;
3151
- sortDirection = -1;
3152
- genderAnalysis = [];
3153
- ageAnalysis = [];
3154
- cardDataLoading = true;
3155
- cardNoData = false;
3156
- genderroot;
3157
- arcroot;
3158
- currentZone; // Declare as 'any' or use a specific type if known
3159
- otherZone;
3160
- arcDiagram;
3161
- currentSlideIndex = 0;
3162
- customArrow = false;
3163
- trajectoryNoData = false;
3164
- trajectoryLoading = true;
3165
- trajectoryRateNoData = false;
3166
- trajectoryRateLoading = true;
3167
- cardcustomArrow = false;
3168
- currentSlide = 0;
3169
- dateList;
3170
- zoneNameList;
3171
- constructor(zone, modalService, fb, Zonev2Service, changeDetector, toast, gs, elementRef, route) {
3172
- this.zone = zone;
3173
- this.modalService = modalService;
3174
- this.fb = fb;
3175
- this.Zonev2Service = Zonev2Service;
3176
- this.changeDetector = changeDetector;
3177
- this.toast = toast;
3178
- this.gs = gs;
3179
- this.elementRef = elementRef;
3180
- this.route = route;
3181
- }
3182
- ngOnInit() {
3183
- this.gs.dataRangeValue
3184
- .pipe(takeUntil(this.destroy$), debounceTime(300))
3185
- .subscribe((data) => {
3186
- this.headerData = data;
3187
- let sDate = this.dayjs(this.headerData.date.startDate);
3188
- let eDate = this.dayjs(this.headerData.date.endDate);
3189
- this.customArrow = false;
3190
- this.cardcustomArrow = false;
3191
- this.type = 'daily';
3192
- // if(eDate.diff(sDate,'day') < 6) {
3193
- // this.disableWeek = true;
3194
- // this.disableMonth = true;
3195
- // // this.type = 'daily';
3196
- // }
3197
- // else if(eDate.diff(sDate,'day') < 27) {
3198
- // this.disableMonth = true;
3199
- // this.disableDay = false;
3200
- // this.disableWeek = false;
3201
- // // this.type = 'weekly';
3202
- // }
3203
- // else {
3204
- // this.disableDay = false;
3205
- // this.disableWeek = false;
3206
- // this.disableMonth = false;
3207
- // // this.type = 'monthly';
3208
- // }
3209
- this.route.queryParams.subscribe(params => {
3210
- this.zoneName = params['zoneName'];
3211
- if (this.zoneName) {
3212
- this.changeTab(this.zoneName);
3213
- }
3214
- });
3215
- this.getAvailableZoneNames();
3216
- // this.getTrajectoryAnalysis();
3217
- // this.getOverallStoreConcentrationData();
3218
- // this.getOverallStoreHeatmapDates();
3219
- });
3220
- }
3221
- ngOnDestroy() {
3222
- if (this.genderroot) {
3223
- this.genderroot.dispose();
3224
- }
3225
- if (this.arcroot) {
3226
- this.arcroot.dispose();
3227
- }
3228
- this.destroy$.next(true);
3229
- this.destroy$.complete();
3230
- }
3231
- changeTab(tabName) {
3232
- this.selectedTab = tabName;
3233
- this.zoneName = tabName;
3234
- this.getOverallStoreHeatmapDates();
3235
- this.getTrajectoryAnalysis();
3236
- this.getTrajectoryRateAnalysis();
3237
- this.getAnalaysisSummary();
3238
- this.changeDetector.detectChanges();
3239
- }
3240
- getAvailableZoneNames() {
3241
- // this.cardcustomArrow = false;
3242
- this.heatmapLoading = true;
3243
- this.heatmapNoData = true;
3244
- this.cardDataLoading = true;
3245
- this.overallStoreData = [];
3246
- const requestData = {
3247
- fromDate: this.headerData.date.startDate,
3248
- toDate: this.headerData.date.endDate,
3249
- storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3250
- clientId: this.headerData.client,
3251
- };
3252
- this.Zonev2Service.getAvailableZoneNames(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
3253
- if (response?.code === 200 && response?.status === "success") {
3254
- this.availableZones = response.data.availableZoneData;
3255
- if (this.availableZones.length) {
3256
- this.selectedTab = this.availableZones[0].zoneName;
3257
- this.zoneName = this.selectedTab;
3258
- // this.changeTab(this.selectedTab);
3259
- }
3260
- // this.zoneName = response.data.zoneConcentrationData[0].zoneName;
3261
- // this.zoneName = this.availableZones.length ? this.availableZones[0].zoneName : '';
3262
- this.heatmapLoading = false;
3263
- this.heatmapNoData = false;
3264
- this.getOverallStoreHeatmapDates();
3265
- this.getTrajectoryAnalysis();
3266
- this.getTrajectoryRateAnalysis();
3267
- this.getAnalaysisSummary();
3268
- }
3269
- else {
3270
- // this.zonesummaryLoading = false;
3271
- // this.zonesummaryNoData = true;
3272
- this.heatmapLoading = false;
3273
- this.heatmapNoData = true;
3274
- this.availableZones = [];
3275
- this.overallStoreConcentrationDates = [];
3276
- this.overallStoreconcentrationData = [];
3277
- this.cardNoData = true;
3278
- this.cardDataLoading = false;
3279
- // this.overallStoreData = []
3280
- this.zoneName = "";
3281
- this.changeDetector.detectChanges();
3282
- }
3283
- }, error => {
3284
- this.availableZones = [];
3285
- this.zoneName = "";
3286
- // this.headerData.date.startDate = null;
3287
- // this.headerData.date.endDate = null;
3288
- this.changeDetector.detectChanges();
3289
- });
3290
- }
3291
- getOverallStoreConcentrationData() {
3292
- this.heatmapLoading = true;
3293
- this.heatmapNoData = true;
3294
- // this.cardDataLoading = true;
3295
- const requestData = {
3296
- fromDate: this.headerData.date.startDate,
3297
- toDate: this.headerData.date.endDate,
3298
- storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3299
- // storeId: ["11-1176"],
3300
- clientId: this.headerData.client,
3301
- zoneName: this.zoneName,
3302
- dateType: this.type,
3303
- zoneDate: this.selectedDate
3304
- };
3305
- this.Zonev2Service.getOverallStoreConcentrationData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
3306
- this.heatmapLoading = false;
3307
- if (response?.code === 200 && response?.status === "success") {
3308
- // this.overallStoreData = response.data.overallStoreConcentrationDatas;
3309
- this.overallStoreconcentrationData = response.data.overallStoreConcentrationDatas;
3310
- this.heatmapNoData = false;
3311
- setTimeout(() => {
3312
- let prevElement = document.querySelector('.carousel-control-prev');
3313
- prevElement?.setAttribute('style', 'display:none');
3314
- }, 200);
3315
- }
3316
- else {
3317
- this.overallStoreconcentrationData = [];
3318
- // this.zoneConcentrationData = []
3319
- // this.availableZones = [];
3320
- this.heatmapLoading = false;
3321
- this.heatmapNoData = true;
3322
- this.cardDataLoading = false;
3323
- this.cardNoData = true;
3324
- }
3325
- // this.getAnalaysisSummary()
3326
- }, error => {
3327
- this.overallStoreconcentrationData = [];
3328
- // this.zoneConcentrationData = []
3329
- // this.availableZones = [];
3330
- // console.error('API call failed', error);
3331
- });
2923
+ getOverallStoreConcentrationData() {
2924
+ this.heatmapLoading = true;
2925
+ this.heatmapNoData = true;
2926
+ // this.cardDataLoading = true;
2927
+ const requestData = {
2928
+ fromDate: this.headerData.date.startDate,
2929
+ toDate: this.headerData.date.endDate,
2930
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2931
+ // storeId: ["11-1176"],
2932
+ clientId: this.headerData.client,
2933
+ zoneName: this.zoneName,
2934
+ dateType: this.type,
2935
+ zoneDate: this.selectedDate
2936
+ };
2937
+ this.Zonev2Service.getOverallStoreConcentrationData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
2938
+ this.heatmapLoading = false;
2939
+ if (response?.code === 200 && response?.status === "success") {
2940
+ // this.overallStoreData = response.data.overallStoreConcentrationDatas;
2941
+ this.overallStoreconcentrationData = response.data.overallStoreConcentrationDatas;
2942
+ this.heatmapNoData = false;
2943
+ setTimeout(() => {
2944
+ let prevElement = document.querySelector('.carousel-control-prev');
2945
+ prevElement?.setAttribute('style', 'display:none');
2946
+ }, 200);
2947
+ }
2948
+ else {
2949
+ this.overallStoreconcentrationData = [];
2950
+ // this.zoneConcentrationData = []
2951
+ // this.availableZones = [];
2952
+ this.heatmapLoading = false;
2953
+ this.heatmapNoData = true;
2954
+ this.cardDataLoading = false;
2955
+ this.cardNoData = true;
2956
+ }
2957
+ // this.getAnalaysisSummary()
2958
+ }, error => {
2959
+ this.overallStoreconcentrationData = [];
2960
+ // this.zoneConcentrationData = []
2961
+ // this.availableZones = [];
2962
+ // console.error('API call failed', error);
2963
+ });
3332
2964
  }
3333
2965
  getOverallStoreHeatmapDates() {
3334
2966
  this.overallStoreConcentrationDates = [];
@@ -3446,7 +3078,7 @@ class StoreHeatmapComponent {
3446
3078
  const legend = this.genderroot.container.children.push(am5.Legend.new(this.genderroot, {
3447
3079
  x: am5.percent(50),
3448
3080
  centerX: am5.percent(50),
3449
- y: am5.percent(94),
3081
+ y: am5.percent(95),
3450
3082
  layout: this.genderroot.horizontalLayout,
3451
3083
  }));
3452
3084
  legend.labels.template.setAll({
@@ -3710,20 +3342,103 @@ class StoreHeatmapComponent {
3710
3342
  });
3711
3343
  }
3712
3344
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
3713
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreHeatmapComponent, selector: "lib-store-heatmap", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }, { propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }, { propertyName: "zoneNameList", first: true, predicate: ["zoneNameList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-5\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-7\">\r\n <div class=\"mt-14\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n <!-- Current Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Other Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-8%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:450px}.form-control:disabled{background-color:#f9fafb!important}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:190px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }, { kind: "component", type: ImageDirectoryComponent, selector: "lib-image-directory" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
3345
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreHeatmapComponent, selector: "lib-store-heatmap", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }, { propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }, { propertyName: "zoneNameList", first: true, predicate: ["zoneNameList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row px-3 pt-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone === 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone === 2 || periodzone === 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-8\">\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-4\">\r\n <div class=\"mt-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 \r\n </div>\r\n <div class=\"card-body p-0 mt-5\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <!-- <table class=\"table table-borderless text-center w-100\"> -->\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"overalltext\">{{ item?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n<!-- </table> -->\r\n\r\n <!-- <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody> -->\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:55px!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:525px}.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:300px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
3714
3346
  }
3715
3347
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
3716
3348
  type: Component,
3717
- args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-5\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-7\">\r\n <div class=\"mt-14\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n <!-- Current Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Other Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-8%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:450px}.form-control:disabled{background-color:#f9fafb!important}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:190px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"] }]
3718
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }, { type: i4.ActivatedRoute }], propDecorators: { carousel: [{
3719
- type: ViewChild,
3720
- args: ['carousel', { static: true }]
3721
- }], dateList: [{
3722
- type: ViewChild,
3723
- args: ['dateList', { read: ElementRef }]
3724
- }], zoneNameList: [{
3725
- type: ViewChild,
3726
- args: ['zoneNameList', { read: ElementRef }]
3349
+ args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row px-3 pt-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone === 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone === 2 || periodzone === 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-8\">\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-4\">\r\n <div class=\"mt-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 \r\n </div>\r\n <div class=\"card-body p-0 mt-5\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <!-- <table class=\"table table-borderless text-center w-100\"> -->\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"overalltext\">{{ item?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n<!-- </table> -->\r\n\r\n <!-- <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody> -->\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:55px!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:525px}.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:300px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"] }]
3350
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }, { type: i4.ActivatedRoute }], propDecorators: { carousel: [{
3351
+ type: ViewChild,
3352
+ args: ['carousel', { static: true }]
3353
+ }], dateList: [{
3354
+ type: ViewChild,
3355
+ args: ['dateList', { read: ElementRef }]
3356
+ }], zoneNameList: [{
3357
+ type: ViewChild,
3358
+ args: ['zoneNameList', { read: ElementRef }]
3359
+ }] } });
3360
+
3361
+ const SELECT_CONTROL_VALUE_ACCESSOR = {
3362
+ provide: NG_VALUE_ACCESSOR,
3363
+ useExisting: forwardRef(() => ReactiveSelectComponent),
3364
+ multi: true,
3365
+ };
3366
+ class ReactiveSelectComponent {
3367
+ onTouched;
3368
+ onChanged;
3369
+ isDisabled;
3370
+ idField;
3371
+ nameField;
3372
+ label;
3373
+ data;
3374
+ isOpened = false;
3375
+ selected = null;
3376
+ selectedId;
3377
+ writeValue(val) {
3378
+ this.selectedId = val;
3379
+ this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
3380
+ }
3381
+ registerOnChange(fn) {
3382
+ this.onChanged = fn;
3383
+ }
3384
+ registerOnTouched(fn) {
3385
+ this.onTouched = fn;
3386
+ }
3387
+ setDisabledState(isDisabled) {
3388
+ this.isDisabled = isDisabled;
3389
+ }
3390
+ onSelect(item) {
3391
+ this.onTouched();
3392
+ this.selected = item;
3393
+ this.selectedId = item?.[this.idField];
3394
+ this.isOpened = false;
3395
+ this.onChanged(this.selectedId);
3396
+ this.onSelectionChange(item);
3397
+ }
3398
+ onSelectionChange(item) {
3399
+ this.valueChange.emit(item?.[this.idField]);
3400
+ }
3401
+ onClick(event) {
3402
+ if (!this.isDisabled) {
3403
+ const targetElement = event.target;
3404
+ if (!this.isComponentClicked(targetElement)) {
3405
+ this.isOpened = false;
3406
+ }
3407
+ }
3408
+ }
3409
+ isComponentClicked(targetElement) {
3410
+ const parentElement = targetElement.parentElement;
3411
+ if (parentElement) {
3412
+ const clickedOnComponent = parentElement.classList.contains('custom-select');
3413
+ if (clickedOnComponent) {
3414
+ return true;
3415
+ }
3416
+ else {
3417
+ return this.isComponentClicked(parentElement);
3418
+ }
3419
+ }
3420
+ return false;
3421
+ }
3422
+ valueChange = new EventEmitter();
3423
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3424
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select w-200px\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label w-100\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"isOpened = !isOpened;\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect w-100\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2 w-100\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 w-100\">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#f9fafb!important}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;cursor:default;white-space:nowrap}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.custom-select.items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#eaf8ff!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3425
+ }
3426
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
3427
+ type: Component,
3428
+ 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"] }]
3429
+ }], propDecorators: { idField: [{
3430
+ type: Input
3431
+ }], nameField: [{
3432
+ type: Input
3433
+ }], label: [{
3434
+ type: Input
3435
+ }], data: [{
3436
+ type: Input
3437
+ }], onClick: [{
3438
+ type: HostListener,
3439
+ args: ['document:click', ['$event']]
3440
+ }], valueChange: [{
3441
+ type: Output
3727
3442
  }] } });
3728
3443
 
3729
3444
  class CustomerJourneyComponent {
@@ -3806,6 +3521,8 @@ class CustomerJourneyComponent {
3806
3521
  this.getCustomerJourney();
3807
3522
  });
3808
3523
  }
3524
+ limit = 10;
3525
+ offset = 1;
3809
3526
  getCustomerJourney() {
3810
3527
  this.customerjourneyLoading = true;
3811
3528
  this.customerjourneyNoData = true;
@@ -3816,8 +3533,8 @@ class CustomerJourneyComponent {
3816
3533
  clientId: this.headerData?.client,
3817
3534
  search: this.searchInput,
3818
3535
  sortType: this.selectControl.value,
3819
- limit: this.pageSize,
3820
- offset: this.currentPage - 1,
3536
+ limit: this.limit,
3537
+ offset: this.offset - 1,
3821
3538
  export: false,
3822
3539
  };
3823
3540
  this.Zonev2Service.getCustomerJourney(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
@@ -3955,37 +3672,41 @@ class CustomerJourneyComponent {
3955
3672
  sort: this.sortColumName,
3956
3673
  sortBy: this.sortDirection,
3957
3674
  limit: this.pageSize,
3958
- offset: this.currentPage - 1,
3675
+ offset: this.offset - 1,
3959
3676
  export: false,
3960
3677
  };
3961
- this.Zonev2Service.getCustomerJourneyTable(requestData)
3962
- .pipe(takeUntil(this.destroy$))
3963
- .subscribe((response) => {
3964
- this.zonesummaryLoading = false;
3965
- if (response?.code === 200 && response?.status === "success") {
3966
- // this.customerJourneyData = response.data;
3967
- this.customerJourneyData = response.data.customerJourneyTableData;
3968
- this.totalItems = response.data.totalCount;
3969
- this.zonesummaryLoading = false;
3970
- this.zonesummaryNoData = false;
3971
- this.searchDisabled = false;
3972
- }
3973
- else {
3974
- this.zonesummaryLoading = false;
3975
- this.zonesummaryNoData = true;
3976
- this.searchDisabled = true;
3977
- if (this.searchInput?.length) {
3978
- this.searchDisabled = true;
3678
+ this.Zonev2Service.getCustomerJourneyTable(requestData).subscribe({
3679
+ next: (response) => {
3680
+ if (response?.code === 200 && response?.status === "success") {
3681
+ this.customerJourneyData = response.data.customerJourneyTableData;
3682
+ this.totalItems = response.data['total_count'];
3683
+ this.zonesummaryLoading = false;
3684
+ this.zonesummaryNoData = false;
3685
+ }
3686
+ else {
3687
+ this.customerJourneyData = [];
3688
+ this.totalItems = 0;
3689
+ this.zonesummaryLoading = false;
3690
+ this.zonesummaryNoData = true;
3979
3691
  }
3692
+ if (this.totalItems < 10) {
3693
+ this.paginationSizes = [this.totalItems];
3694
+ }
3695
+ else {
3696
+ this.paginationSizes = [10, 20, 30];
3697
+ }
3698
+ },
3699
+ error: (err) => {
3980
3700
  this.customerJourneyData = [];
3981
- this.totalItems = 0;
3982
- this.changeDetector.detectChanges();
3701
+ this.zonesummaryLoading = false;
3702
+ this.zonesummaryNoData = true;
3703
+ console.log("@@ ~ getCustomerJourneyTableData [ERR]:", err);
3983
3704
  }
3984
- }, error => {
3985
- this.customerJourneyData = [];
3986
- this.changeDetector.detectChanges();
3987
3705
  });
3988
3706
  }
3707
+ paginationSize() {
3708
+ return this.totalItems < 10 ? this.totalItems : this.limit;
3709
+ }
3989
3710
  onExport() {
3990
3711
  this.currentPage = 1;
3991
3712
  const requestData = {
@@ -4015,6 +3736,8 @@ class CustomerJourneyComponent {
4015
3736
  });
4016
3737
  }
4017
3738
  searchField() {
3739
+ this.offset = 1;
3740
+ this.limit = 10;
4018
3741
  this.getCustomerJourneyTable();
4019
3742
  }
4020
3743
  sortData(column) {
@@ -4029,12 +3752,13 @@ class CustomerJourneyComponent {
4029
3752
  this.getCustomerJourneyTable();
4030
3753
  }
4031
3754
  onPageSizeChange(pageSize) {
4032
- this.currentPage = 1;
4033
- this.pageSize = parseInt(pageSize);
3755
+ this.offset = 1;
3756
+ this.limit = Number(pageSize);
3757
+ this.changeDetector.detectChanges();
4034
3758
  this.getCustomerJourneyTable();
4035
3759
  }
4036
3760
  onPageChange(pageOffset) {
4037
- this.currentPage = parseInt(pageOffset);
3761
+ this.offset = Number(pageOffset);
4038
3762
  this.getCustomerJourneyTable();
4039
3763
  }
4040
3764
  toggleView() {
@@ -4055,11 +3779,11 @@ class CustomerJourneyComponent {
4055
3779
  });
4056
3780
  }
4057
3781
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
4058
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyComponent, selector: "lib-customer-journey", ngImport: i0, template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData && !customerjourneyLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }] });
3782
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyComponent, selector: "lib-customer-journey", ngImport: i0, template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData && !customerjourneyLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }] });
4059
3783
  }
4060
3784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyComponent, decorators: [{
4061
3785
  type: Component,
4062
- args: [{ selector: 'lib-customer-journey', template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData && !customerjourneyLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"] }]
3786
+ args: [{ selector: 'lib-customer-journey', template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData && !customerjourneyLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"] }]
4063
3787
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
4064
3788
 
4065
3789
  class TopPerformingComponent {
@@ -4490,107 +4214,392 @@ class SummaryTableComponent {
4490
4214
  this.pageSize = this.paginationSizes[0];
4491
4215
  }
4492
4216
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
4493
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
4217
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('impressionRate')\">\r\n Impression Rate\r\n <svg [ngClass]=\"sortColumName === 'impressionRate' && 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 === 'impressionRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressionRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
4494
4218
  }
4495
4219
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, decorators: [{
4496
4220
  type: Component,
4497
- args: [{ selector: 'lib-summary-table', template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"] }]
4221
+ args: [{ selector: 'lib-summary-table', template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('impressionRate')\">\r\n Impression Rate\r\n <svg [ngClass]=\"sortColumName === 'impressionRate' && 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 === 'impressionRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressionRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"] }]
4498
4222
  }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
4499
4223
 
4500
- class ZoneV2Component {
4501
- pageInfo;
4224
+ class ZoneV2Component {
4225
+ pageInfo;
4226
+ gs;
4227
+ zoneService;
4228
+ cd;
4229
+ storeId = 0;
4230
+ headerData;
4231
+ showReportProcessingCard = true;
4232
+ yesterdayDate = '';
4233
+ dataProcessedLoading = true;
4234
+ destroy$ = new Subject();
4235
+ ngOnDestroy() {
4236
+ this.destroy$.next(true);
4237
+ this.destroy$.complete();
4238
+ }
4239
+ constructor(pageInfo, gs, zoneService, cd) {
4240
+ this.pageInfo = pageInfo;
4241
+ this.gs = gs;
4242
+ this.zoneService = zoneService;
4243
+ this.cd = cd;
4244
+ }
4245
+ ngOnInit() {
4246
+ this.gs.dataRangeValue
4247
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
4248
+ .subscribe((data) => {
4249
+ this.headerData = data;
4250
+ this.updateStoreId();
4251
+ this.setPageData();
4252
+ this.checkTodayReportStatus();
4253
+ });
4254
+ }
4255
+ setPageData() {
4256
+ this.pageInfo.setTitle("Zones");
4257
+ this.pageInfo.setDescription("Zones");
4258
+ this.pageInfo.setBreadcrumbs([
4259
+ { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: false },
4260
+ { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: true },
4261
+ ]);
4262
+ }
4263
+ updateStoreId() {
4264
+ this.storeId = this.headerData.stores.filter((store) => store.checked).length;
4265
+ }
4266
+ checkTodayReportStatus() {
4267
+ this.dataProcessedLoading = true;
4268
+ const reportParams = {
4269
+ clientId: this.headerData?.client,
4270
+ fromDate: this.headerData?.date?.startDate,
4271
+ toDate: this.headerData?.date?.endDate
4272
+ };
4273
+ this.zoneService.getCheckTodayReportStatus(reportParams)
4274
+ .pipe(takeUntil(this.destroy$))
4275
+ .subscribe({
4276
+ next: (res) => {
4277
+ this.dataProcessedLoading = false;
4278
+ this.showReportProcessingCard = res?.data?.reportSendStatus === true;
4279
+ this.yesterdayDate = res?.data?.yesterday || '';
4280
+ this.cd.detectChanges();
4281
+ },
4282
+ error: (err) => {
4283
+ console.error('Error checking report status:', err);
4284
+ this.showReportProcessingCard = false;
4285
+ }
4286
+ });
4287
+ }
4288
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4289
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneV2Component, selector: "lib-zone-v2", ngImport: i0, template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n</div> \r\n", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZonesCardsComponent, selector: "lib-zones-cards" }, { kind: "component", type: StoreHeatmapComponent, selector: "lib-store-heatmap" }, { kind: "component", type: CustomerJourneyComponent, selector: "lib-customer-journey" }, { kind: "component", type: TopPerformingComponent, selector: "lib-top-performing" }, { kind: "component", type: SummaryTableComponent, selector: "lib-summary-table" }] });
4290
+ }
4291
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, decorators: [{
4292
+ type: Component,
4293
+ args: [{ selector: 'lib-zone-v2', template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n</div> \r\n", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"] }]
4294
+ }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
4295
+
4296
+ const routes = [
4297
+ {
4298
+ path: 'v1',
4299
+ component: TangoAnalyseZoneComponent
4300
+ },
4301
+ {
4302
+ path: 'v2',
4303
+ component: ZoneV2Component
4304
+ }
4305
+ ];
4306
+ class TangoAnalyseZoneRoutingModule {
4307
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4308
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] });
4309
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
4310
+ }
4311
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
4312
+ type: NgModule,
4313
+ args: [{
4314
+ imports: [RouterModule.forChild(routes)],
4315
+ exports: [RouterModule]
4316
+ }]
4317
+ }] });
4318
+
4319
+ class ImageDirectoryViewComponent {
4320
+ Zonev2Service;
4321
+ cd;
4322
+ Imagedata;
4323
+ processType;
4324
+ footfallDate;
4325
+ storeName;
4326
+ storeId;
4327
+ headerData;
4328
+ imageArray;
4329
+ folderName;
4330
+ Images;
4331
+ itemsPerPage = 10;
4332
+ currentPage = 1;
4333
+ totalItems = 1;
4334
+ paginationSizes = [1];
4335
+ pageSize = 1;
4336
+ dataSubscrptionValue = [];
4337
+ statusValues;
4338
+ filteredData;
4339
+ objData;
4340
+ storeArrayValue;
4341
+ constructor(Zonev2Service, cd) {
4342
+ this.Zonev2Service = Zonev2Service;
4343
+ this.cd = cd;
4344
+ }
4345
+ ngOnInit() {
4346
+ this.Images = this.Imagedata?.images?.entryTimeImage;
4347
+ this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
4348
+ this.totalItems = this.filteredData[0].count;
4349
+ this.getStoreActive();
4350
+ }
4351
+ destroy$ = new Subject();
4352
+ ngOnDestroy() {
4353
+ this.destroy$.next(true);
4354
+ this.destroy$.complete();
4355
+ }
4356
+ getStoreActive() {
4357
+ let obj = {
4358
+ "clientId": this.headerData.client,
4359
+ "storeId": this.storeId
4360
+ };
4361
+ this.Zonev2Service
4362
+ .getStoresActive(obj)
4363
+ .pipe(takeUntil(this.destroy$))
4364
+ ?.subscribe({
4365
+ next: (res) => {
4366
+ if (res && res.code === 200) {
4367
+ this.dataSubscrptionValue = res.data.storeSubscription.product;
4368
+ }
4369
+ }
4370
+ });
4371
+ }
4372
+ imageData(type) {
4373
+ if (type === 'entry') {
4374
+ this.Images = this.Imagedata?.images?.entryTimeImage;
4375
+ }
4376
+ else if (type === 'exit') {
4377
+ this.Images = this.Imagedata?.images?.exitTimeImage;
4378
+ }
4379
+ else if (type === 'staff') {
4380
+ this.Images = this.Imagedata?.images?.staffEngagementImage;
4381
+ }
4382
+ }
4383
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4384
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryViewComponent, selector: "lib-image-directory-view", inputs: { Imagedata: "Imagedata", processType: "processType", footfallDate: "footfallDate", storeName: "storeName", storeId: "storeId", headerData: "headerData", imageArray: "imageArray", folderName: "folderName" }, ngImport: i0, template: "<div class=\"row h-550px scroll w-100\"></div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8 col-xxl-8\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-md-7\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- Display footfall count or '--' if not available -->\r\n <span class=\"card-label header\">{{storeName | titlecase}} - {{footfallDate | date:'dd MMM, yyyy'}}</span>\r\n </h3>\r\n </div>\r\n <!-- Switch toggle -->\r\n <div class=\"col-md-5 text-end\">\r\n <span class=\"custId\">Customer ID</span>\r\n <span class=\"badge badge-light-primary mx-2\">{{Imagedata?.tempId}}</span>\r\n <span class=\"badge badge-light-danger\">{{processType | titlecase}} </span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row contain\">\r\n <div class=\"col-12 mb-5\">\r\n <img class=\"cursor-pointer\" class=\"img-src\" [src]=\"Images\"\r\n (error)=\"Images = null\" alt=\"\">\r\n <div *ngIf=\"!Images\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\" d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"row slider\">\r\n\r\n <ng-container>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.entryTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.entryTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.entryTimeImage\r\n }\">\r\n <div>Entry Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.entryTimeImage\"\r\n (error)=\"Imagedata?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageData('entry')\">\r\n <div *ngIf=\"!Imagedata?.images?.entryTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.staffEngagementImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.staffEngagementImage,\r\n 'border-gray': Images !== Imagedata?.images?.staffEngagementImage\r\n }\">\r\n <div>Staff Engagement</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.staffEngagementImage\"\r\n (error)=\"Imagedata?.images.staffEngagementImage = null\" alt=\"\" (click)=\"imageData('staff')\">\r\n <div *ngIf=\"!Imagedata?.images?.staffEngagementImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 \" *ngIf=\"Imagedata?.images?.exitTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.exitTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.exitTimeImage\r\n }\">\r\n <div>Exit Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.exitTimeImage\"\r\n (error)=\"Imagedata?.images.exitTimeImage = null\" alt=\"\" (click)=\"imageData('exit')\">\r\n <div *ngIf=\"!Imagedata?.images?.exitTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <span (click)=\"next()\" class=\"next\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\"\r\n fill=\"none\">\r\n <path d=\"M1 11L6 6L1 1\" stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </span> -->\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination> -->\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4\">\r\n <div *ngIf=\"dataSubscrptionValue.tangoTraffic\" class=\"row\">\r\n <div class=\"col-12 mb-5 cam-details-header px-0\">Time Spent</div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Entry Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Exit Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n <!-- <div class=\"py-2 img-doc-time\">Avg Dwell Time</div> -->\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.entryTime ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.exitTime ?? '--'}}</div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.totalTimeSpent ?? '--'}}</div>\r\n <!-- <div class=\"py-2 img-doc-value\">20 Mins</div> -->\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <hr />\r\n\r\n <div *ngIf=\"!dataSubscrptionValue.tangoZone\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Zone\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Identify hotspots and optimize your merchandise with Tango Zone's store heatmap analytics\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/zone-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"row\">\r\n <span class=\"zone-header\">Zones Visited</span>\r\n <ng-container class=\"h-200px scroll\">\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n </ng-container>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"last-visit\">Last Visited Zone</span>\r\n </div>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"badge badge-light-primary mx-2\"> John Jacobs</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"mt-5 col-lg-12\">\r\n <button class=\"btn btn-light-primary1 w-100 px-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4713_25)\">\r\n <path d=\"M19.6673 5.83341L13.834 10.0001L19.6673 14.1667V5.83341Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M12.1673 4.16675H3.00065C2.08018 4.16675 1.33398 4.91294 1.33398 5.83341V14.1667C1.33398 15.0872 2.08018 15.8334 3.00065 15.8334H12.1673C13.0878 15.8334 13.834 15.0872 13.834 14.1667V5.83341C13.834 4.91294 13.0878 4.16675 12.1673 4.16675Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4713_25\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">View Trajectory</span></button>\r\n </div>\r\n <hr />\r\n <div *ngIf=\"!dataSubscrptionValue.tangoTrax\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Trax\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Create AI-driven checklists to streamline your processes and boost compliance with Tango Trax.\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/trax-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"dataSubscrptionValue.tangoTrax\" class=\"row\">\r\n <div class=\"zone-header my-3 ps-3\">Staff Engagement</div>\r\n\r\n <div class=\"row ps-3 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Time taken to assist <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n\r\n <div class=\"py-2 img-doc-time\">Time spent with staff</div>\r\n\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeTakenToAssist ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeSpentWithStaff ?? '--'}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <hr /> -->\r\n", styles: [":host{padding:24px}.tabset{display:flex;border-bottom:1px solid #EAECF0;width:100%}.tabset .tab{padding:12px;color:#667085;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.tabset .selected{background:#eaf8ff;border-bottom:2px solid #009BF3}.active-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#12b76a}.inactive-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#f04438}.camera-number{color:#344054;font-size:14px;font-weight:600;line-height:20px}.camera-name-chip{padding:2px 8px;border-radius:16px;background:#eaf8ff;color:#009bf3;font-size:12px;font-weight:500;line-height:18px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cam-details-header{color:#101828;font-size:18px;font-weight:600;line-height:28px}img{width:100%;border-radius:8px}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.no-preview-sm{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px}.no-preview-sm .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-sm .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.no-preview-md{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 7px}.no-preview-md .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-md .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.slider{position:relative}.slider .previous{position:absolute;top:30%;left:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.slider .next{position:absolute;top:30%;right:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.angle-change-header{color:#000;font-size:16px;font-weight:500;line-height:24px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.img-src{border-radius:12px;border:1px solid var(--Gray-400, #98A2B3);background:var(--Gray-50, #F9FAFB);width:100%;height:311px}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);padding:0 4px}.border-gray-active{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-50, #EAF8FF);padding:0 4px}.zone-header{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.last-visit{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.btn-light-primary1{color:var(--White, #FFF)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize;border-radius:4px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important}.card-label{font-size:18px!important}.productCard{border-radius:12px;background:var(--Gray-50, #F9FAFB)}.product-title{color:var(--Gray-800, #1D2939);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.left-card-count-title{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-style:normal;font-weight:400;line-height:18px}.explore-btn{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.custId{color:var(--Gray-900, #101828);font-size:12px;font-style:normal;font-weight:600;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
4385
+ }
4386
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
4387
+ type: Component,
4388
+ 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"] }]
4389
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
4390
+ type: Input
4391
+ }], processType: [{
4392
+ type: Input
4393
+ }], footfallDate: [{
4394
+ type: Input
4395
+ }], storeName: [{
4396
+ type: Input
4397
+ }], storeId: [{
4398
+ type: Input
4399
+ }], headerData: [{
4400
+ type: Input
4401
+ }], imageArray: [{
4402
+ type: Input
4403
+ }], folderName: [{
4404
+ type: Input
4405
+ }] } });
4406
+
4407
+ class ImageDirectoryComponent {
4408
+ Zonev2Service;
4502
4409
  gs;
4503
- zoneService;
4504
4410
  cd;
4505
- storeId = 0;
4411
+ modalService;
4412
+ fb;
4413
+ selectIndex = 0;
4414
+ selectedTime;
4415
+ objData;
4416
+ objectsArray;
4417
+ imagesArrayData;
4418
+ processType = "footfall";
4506
4419
  headerData;
4507
- showReportProcessingCard = true;
4508
- yesterdayDate = '';
4509
- dataProcessedLoading = true;
4510
- destroy$ = new Subject();
4511
- ngOnDestroy() {
4512
- this.destroy$.next(true);
4513
- this.destroy$.complete();
4514
- }
4515
- constructor(pageInfo, gs, zoneService, cd) {
4516
- this.pageInfo = pageInfo;
4420
+ folderView = true;
4421
+ dayjs = dayjs;
4422
+ dateArray;
4423
+ form;
4424
+ noData = false;
4425
+ loading = true;
4426
+ storeArrayValue;
4427
+ storeIdarray;
4428
+ constructor(Zonev2Service, gs, cd, modalService, fb) {
4429
+ this.Zonev2Service = Zonev2Service;
4517
4430
  this.gs = gs;
4518
- this.zoneService = zoneService;
4519
4431
  this.cd = cd;
4432
+ this.modalService = modalService;
4433
+ this.fb = fb;
4434
+ this.form = this.fb.group({
4435
+ selectValue: new FormControl('') // Initialize as FormControl
4436
+ });
4520
4437
  }
4521
4438
  ngOnInit() {
4522
4439
  this.gs.dataRangeValue
4523
- .pipe(takeUntil(this.destroy$), debounceTime(300))
4440
+ .pipe(takeUntil(this.destroy$), debounceTime$1(300))
4524
4441
  .subscribe((data) => {
4525
- this.headerData = data;
4526
- this.updateStoreId();
4527
- this.setPageData();
4528
- this.checkTodayReportStatus();
4442
+ if (data !== null || data?.client !== null) {
4443
+ this.headerData = data;
4444
+ this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
4445
+ this.objData = {
4446
+ storeId: data.stores
4447
+ .filter((store) => store.checked)
4448
+ .map((store) => store.storeId),
4449
+ clientId: data.client,
4450
+ processType: this.processType,
4451
+ footfallDate: this.headerData.date.endDate,
4452
+ };
4453
+ const initialValue = this.getInitialValue();
4454
+ const selectControl = this.form.get('selectValue');
4455
+ if (selectControl) {
4456
+ selectControl.setValue(initialValue);
4457
+ }
4458
+ this.backToFootfall();
4459
+ this.displayDateRange();
4460
+ }
4529
4461
  });
4530
4462
  }
4531
- setPageData() {
4532
- this.pageInfo.setTitle("Zones");
4533
- this.pageInfo.setDescription("Zones");
4534
- this.pageInfo.setBreadcrumbs([
4535
- { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: false },
4536
- { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: true },
4537
- ]);
4538
- }
4539
- updateStoreId() {
4540
- this.storeId = this.headerData.stores.filter((store) => store.checked).length;
4463
+ destroy$ = new Subject();
4464
+ ngOnDestroy() {
4465
+ this.destroy$.next(true);
4466
+ this.destroy$.complete();
4541
4467
  }
4542
- checkTodayReportStatus() {
4543
- this.dataProcessedLoading = true;
4544
- const reportParams = {
4545
- clientId: this.headerData?.client,
4546
- fromDate: this.headerData?.date?.startDate,
4547
- toDate: this.headerData?.date?.endDate
4548
- };
4549
- this.zoneService.getCheckTodayReportStatus(reportParams)
4468
+ getImageFolder() {
4469
+ delete this.objData.folderName;
4470
+ this.Zonev2Service
4471
+ .getFootfallDirectoryFolders(this.objData)
4550
4472
  .pipe(takeUntil(this.destroy$))
4551
- .subscribe({
4473
+ ?.subscribe({
4552
4474
  next: (res) => {
4553
- this.dataProcessedLoading = false;
4554
- this.showReportProcessingCard = res?.data?.reportSendStatus === true;
4555
- this.yesterdayDate = res?.data?.yesterday || '';
4475
+ if (res && res.code === 200) {
4476
+ this.objectsArray = res?.data.footfallData;
4477
+ this.selectedTime = this.objectsArray[0].folderName;
4478
+ this.objData.folderName = this.selectedTime;
4479
+ this.getImageView();
4480
+ this.cd.detectChanges();
4481
+ }
4482
+ else {
4483
+ this.loading = false;
4484
+ this.noData = true;
4485
+ }
4486
+ },
4487
+ error: (err) => {
4556
4488
  this.cd.detectChanges();
4557
4489
  },
4490
+ complete: () => { },
4491
+ });
4492
+ }
4493
+ getImageView() {
4494
+ this.loading = true;
4495
+ this.noData = false;
4496
+ this.Zonev2Service
4497
+ .getFootfallDirectory(this.objData)
4498
+ .pipe(takeUntil(this.destroy$))
4499
+ ?.subscribe({
4500
+ next: (res) => {
4501
+ if (res && res.code === 200) {
4502
+ if (!res?.data.footfallData.length) {
4503
+ this.loading = false;
4504
+ this.noData = true;
4505
+ }
4506
+ else {
4507
+ this.imagesArrayData = res?.data.footfallData;
4508
+ this.storeArrayValue = res?.data.storeName;
4509
+ this.loading = false;
4510
+ this.noData = false;
4511
+ this.cd.detectChanges();
4512
+ }
4513
+ }
4514
+ else {
4515
+ this.loading = false;
4516
+ this.noData = true;
4517
+ }
4518
+ },
4558
4519
  error: (err) => {
4559
- console.error('Error checking report status:', err);
4560
- this.showReportProcessingCard = false;
4561
- }
4520
+ this.cd.detectChanges();
4521
+ },
4522
+ complete: () => { },
4562
4523
  });
4563
4524
  }
4564
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4565
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneV2Component, selector: "lib-zone-v2", ngImport: i0, template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n</div> \r\n", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZonesCardsComponent, selector: "lib-zones-cards" }, { kind: "component", type: StoreHeatmapComponent, selector: "lib-store-heatmap" }, { kind: "component", type: CustomerJourneyComponent, selector: "lib-customer-journey" }, { kind: "component", type: TopPerformingComponent, selector: "lib-top-performing" }, { kind: "component", type: SummaryTableComponent, selector: "lib-summary-table" }] });
4566
- }
4567
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, decorators: [{
4568
- type: Component,
4569
- args: [{ selector: 'lib-zone-v2', template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n</div> \r\n", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"] }]
4570
- }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
4571
-
4572
- const routes = [
4573
- {
4574
- path: 'v1',
4575
- component: TangoAnalyseZoneComponent
4576
- },
4577
- {
4578
- path: 'v2',
4579
- component: ZoneV2Component
4525
+ getimages(index, obj) {
4526
+ this.selectIndex = index;
4527
+ (this.objData.footfallDate = obj), (this.folderView = false);
4528
+ this.getImageFolder();
4580
4529
  }
4581
- ];
4582
- class TangoAnalyseZoneRoutingModule {
4583
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4584
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] });
4585
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
4530
+ backToFootfall() {
4531
+ this.selectIndex = 0;
4532
+ this.folderView = true;
4533
+ }
4534
+ selectedTimes(val) {
4535
+ this.selectedTime = val;
4536
+ this.objData.folderName = val;
4537
+ this.folderView = false;
4538
+ this.selectedTime = val;
4539
+ this.getImageView();
4540
+ }
4541
+ imageView(obj, footfallDate) {
4542
+ const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
4543
+ centered: true,
4544
+ size: "xl",
4545
+ scrollable: true,
4546
+ });
4547
+ modalRef.componentInstance.Imagedata = obj;
4548
+ modalRef.componentInstance.processType = this.objData.processType;
4549
+ modalRef.componentInstance.footfallDate = footfallDate;
4550
+ modalRef.componentInstance.storeName = this.storeArrayValue;
4551
+ modalRef.componentInstance.storeId = this.storeIdarray;
4552
+ modalRef.componentInstance.headerData = this.headerData;
4553
+ modalRef.componentInstance.imageArray = this.objectsArray;
4554
+ modalRef.componentInstance.folderName = this.objData.folderName;
4555
+ modalRef.result.then((result) => { });
4556
+ }
4557
+ getDateRangeArray(fromDate, toDate) {
4558
+ const start = new Date(fromDate); // Convert string to Date object
4559
+ const end = new Date(toDate); // Convert string to Date object
4560
+ const dateArray = [];
4561
+ // Check if the dates are valid
4562
+ if (isNaN(start.getTime()) || isNaN(end.getTime())) {
4563
+ return dateArray;
4564
+ }
4565
+ // Loop from start date to end date
4566
+ let currentDate = start;
4567
+ while (currentDate <= end) {
4568
+ dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
4569
+ currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
4570
+ }
4571
+ return dateArray;
4572
+ }
4573
+ // Method to display or log the date range array
4574
+ displayDateRange() {
4575
+ const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
4576
+ this.dateArray = dates;
4577
+ }
4578
+ datasets = [
4579
+ { value: 'footfall', label: 'Footfall' },
4580
+ { value: 'bounced', label: 'Bounced Footfall' },
4581
+ { value: 'engager', label: 'Engagers' },
4582
+ { value: 'missedOpportunity', label: 'Missed Opportunity' },
4583
+ { value: 'conversion', label: 'Conversion' }
4584
+ ];
4585
+ getInitialValue() {
4586
+ // For example, selecting the second item in the dataset
4587
+ return this.datasets[0].value; // Change as needed
4588
+ }
4589
+ onValueChange(selectedId) {
4590
+ this.objData.processType = selectedId,
4591
+ this.getImageFolder();
4592
+ }
4593
+ get selectControl() {
4594
+ return this.form.get('selectValue');
4595
+ }
4596
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, deps: [{ token: Zonev2Service }, { token: i2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
4597
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryComponent, selector: "lib-image-directory", ngImport: i0, template: " <div class=\"card-header border-0 px-0\">\r\n <div class=\"col-md-12\">\r\n <div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#EAF8FF\" stroke-width=\"6\" />\r\n <path d=\"M23.8333 14.6666L15.5 24.6666H23L22.1667 31.3333L30.5 21.3333H23L23.8333 14.6666Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one ms-2\">\r\n <ng-container>Examine individual footfall in gallery view with optimal sample images for detailed analysis.</ng-container>\r\n <!-- <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container> -->\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z\"\r\n fill=\"black\" />\r\n </svg> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"folderView\" class=\"p-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-1 mt-5 text-center\" *ngFor=\"let obj of dateArray;let i = index\">\r\n <div (click)=\"getimages(i,obj)\">\r\n <div *ngIf=\"i === selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.154297\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#33B5FF\" />\r\n <path\r\n d=\"M39.8216 36.1667C39.8216 36.7855 39.5758 37.379 39.1382 37.8166C38.7006 38.2542 38.1071 38.5 37.4883 38.5H18.8216C18.2028 38.5 17.6093 38.2542 17.1717 37.8166C16.7341 37.379 16.4883 36.7855 16.4883 36.1667V19.8333C16.4883 19.2145 16.7341 18.621 17.1717 18.1834C17.6093 17.7458 18.2028 17.5 18.8216 17.5H24.6549L26.9883 21H37.4883C38.1071 21 38.7006 21.2458 39.1382 21.6834C39.5758 22.121 39.8216 22.7145 39.8216 23.3333V36.1667Z\"\r\n stroke=\"white\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n <div *ngIf=\"i !== selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.462891\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M40.1302 36.1667C40.1302 36.7855 39.8844 37.379 39.4468 37.8166C39.0092 38.2542 38.4157 38.5 37.7969 38.5H19.1302C18.5114 38.5 17.9179 38.2542 17.4803 37.8166C17.0427 37.379 16.7969 36.7855 16.7969 36.1667V19.8333C16.7969 19.2145 17.0427 18.621 17.4803 18.1834C17.9179 17.7458 18.5114 17.5 19.1302 17.5H24.9635L27.2969 21H37.7969C38.4157 21 39.0092 21.2458 39.4468 21.6834C39.8844 22.121 40.1302 22.7145 40.1302 23.3333V36.1667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n <div *ngIf=\"!folderView\" class=\"p1\">\r\n <div class=\"row\">\r\n <div class=\"d-flex flex-shrink-0 mt-3 justify-content-between align-items-center\">\r\n <span class=\"cursor-pointer\" (click)=\"backToFootfall()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2585_7036)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M25.8327 19H14.166M14.166 19L19.9993 24.8334M14.166 19L19.9993 13.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2585_7036\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2585_7036\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2585_7036\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-auto text-end\">\r\n <form [formGroup]=\"form\">\r\n <lib-reactive-select \r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100 text-start\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 p-0 w-100 overflow-x\">\r\n <div class=\"col text-nowrap\" *ngFor=\"let obj of objectsArray\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\">\r\n <a (click)=\"selectedTimes(obj.folderName)\"\r\n [ngClass]=\"selectedTime === obj?.folderName ? 'active' : ''\" class=\"nav-link cursor-pointer no-border mx-3 mb-2\">\r\n {{obj?.folderName}}<span class=\"mx-2 \" [ngClass]=\"selectedTime === obj?.folderName ? 'badge-num-primary' :'badge-num-muted'\">{{obj?.count?obj?.count:0}}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this image directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row p-3 img-traffic contain\" *ngIf=\"!noData && !loading\">\r\n <div class=\"col-md-3 border-gray mx-2 p-2 mt-5\" *ngFor=\"let obj of imagesArrayData\">\r\n <img *ngIf=\"obj.images.entryTimeImage\" class=\"img-src cursor-pointer\" [src]=\"obj.images.entryTimeImage\" (error)=\"obj?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageView(obj,objData.footfallDate)\">\r\n <div *ngIf=\"!obj.images.entryTimeImage\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n <div class=\"py-2 img-doc-directory\">{{obj.tempId}} <span class=\"badge badge-light-success ms-2\">{{selectControl.value | titlecase}}</span></div>\r\n <div class=\"py-2 img-doc-time\">Entry Time</div>\r\n <div class=\"py-2 img-doc-time\">Exit Time</div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n </div>\r\n <div class=\"col-md-4 text-end\" >\r\n <div class=\"py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1841_143300)\">\r\n <path d=\"M14.1986 5.33333V14H2.19857V5.33333M6.86523 8H9.5319M0.865234 2H15.5319V5.33333H0.865234V2Z\" stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1841_143300\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.199219)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.entryTime}} </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.exitTime}}</div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.totalTimeSpent}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n", styles: [".switch-form-card{padding:8px 16px;border-radius:4px;border-left:3px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.img-src{width:100%;height:210px;border-radius:.625rem}.img-traffic .col-md-3{width:24%!important}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.img-doc-directory{color:var(--Gray-900, #101828)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline}.img-doc-time{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.img-doc-value{color:var(--Gray-600, #475467);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.overflow-x{overflow-x:auto}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:41px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.img-nodata{width:25%;height:15%}.nodata-title{font-size:14px!important;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
4586
4598
  }
4587
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
4588
- type: NgModule,
4589
- args: [{
4590
- imports: [RouterModule.forChild(routes)],
4591
- exports: [RouterModule]
4592
- }]
4593
- }] });
4599
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
4600
+ type: Component,
4601
+ 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"] }]
4602
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
4594
4603
 
4595
4604
  class InterationTableClient430Component {
4596
4605
  ZoneService;