import { Component } from '@angular/core';
import { Subject, debounceTime, BehaviorSubject, takeUntil, distinctUntilChanged } from "rxjs";
import { FormControl } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "tango-app-ui-global";
import * as i2 from "../../services/trax.service";
import * as i3 from "@angular/router";
import * as i4 from "@angular/common";
import * as i5 from "tango-app-ui-shared";
import * as i6 from "@angular/forms";
import * as i7 from "../reactive-select/reactive-select.component";
export class FlagsComponent {
    gs;
    changeDetector;
    traxService;
    router;
    pageInfo;
    destroy$ = new Subject();
    itemsPerPage = 10;
    currentPage = 0;
    totalItems = 0;
    userEmailes = [];
    paginationSizes = [10, 20, 30];
    pageSize = 10;
    sortColumName = 'checkListName';
    sortDirection = 1;
    headerData;
    ;
    flagsTableApiState = new BehaviorSubject('initial');
    flagsTableData = [];
    cardMetricsApiState = new BehaviorSubject('initial');
    cardMetricsData;
    cardMetricsComparisonData;
    searchInput = new FormControl('');
    filterInput = new FormControl('all');
    filterValues = [
        { label: 'All', value: 'all' },
        { label: 'Question', value: 'question' },
        { label: 'Not Submitted', value: 'time' },
        { label: 'Detection', value: 'detection' },
    ];
    dateComparisonType;
    constructor(gs, changeDetector, traxService, router, pageInfo) {
        this.gs = gs;
        this.changeDetector = changeDetector;
        this.traxService = traxService;
        this.router = router;
        this.pageInfo = pageInfo;
        this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]");
        this.searchInput.valueChanges.pipe(takeUntil(this.destroy$)).pipe(debounceTime(1000), distinctUntilChanged()).subscribe((val) => {
            if (val === null || val === undefined) {
                return;
            }
            this.currentPage = 0;
            this.getFlagsTable();
        });
        this.filterInput.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((val) => {
            if (val === null || val === undefined) {
                return;
            }
            this.currentPage = 0;
            this.getFlagsTable();
        });
        const dateComparisonType = localStorage.getItem('dashboardDateType');
        if (dateComparisonType) {
            if (dateComparisonType === 'daily' || dateComparisonType === 'weekly') {
                this.dateComparisonType = dateComparisonType;
            }
            else {
                this.dateComparisonType = 'daily';
                localStorage.setItem('dashboardDateType', 'daily');
            }
        }
        else {
            this.dateComparisonType = 'daily';
            localStorage.setItem('dashboardDateType', 'daily');
        }
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    ngOnInit() {
        this.gs.dataRangeValue
            .pipe(takeUntil(this.destroy$))
            .pipe(debounceTime(1000))
            .subscribe((data) => {
            if (data?.client) {
                this.headerData = data;
                if (this.headerData?.stores?.length) {
                    this.headerData.stores = this.headerData.stores.filter((data) => data?.checked);
                }
                this.getChecklistFlagMetrics();
                this.getChecklistFlagMetricsComparison();
                this.getFlagsTable();
            }
        });
        this.setPageData();
    }
    setPageData() {
        this.pageInfo.setTitle("Flags");
        this.pageInfo.setDescription("");
        this.pageInfo.setBreadcrumbs([
            // { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
            // { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
            { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
            { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
            // { title: "Reports", path: "/manage/trax/reports", isActive: false, isSeparator: false },
            // { title: "Reports", path: "/manage/trax/reports", isActive: false, isSeparator: true },
        ]);
    }
    getChecklistFlagMetrics() {
        this.cardMetricsApiState.next('loading');
        const data = {
            "clientId": this.headerData?.client,
            "fromDate": this.headerData?.date.startDate,
            "toDate": this.headerData?.date.endDate,
            "storeId": this.headerData?.stores.map((val) => val.storeId),
            "userEmailes": this.userEmailes
        };
        this.traxService.overallFlagMetrics(data).pipe(takeUntil(this.destroy$)).subscribe({
            next: (res) => {
                this.cardMetricsApiState.next('loaded');
                if (res?.data) {
                    this.cardMetricsData = res.data;
                }
                else {
                    this.cardMetricsData = null;
                }
            },
            error: (e) => {
                console.log(e);
            }
        });
    }
    getChecklistFlagMetricsComparison() {
        const data = {
            "clientId": this.headerData?.client,
            "fromDate": this.headerData?.date.startDate,
            "toDate": this.headerData?.date.endDate,
            "storeId": this.headerData?.stores.map((val) => val.storeId),
            "userEmailes": this.userEmailes,
            "dateType": this.dateComparisonType
        };
        this.traxService.overallFlagMetricsComparison(data).pipe(takeUntil(this.destroy$)).subscribe({
            next: (res) => {
                if (res?.data) {
                    this.cardMetricsComparisonData = res.data;
                }
                else {
                    this.cardMetricsComparisonData = null;
                }
            },
            error: (e) => {
                console.log(e);
            }
        });
    }
    getFlagsTable() {
        this.flagsTableApiState.next('loading');
        const data = {
            "clientId": this.headerData?.client,
            "storeId": this.headerData?.stores.map((val) => val.storeId),
            "userEmailes": this.userEmailes,
            "fromDate": this.headerData?.date.startDate,
            "toDate": this.headerData?.date.endDate,
            "limit": this.pageSize,
            "offset": this.currentPage > 0 ? this.currentPage - 1 : 0,
            "sortColumnName": this.sortColumName,
            "sortBy": this.sortDirection,
            "searchValue": this.searchInput.value,
            "filter": this.filterInput.value
        };
        this.traxService.flagsTable(data).pipe(takeUntil(this.destroy$)).subscribe({
            next: (res) => {
                this.flagsTableApiState.next('loaded');
                if (res?.data?.totalCount) {
                    this.totalItems = res.data.totalCount;
                }
                else {
                    this.totalItems = 0;
                }
                if (res?.data?.checklistPerformance) {
                    this.flagsTableData = res.data.checklistPerformance;
                }
                else {
                    this.flagsTableData = [];
                }
            },
            error: (e) => {
                this.flagsTableApiState.next('loaded');
            }
        });
    }
    onFlagsTableExport() {
        // this.flagsTableApiState.next('loading')
        const data = {
            "clientId": this.headerData?.client,
            "storeId": this.headerData?.stores.map((val) => val.storeId),
            "userEmailes": this.userEmailes,
            "fromDate": this.headerData?.date.startDate,
            "toDate": this.headerData?.date.endDate,
            "limit": this.pageSize,
            "offset": this.currentPage > 0 ? this.currentPage - 1 : 0,
            "sortColumnName": this.sortColumName,
            "sortBy": this.sortDirection,
            "searchValue": this.searchInput.value,
            "filter": this.filterInput.value,
            "export": true
        };
        this.traxService.exportFlagsTable(data).pipe(takeUntil(this.destroy$)).subscribe({
            next: (res) => {
                this.flagsTableApiState.next('loaded');
                this.traxService.saveAsExcelFile(res, 'flag_');
            }
        });
    }
    sortData(column) {
        if (this.sortColumName === column) {
            this.sortDirection = this.sortDirection === 1 ? -1 : 1;
        }
        else {
            this.sortColumName = column;
            this.sortDirection = 1;
        }
        this.changeDetector.detectChanges();
        this.getFlagsTable();
    }
    onPageSizeChange(pageSize) {
        this.currentPage = 1;
        this.itemsPerPage = pageSize;
        this.pageSize = pageSize;
        this.changeDetector.detectChanges();
        this.getFlagsTable();
    }
    onPageChange(pageOffset) {
        this.currentPage = pageOffset;
        this.getFlagsTable();
    }
    viewInDetail(checklistId, type) {
        if (!checklistId) {
            return;
        }
        let route = `/manage/trax/flags/flagsinfo?id=${checklistId}`;
        if (type) {
            route = route + `&type=${type}`;
        }
        this.router.navigateByUrl(route);
    }
    dateComparisonValueChange(val) {
        localStorage.setItem('dashboardDateType', val);
        this.dateComparisonType = val;
        this.cardMetricsComparisonData = null;
        this.getChecklistFlagMetricsComparison();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsComponent, deps: [{ token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i2.TraxService }, { token: i3.Router }, { token: i1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsComponent, selector: "lib-flags", ngImport: i0, template: "<div class=\"col-md-12\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <ng-container >\r\n                    <div class=\"card-header ellipse1 border-0 px-3\">\r\n                        <div class=\"card-title d-flex align-items-start flex-column\">\r\n                            <div class=\"d-flex\">\r\n                                <div class=\"cardcount\">\r\n                                    {{(cardMetricsData?.flagCards?.totalFlag === 0 ||\r\n                                        cardMetricsData?.flagCards?.totalFlag) ?\r\n                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}\r\n                                </div>\r\n                                <div class=\"cardtext mx-3 mt-3\">Total Flags</div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-body p-0\">\r\n                        <div class=\"row g-0 h-100px py-3 \">\r\n                            <div class=\"col-11\" >\r\n                                <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount  my-2\">{{(cardMetricsData?.flagCards?.questionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Question Flags</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4 \">\r\n                                <div class=\"d-flex flex-column align-items-center\">\r\n                                 <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.delayInSubmission?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.delayInSubmission?.count) ? cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')\r\n                                    : '--'}}</div>\r\n                                <div class=\"cardtext\">Delay In Submission</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Detection Flags</div>\r\n                                <div class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n\r\n                            </div>          \r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Detection Flags</div>\r\n                                <div class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n\r\n                            </div>          \r\n                                </div>\r\n                              \r\n                            </div>\r\n                            <div class=\"col-1\">\r\n                                <div class=\"row\">\r\n                                 <div class=\"col-12 mt-3\">\r\n                                    <div class=\"d-flex flex-column align-items-end justify-content-center me-5\" >\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\" (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"  (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n                                    <!-- <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\"  (click)=\"dateValue('monthly')\">1M</div> -->    \r\n                                    </div>\r\n                                    \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            \r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <ng-container *ngIf=\"(cardMetricsApiState | async) === 'loading' || (cardMetricsApiState | async) === 'initial'\">\r\n                    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container> -->\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"row mt-3\">\r\n        <div class=\"col-lg-12\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header border-0 pt-4 px-4\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"card-label mb-2 me-3\">Checklist Flags <span *ngIf=\"totalItems\" class=\"badge badge-light-primary \">{{totalItems}}\r\n                                total</span></span>\r\n                        <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n                            headerData?.date?.endDate | date: 'MMM d, y' }}\r\n                        </span>\r\n                    </h3>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded'\" 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-8\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                            transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n                                        </rect>\r\n                                        <path\r\n                                            d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                            fill=\"currentColor\"></path>\r\n                                    </svg>\r\n                                </span>\r\n                                <input [formControl]=\"searchInput\" type=\"text\" \r\n                                    class=\"form-control ps-14 ms-4 me-4 footfallsearch\" placeholder=\"Search\"\r\n                                    autocomplete=\"off\" />\r\n                                     <lib-reactive-select [formControl]=\"filterInput\" [idField]=\"'value'\"\r\n                                        [nameField]=\"'label'\" [data]=\"filterValues\" class=\"w-100\">\r\n                                    </lib-reactive-select>\r\n                                <button *ngIf=\"flagsTableData?.length\" [disabled]=\"(flagsTableApiState | async) === 'loading'\" type=\"button\" (click)=\"onFlagsTableExport()\" type=\"button\"\r\n                                    class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n                                    <!-- Export Icon -->\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                        fill=\"none\">\r\n                                        <path\r\n                                            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"></path>\r\n                                    </svg>\r\n                                    <span class=\"ms-2\"></span> Export\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded'\" >\r\n                     <div class=\"table-responsive px-4\">\r\n                        <table class=\"table text-nowrap bottom-border\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Checklist Name\r\n                                        <svg\r\n                                            [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListType')\">Flag Type<svg\r\n                                            [ngClass]=\"sortColumName === 'checkListType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListType' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('coverage')\">Coverage<svg\r\n                                        [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('assignedStores')\">Assigned Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'assignedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'assignedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th  class=\"cursor-pointer\" (click)=\"sortData('flaggedStores')\">Flagged Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'flaggedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flaggedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th style=\"width: 200px;\" class=\"cursor-pointer\" (click)=\"sortData('flagCount')\">Flagged<svg\r\n                                            [ngClass]=\"sortColumName === 'flagCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flagCount' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('Compliance')\">Compliance %<svg\r\n                                            [ngClass]=\"sortColumName === 'Compliance' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'Compliance' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th>Actions</th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <!-- *ngFor=\"let store of checklistPerformance\" -->\r\n                                <tr *ngFor=\"let data of flagsTableData\">\r\n                                    <td>\r\n                                        <div>\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n                                                    {{data?.checkListChar || '--' }} </span>\r\n                                            </div><span (click)=\"viewInDetail(data?.sourceCheckList_id)\"\r\n                                                class=\"table-title-primary cursor-pointer\">{{data?.checkListName ? data?.checkListName : '--'}}</span> <span *ngIf=\"data?.checkListType !== 'custom'\"\r\n                                                class=\"mx-2\">\u2728</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">\r\n                                        <span *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span  *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"table-title\">{{ data?.coverage ? data?.coverage : '--' }}</td>\r\n                                    <td class=\"table-title\">{{ data.checkListType === 'custom' ? ((data?.assignedStores || data?.assignedStores === 0) ? data?.assignedStores : '--') : ((data?.assignedStoresAi || data?.assignedStoresAi === 0) ? data?.assignedStoresAi : '--')}}</td>\r\n                                    <td class=\"table-title\">{{ (data?.flaggedStores || data?.flaggedStores === 0) ? data?.flaggedStores : '--' }}</td>\r\n                                    <td class=\"table-title-primary\"> \r\n\r\n                                        <!-- <div class=\"d-flex justify-content-between\">\r\n                                        <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\">{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>    \r\n                                        </div> -->\r\n\r\n                                        <ng-container *ngIf=\"data?.checkListType === 'custom'\" >\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'question'\" class=\"d-flex justify-content-between mb-2\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'question')\" >{{(data?.customQuestionFlagCount || data?.customQuestionFlagCount === 0) ? data?.customQuestionFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Questions</span>    \r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'time'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'time')\" >{{(data?.customTimeFlagCount || data?.customTimeFlagCount === 0) ? data?.customTimeFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Not Submitted</span>    \r\n                                        </div>    \r\n                                        </ng-container>                                       \r\n\r\n                                        <div *ngIf=\"data?.checkListType !== 'custom'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\" >{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Detections</span>    \r\n                                        </div>\r\n                                        \r\n                                    </td>\r\n                                     <td class=\"table-title\">\r\n                                        <div class=\"d-flex\">\r\n                                            <div class=\"h-5px w-100 bg-light mt-4\">\r\n                                                <div role=\"progressbar\" aria-valuemin=\"20\" aria-valuemax=\"100\"\r\n                                                    class=\"bg-primary rounded h-5px \"\r\n                                                    [style.width]=\"data?.complianceRate + '%'\"> </div>\r\n                                            </div>\r\n                                            <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">\r\n                                                    {{data?.complianceRate?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n                                                    || '--'}}%</span></div>\r\n                                        </div>\r\n                                    </td>\r\n                                   <td>\r\n                                        <div class=\"table-title\">\r\n                                            <div (click)=\"viewInDetail(data?.sourceCheckList_id)\" class=\"table-title-primary cursor-pointer\">View</div>\r\n                                        </div>\r\n                                    </td>\r\n\r\n                                </tr>\r\n\r\n                            </tbody>\r\n                        </table>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && flagsTableData?.length\">\r\n                        <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n                            [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                            (pageChange)=\"onPageChange($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </div>   \r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n                        <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\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=\"(flagsTableApiState | async) === 'loaded' && !flagsTableData?.length\">\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 Flags Table</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container> \r\n                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", 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(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.flagcard{padding:0 0 0 15%}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.rotate{rotate:180deg;transition:1s}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-flags', template: "<div class=\"col-md-12\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <ng-container >\r\n                    <div class=\"card-header ellipse1 border-0 px-3\">\r\n                        <div class=\"card-title d-flex align-items-start flex-column\">\r\n                            <div class=\"d-flex\">\r\n                                <div class=\"cardcount\">\r\n                                    {{(cardMetricsData?.flagCards?.totalFlag === 0 ||\r\n                                        cardMetricsData?.flagCards?.totalFlag) ?\r\n                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}\r\n                                </div>\r\n                                <div class=\"cardtext mx-3 mt-3\">Total Flags</div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-body p-0\">\r\n                        <div class=\"row g-0 h-100px py-3 \">\r\n                            <div class=\"col-11\" >\r\n                                <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount  my-2\">{{(cardMetricsData?.flagCards?.questionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Question Flags</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4 \">\r\n                                <div class=\"d-flex flex-column align-items-center\">\r\n                                 <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.delayInSubmission?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.delayInSubmission?.count) ? cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')\r\n                                    : '--'}}</div>\r\n                                <div class=\"cardtext\">Delay In Submission</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Detection Flags</div>\r\n                                <div class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n\r\n                            </div>          \r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Detection Flags</div>\r\n                                <div class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n\r\n                            </div>          \r\n                                </div>\r\n                              \r\n                            </div>\r\n                            <div class=\"col-1\">\r\n                                <div class=\"row\">\r\n                                 <div class=\"col-12 mt-3\">\r\n                                    <div class=\"d-flex flex-column align-items-end justify-content-center me-5\" >\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\" (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"  (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n                                    <!-- <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\"  (click)=\"dateValue('monthly')\">1M</div> -->    \r\n                                    </div>\r\n                                    \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            \r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <ng-container *ngIf=\"(cardMetricsApiState | async) === 'loading' || (cardMetricsApiState | async) === 'initial'\">\r\n                    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container> -->\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"row mt-3\">\r\n        <div class=\"col-lg-12\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header border-0 pt-4 px-4\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"card-label mb-2 me-3\">Checklist Flags <span *ngIf=\"totalItems\" class=\"badge badge-light-primary \">{{totalItems}}\r\n                                total</span></span>\r\n                        <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n                            headerData?.date?.endDate | date: 'MMM d, y' }}\r\n                        </span>\r\n                    </h3>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded'\" 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-8\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                            transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n                                        </rect>\r\n                                        <path\r\n                                            d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                            fill=\"currentColor\"></path>\r\n                                    </svg>\r\n                                </span>\r\n                                <input [formControl]=\"searchInput\" type=\"text\" \r\n                                    class=\"form-control ps-14 ms-4 me-4 footfallsearch\" placeholder=\"Search\"\r\n                                    autocomplete=\"off\" />\r\n                                     <lib-reactive-select [formControl]=\"filterInput\" [idField]=\"'value'\"\r\n                                        [nameField]=\"'label'\" [data]=\"filterValues\" class=\"w-100\">\r\n                                    </lib-reactive-select>\r\n                                <button *ngIf=\"flagsTableData?.length\" [disabled]=\"(flagsTableApiState | async) === 'loading'\" type=\"button\" (click)=\"onFlagsTableExport()\" type=\"button\"\r\n                                    class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n                                    <!-- Export Icon -->\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                        fill=\"none\">\r\n                                        <path\r\n                                            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\"></path>\r\n                                    </svg>\r\n                                    <span class=\"ms-2\"></span> Export\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded'\" >\r\n                     <div class=\"table-responsive px-4\">\r\n                        <table class=\"table text-nowrap bottom-border\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Checklist Name\r\n                                        <svg\r\n                                            [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListType')\">Flag Type<svg\r\n                                            [ngClass]=\"sortColumName === 'checkListType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListType' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('coverage')\">Coverage<svg\r\n                                        [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('assignedStores')\">Assigned Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'assignedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'assignedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th  class=\"cursor-pointer\" (click)=\"sortData('flaggedStores')\">Flagged Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'flaggedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flaggedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th style=\"width: 200px;\" class=\"cursor-pointer\" (click)=\"sortData('flagCount')\">Flagged<svg\r\n                                            [ngClass]=\"sortColumName === 'flagCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flagCount' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('Compliance')\">Compliance %<svg\r\n                                            [ngClass]=\"sortColumName === 'Compliance' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'Compliance' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th>Actions</th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <!-- *ngFor=\"let store of checklistPerformance\" -->\r\n                                <tr *ngFor=\"let data of flagsTableData\">\r\n                                    <td>\r\n                                        <div>\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n                                                    {{data?.checkListChar || '--' }} </span>\r\n                                            </div><span (click)=\"viewInDetail(data?.sourceCheckList_id)\"\r\n                                                class=\"table-title-primary cursor-pointer\">{{data?.checkListName ? data?.checkListName : '--'}}</span> <span *ngIf=\"data?.checkListType !== 'custom'\"\r\n                                                class=\"mx-2\">\u2728</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">\r\n                                        <span *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span  *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"table-title\">{{ data?.coverage ? data?.coverage : '--' }}</td>\r\n                                    <td class=\"table-title\">{{ data.checkListType === 'custom' ? ((data?.assignedStores || data?.assignedStores === 0) ? data?.assignedStores : '--') : ((data?.assignedStoresAi || data?.assignedStoresAi === 0) ? data?.assignedStoresAi : '--')}}</td>\r\n                                    <td class=\"table-title\">{{ (data?.flaggedStores || data?.flaggedStores === 0) ? data?.flaggedStores : '--' }}</td>\r\n                                    <td class=\"table-title-primary\"> \r\n\r\n                                        <!-- <div class=\"d-flex justify-content-between\">\r\n                                        <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\">{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>    \r\n                                        </div> -->\r\n\r\n                                        <ng-container *ngIf=\"data?.checkListType === 'custom'\" >\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'question'\" class=\"d-flex justify-content-between mb-2\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'question')\" >{{(data?.customQuestionFlagCount || data?.customQuestionFlagCount === 0) ? data?.customQuestionFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Questions</span>    \r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'time'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'time')\" >{{(data?.customTimeFlagCount || data?.customTimeFlagCount === 0) ? data?.customTimeFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Not Submitted</span>    \r\n                                        </div>    \r\n                                        </ng-container>                                       \r\n\r\n                                        <div *ngIf=\"data?.checkListType !== 'custom'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\" >{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Detections</span>    \r\n                                        </div>\r\n                                        \r\n                                    </td>\r\n                                     <td class=\"table-title\">\r\n                                        <div class=\"d-flex\">\r\n                                            <div class=\"h-5px w-100 bg-light mt-4\">\r\n                                                <div role=\"progressbar\" aria-valuemin=\"20\" aria-valuemax=\"100\"\r\n                                                    class=\"bg-primary rounded h-5px \"\r\n                                                    [style.width]=\"data?.complianceRate + '%'\"> </div>\r\n                                            </div>\r\n                                            <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">\r\n                                                    {{data?.complianceRate?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n                                                    || '--'}}%</span></div>\r\n                                        </div>\r\n                                    </td>\r\n                                   <td>\r\n                                        <div class=\"table-title\">\r\n                                            <div (click)=\"viewInDetail(data?.sourceCheckList_id)\" class=\"table-title-primary cursor-pointer\">View</div>\r\n                                        </div>\r\n                                    </td>\r\n\r\n                                </tr>\r\n\r\n                            </tbody>\r\n                        </table>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && flagsTableData?.length\">\r\n                        <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n                            [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                            (pageChange)=\"onPageChange($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </div>   \r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n                        <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\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=\"(flagsTableApiState | async) === 'loaded' && !flagsTableData?.length\">\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 Flags Table</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container> \r\n                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", 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(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.flagcard{padding:0 0 0 15%}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.rotate{rotate:180deg;transition:1s}td{vertical-align:middle}\n"] }]
        }], ctorParameters: () => [{ type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i2.TraxService }, { type: i3.Router }, { type: i1.PageInfoService }] });
//# sourceMappingURL=data:application/json;base64, 