tango-app-ui-analyse-trax 3.4.0-eyeTest.2 → 3.4.0-eyeTest.21

package/fesm2022/tango-app-ui-analyse-trax-eye-test-audit.module-Dy5v59Wb.mjs

@@ -1,1402 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, Component, Input, Output, HostListener, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
-import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i2 from 'tango-app-ui-global';
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-import { BehaviorSubject, takeUntil, Subject } from 'rxjs';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { T as TraxService } from './tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CcBuiczt.mjs';
-import * as FileSaver from 'file-saver';
-import * as XLSX from 'xlsx';
-import * as i1 from '@angular/common/http';
-import * as i3 from 'tango-app-ui-shared';
-import { CommonSharedModule } from 'tango-app-ui-shared';
-import * as i8 from 'ngx-daterangepicker-material';
-import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
-import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import '@angular/platform-browser';
-import '@angular/cdk/drag-drop';
-import 'dayjs/plugin/customParseFormat';
-import 'dayjs/plugin/utc.js';
-import 'dayjs/plugin/timezone.js';
-import 'dayjs/plugin/utc';
-import '@amcharts/amcharts5';
-import '@amcharts/amcharts5/percent';
-import '@amcharts/amcharts5/themes/Animated';
-
-const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
-const EXCEL_EXTENSION = '.xlsx';
-const CSV_TYPE = 'text/csv;charset=utf-8';
-const CSV_EXTENSION = '.csv';
-class EyeTestAuditService {
-    http;
-    gs;
-    dropDownTrigger = new BehaviorSubject(null);
-    eyeTestauditApiUrl;
-    constructor(http, gs) {
-        this.http = http;
-        this.gs = gs;
-        this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
-            if (env) {
-                this.eyeTestauditApiUrl = env.eyeTestauditApiUrl;
-            }
-        });
-    }
-    destroy$ = new Subject();
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.complete();
-    }
-    getEyeTestlist(data) {
-        return this.http.post(`${this.eyeTestauditApiUrl}/get-list`, data);
-    }
-    getEyeTestTableExport(data) {
-        return this.http.post(`${this.eyeTestauditApiUrl}/get-list`, data, {
-            responseType: 'arraybuffer'
-        });
-    }
-    getAuditHistory(payload) {
-        return this.http.get(`${this.eyeTestauditApiUrl}/get-file-history/${payload?.id}/${payload.type}`);
-    }
-    submitAudit(payload) {
-        return this.http.post(`${this.eyeTestauditApiUrl}/save`, payload);
-    }
-    cancelAuditFile(payload) {
-        return this.http.post(`${this.eyeTestauditApiUrl}/cancel`, payload);
-    }
-    getAuditdetails(payload) {
-        return this.http.get(`${this.eyeTestauditApiUrl}/view-file/${payload?.id}`);
-    }
-    viewAuditHistory(payload) {
-        return this.http.get(`${this.eyeTestauditApiUrl}/user-audited-data/${payload?.id}`);
-    }
-    getAuditFile(payload) {
-        return this.http.get(`${this.eyeTestauditApiUrl}/get-file/${payload?.id}`);
-    }
-    exportAsExcelFile(json, excelFileName) {
-        if (!Array.isArray(json)) {
-            console.error('Invalid JSON data passed. Expected an array.', json);
-            return;
-        }
-        const worksheet = XLSX.utils?.json_to_sheet(json);
-        const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
-        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
-        this.saveAsExcelFile(excelBuffer, excelFileName);
-    }
-    saveAsExcelFile(buffer, fileName) {
-        const data = new Blob([buffer], {
-            type: EXCEL_TYPE
-        });
-        FileSaver.saveAs(data, fileName + 'list' + EXCEL_EXTENSION);
-    }
-    saveAsTemplate(buffer, fileName) {
-        const data = new Blob([buffer], {
-            type: EXCEL_TYPE
-        });
-        FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
-    }
-    exportAsCSVFile(json, excelFileName, identifier) {
-        const worksheet = XLSX.utils.json_to_sheet(json);
-        const csvOutput = XLSX.utils.sheet_to_csv(worksheet);
-        this.saveAsCSVFile(csvOutput, excelFileName);
-    }
-    saveAsCSVFile(buffer, fileName) {
-        const data = new Blob([buffer], {
-            type: CSV_TYPE
-        });
-        FileSaver.saveAs(data, fileName + CSV_EXTENSION);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditService, deps: [{ token: i1.HttpClient }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.GlobalStateService }] });
-
-const SELECT_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => ReactiveSelectComponent),
-    multi: true,
-};
-class ReactiveSelectComponent {
-    apiService;
-    cd;
-    onTouched;
-    onChanged;
-    isDisabled;
-    idField;
-    nameField;
-    label;
-    data;
-    itemChange = new EventEmitter();
-    isOpened = false;
-    selected = null;
-    selectedId;
-    instanceId;
-    constructor(apiService, cd) {
-        this.apiService = apiService;
-        this.cd = cd;
-    }
-    ngOnInit() {
-        this.instanceId = crypto.randomUUID();
-        this.apiService.dropDownTrigger.subscribe((e) => {
-            if (e !== this.instanceId) {
-                this.isOpened = false;
-                this.cd.detectChanges();
-            }
-        });
-    }
-    writeValue(val) {
-        this.selectedId = val;
-        this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
-    }
-    registerOnChange(fn) {
-        this.onChanged = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-    }
-    onSelect(item) {
-        this.onTouched();
-        this.selected = item;
-        this.selectedId = item?.[this.idField];
-        this.isOpened = false;
-        this.itemChange.next(this.selectedId);
-        this.onChanged(this.selectedId);
-    }
-    onClick(event) {
-        if (!this.isDisabled) {
-            const targetElement = event.target;
-            if (!this.isComponentClicked(targetElement)) {
-                this.isOpened = false;
-            }
-        }
-    }
-    isComponentClicked(targetElement) {
-        const parentElement = targetElement.parentElement;
-        if (parentElement) {
-            const clickedOnComponent = parentElement.classList.contains('custom-select');
-            if (clickedOnComponent) {
-                return true;
-            }
-            else {
-                return this.isComponentClicked(parentElement);
-            }
-        }
-        return false;
-    }
-    openDropdown() {
-        this.isOpened = !this.isOpened;
-        this.apiService.dropDownTrigger.next(this.instanceId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [{ token: EyeTestAuditService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { itemChange: "itemChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select\">\r\n    <div class=\"form-group\">\r\n        <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n        <div class=\"position-relative\">\r\n            <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n                {{selected?.[nameField]}}</div>\r\n            <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n                <ul class=\"list-unstyled mb-2\">\r\n                    <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n                        [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n                        class=\"text px-5 items cursor-pointer py-4 \">\r\n                        {{item?.[nameField]}}\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".custom-select{min-width:auto}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select\">\r\n    <div class=\"form-group\">\r\n        <label *ngIf=\"label\" class=\"form-label\">{{label}}</label>\r\n        <div class=\"position-relative\">\r\n            <div (click)=\"openDropdown()\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect ellipse1\">\r\n                {{selected?.[nameField]}}</div>\r\n            <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n                <ul class=\"list-unstyled mb-2\">\r\n                    <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n                        [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n                        class=\"text px-5 items cursor-pointer py-4 \">\r\n                        {{item?.[nameField]}}\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".custom-select{min-width:auto}.custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important;cursor:default;white-space:nowrap;overflow:hidden}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.ellipse1{min-width:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], ctorParameters: () => [{ type: EyeTestAuditService }, { type: i0.ChangeDetectorRef }], propDecorators: { idField: [{
-                type: Input
-            }], nameField: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], itemChange: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class CustomSelectComponent {
-    cd;
-    authService;
-    onClick(event) {
-        const target = event.target;
-        if (!target.closest('.dropdown')) {
-            this.showDropdown = false;
-        }
-    }
-    items;
-    searchField;
-    multi;
-    idField;
-    selectedValues = [];
-    disabled;
-    label;
-    selected = new EventEmitter();
-    filteredValues = [];
-    showDropdown;
-    searchValue;
-    instanceId;
-    constructor(cd, authService) {
-        this.cd = cd;
-        this.authService = authService;
-    }
-    ngOnInit() {
-        this.instanceId = crypto.randomUUID();
-        this.authService.dropDownTrigger.subscribe((e) => {
-            if (e !== this.instanceId) {
-                this.showDropdown = false;
-                this.cd.detectChanges();
-            }
-        });
-    }
-    get selectedValuesDisplay() {
-        return this.selectedValues?.map((item) => item[this.searchField]).join(', ') || '';
-    }
-    ngOnChanges(changes) {
-        if (changes['items'] && this.items?.length) {
-            this.initializeItems();
-        }
-        if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {
-            this.updateSelectedValues();
-        }
-    }
-    initializeItems() {
-        this.filteredValues = this.items?.map((item) => ({ ...item }));
-        this.updateSelectedValues();
-    }
-    updateSelectedValues() {
-        this.selectedValues?.forEach((selectedItem) => {
-            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
-            if (item) {
-                item.isSelected = true;
-            }
-        });
-    }
-    openDropdown(event) {
-        this.searchTerm = '';
-        this.authService.dropDownTrigger.next(this.instanceId);
-        event.stopPropagation();
-        this.showDropdown = !this.showDropdown;
-        // this.filteredValues = this.selectedValues
-        this.filteredValues.forEach((data) => {
-            data.isSelected = false;
-        });
-        this.selectedValues = [];
-        this.selected.emit(this.selectedValues);
-        this.searchValue = '';
-    }
-    // onInput(event: any) {
-    //   if (!event.target.value) {
-    //     this.filteredValues = [...this.items];
-    //   } else {
-    //     const searchTerm = event.target.value.toLowerCase();
-    //     if(searchTerm.includes(",")){
-    //       console.log(searchTerm.split(','))
-    //       this.filteredValues = []
-    //       searchTerm.split(',').map((data:any)=>{
-    //         if(data!=''){
-    //        let filterArray   = this.items.filter((item: any) =>{
-    //         console.log(item[this.searchField].toLowerCase(),data.trim().toLowerCase() )
-    //           item[this.searchField].toLowerCase().includes(data.trim().toLowerCase() )
-    //         })
-    //       console.log(filterArray)
-    //         this.filteredValues = [...this.filteredValues,...filterArray]
-    //       }
-    //     })
-    //     console.log(this.filteredValues)
-    //     }else{
-    //       this.filteredValues = this.items.filter((item: any) =>
-    //         item[this.searchField].toLowerCase().includes(searchTerm)
-    //       );
-    //     }
-    //   }
-    //   this.updateSelectedValues();
-    //   this.cd.detectChanges();
-    // }
-    searchTerm;
-    onInput(event) {
-        const input = event.target.value.trim();
-        // debugger
-        this.searchTerm = input;
-        if (!input) {
-            this.filteredValues = [...this.items];
-        }
-        else {
-            console.log(input, input.includes(","));
-            if (input.includes(",")) {
-                const searchTerms = input
-                    .split(',')
-                    .map((term) => term.trim().toLowerCase())
-                    .filter((term) => term); // Remove empty terms
-                this.filteredValues = this.items.filter((item) => searchTerms.some((term) => item[this.searchField]?.trim().toLowerCase() === term));
-            }
-            else {
-                this.filteredValues = this.items.filter((item) => item[this.searchField].trim().toLowerCase().includes(input.trim().toLowerCase()));
-            }
-        }
-        this.filteredValues.forEach((item) => {
-            item.isSelected = this.selectedValues.some((selected) => selected[this.idField] === item[this.idField]);
-        });
-        this.emitSelectedValues(this.filteredValues);
-        this.updateSelectedValues();
-        this.cd.detectChanges();
-    }
-    onSelect(event, item) {
-        console.log(item);
-        console.log(this.selectedValues);
-        const isChecked = event.currentTarget.checked;
-        if (this.multi) {
-            if (isChecked) {
-                if (!this.selectedValues.some((elem) => elem[this.idField] === item[this.idField])) {
-                    this.selectedValues.push(item);
-                }
-            }
-            else {
-                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
-            }
-        }
-        else {
-            this.selectedValues = [{ ...item }];
-            console.log(this.selectedValues);
-            this.filteredValues.forEach((element) => {
-                element.isSelected = element[this.idField] === item[this.idField];
-            });
-            this.showDropdown = false;
-        }
-        this.filteredValues.forEach((listItem) => {
-            listItem.isSelected = this.selectedValues.some((selected) => selected[this.idField] === listItem[this.idField]);
-        });
-        console.log(this.searchTerm.includes(","));
-        if (this.searchTerm.includes(",")) {
-            const searchTerms = this.searchTerm
-                .split(',')
-                .map((term) => term.trim().toLowerCase())
-                .filter((term) => term); // Remove empty terms
-            this.filteredValues = this.items.filter((item) => searchTerms.some((term) => item[this.searchField]?.trim().toLowerCase() === term));
-        }
-        else {
-            this.filteredValues = this.items.filter((item) => item[this.searchField].trim().toLowerCase().includes(this.searchTerm.trim().toLowerCase()));
-        }
-        console.log(this.filteredValues);
-        // Emit selected values without `isSelected` property
-        const valuesToEmit = this.selectedValues.map((value) => {
-            const { isSelected, ...selectedItem } = value;
-            return selectedItem;
-        });
-        this.emitSelectedValues(valuesToEmit); // Emit updated selections
-        this.cd.detectChanges();
-    }
-    onSelectAll(event) {
-        const selectAll = event.currentTarget.checked;
-        if (selectAll) {
-            this.filteredValues.forEach((item) => {
-                if (!this.selectedValues.some((elem) => elem[this.idField] === item[this.idField])) {
-                    this.selectedValues.push(item);
-                }
-            });
-        }
-        else {
-            console.log(this.selectedValues);
-            console.log(this.filteredValues);
-            this.selectedValues = this.selectedValues.filter((item) => !this.filteredValues.some((filteredItem) => filteredItem[this.idField] === item[this.idField]));
-        }
-        // Update the `isSelected` state in the filtered list
-        this.filteredValues.forEach((item) => {
-            item.isSelected = selectAll;
-        });
-        // Emit selected values without `isSelected` property
-        const valuesToEmit = this.selectedValues.map((value) => {
-            const { isSelected, ...selectedItem } = value;
-            return selectedItem;
-        });
-        this.emitSelectedValues(valuesToEmit);
-        this.cd.detectChanges();
-    }
-    emitSelectedValues(values) {
-        if (this.multi) {
-            this.selected.emit(values);
-        }
-        else {
-            this.selected.emit(values[0]);
-        }
-    }
-    checkIfAllSelected() {
-        return this.filteredValues.every((item) => item.isSelected);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EyeTestAuditService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomSelectComponent, selector: "lib-stores-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> {{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-stores-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> {{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: EyeTestAuditService }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], items: [{
-                type: Input
-            }], searchField: [{
-                type: Input
-            }], multi: [{
-                type: Input
-            }], idField: [{
-                type: Input
-            }], selectedValues: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], selected: [{
-                type: Output
-            }] } });
-
-class GroupSelectComponent {
-    cd;
-    authService;
-    onClick(event) {
-        const target = event.target;
-        if (!target.closest('.dropdown')) {
-            this.showDropdown = false;
-        }
-    }
-    items;
-    searchField;
-    multi;
-    idField;
-    selectedValues = [];
-    disabled;
-    label;
-    selected = new EventEmitter();
-    filteredValues = [];
-    showDropdown;
-    searchValue;
-    instanceId;
-    constructor(cd, authService) {
-        this.cd = cd;
-        this.authService = authService;
-    }
-    ngOnInit() {
-        this.instanceId = crypto.randomUUID();
-        this.authService.dropDownTrigger.subscribe((e) => {
-            if (e !== this.instanceId) {
-                this.showDropdown = false;
-                this.cd.detectChanges();
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['items'] && this.items?.length) {
-            this.initializeItems();
-        }
-        if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {
-            this.updateSelectedValues();
-        }
-    }
-    initializeItems() {
-        this.filteredValues = this.items.map((item) => ({ ...item }));
-        this.updateSelectedValues();
-    }
-    updateSelectedValues() {
-        this.selectedValues?.forEach((selectedItem) => {
-            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
-            if (item) {
-                item.isSelected = true;
-            }
-        });
-    }
-    openDropdown(event) {
-        this.authService.dropDownTrigger.next(this.instanceId);
-        event.stopPropagation();
-        this.showDropdown = !this.showDropdown;
-    }
-    onInput(event) {
-        if (!event.target.value) {
-            this.filteredValues = [...this.items];
-        }
-        else {
-            const searchTerm = event.target.value.toLowerCase();
-            this.filteredValues = this.items.filter((item) => item[this.searchField].toLowerCase().includes(searchTerm));
-        }
-        this.updateSelectedValues();
-        this.cd.detectChanges();
-    }
-    onSelect(event, item) {
-        if (this.multi) {
-            if (event.currentTarget.checked) {
-                this.selectedValues.push(item);
-            }
-            else {
-                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
-            }
-        }
-        else {
-            this.selectedValues = [{ ...item }];
-            this.filteredValues.forEach((element) => {
-                if (element[this.idField] !== item[this.idField]) {
-                    element.isSelected = false;
-                }
-            });
-            this.showDropdown = false;
-        }
-        const valuesToEmit = this.selectedValues.map((value) => {
-            const selectedItem = { ...value };
-            delete selectedItem.isSelected;
-            return selectedItem;
-        });
-        this.cd.detectChanges();
-        this.emitSelectedValues(valuesToEmit);
-    }
-    onSelectAll(event) {
-        const selectAll = event.currentTarget.checked;
-        this.filteredValues.forEach((item) => item.isSelected = selectAll);
-        if (selectAll) {
-            this.selectedValues = [...this.filteredValues];
-        }
-        else {
-            this.selectedValues = [];
-        }
-        const valuesToEmit = this.selectedValues.map((value) => {
-            const { isSelected, ...selectedItem } = value;
-            return selectedItem;
-        });
-        this.cd.detectChanges();
-        this.emitSelectedValues(valuesToEmit);
-    }
-    emitSelectedValues(values) {
-        if (this.multi) {
-            this.selected.emit(values);
-        }
-        else {
-            this.selected.emit(values[0]);
-        }
-    }
-    checkIfAllSelected() {
-        return this.filteredValues.every((item) => item.isSelected);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EyeTestAuditService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupSelectComponent, selector: "lib-group-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\" >\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-group-select', template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\" >\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: EyeTestAuditService }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], items: [{
-                type: Input
-            }], searchField: [{
-                type: Input
-            }], multi: [{
-                type: Input
-            }], idField: [{
-                type: Input
-            }], selectedValues: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], selected: [{
-                type: Output
-            }] } });
-
-class EyeTestComponent {
-    pageInfo;
-    fb;
-    traxService;
-    eyeService;
-    router;
-    cd;
-    gs;
-    ts;
-    dayjs = dayjs;
-    eyeTestForm;
-    selectedDateRange = {};
-    selectedDate;
-    isCustomDate;
-    headerFilters;
-    ClusterList = [];
-    stores = [];
-    clientData;
-    destroy$ = new Subject();
-    groups = [];
-    storeList = [];
-    noData = false;
-    loading = true;
-    eyeTestData;
-    type = [
-        { value: 'remote', label: 'Remote Test Compliance' }
-    ];
-    //{ value: 'physical', label: 'Eye Test Compliance' },
-    auditType = [{ label: 'All', value: 'all' },
-        { label: 'Adult', value: 'adult' },
-        { label: 'Kid', value: 'kid' },
-    ];
-    constructor(pageInfo, fb, traxService, eyeService, router, cd, gs, ts) {
-        this.pageInfo = pageInfo;
-        this.fb = fb;
-        this.traxService = traxService;
-        this.eyeService = eyeService;
-        this.router = router;
-        this.cd = cd;
-        this.gs = gs;
-        this.ts = ts;
-    }
-    ngOnInit() {
-        this.isCustomDate = (m) => {
-            const isValidDate = m > this.dayjs();
-            return isValidDate ? 'invalid-date' : false;
-        };
-        this.selectedDateRange = {
-            startDate: this.dayjs().subtract(1, 'day').format('DD-MM-YYYY'),
-            endDate: this.dayjs().subtract(1, 'day').format('DD-MM-YYYY')
-        };
-        this.createForm();
-        this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe({
-            next: (data) => {
-                if (data?.client) {
-                    this.headerFilters = data;
-                    this.clientDetails();
-                    this.getAllGroups();
-                    this.getAllStores();
-                }
-                else {
-                    let userinfo = JSON.parse(localStorage.getItem("user-info") || "");
-                    if (userinfo && userinfo?.clientId) {
-                        this.headerFilters.client = userinfo?.clientId;
-                        this.clientDetails();
-                        this.getAllGroups();
-                        this.getAllStores();
-                    }
-                }
-            },
-        });
-    }
-    getAllGroups() {
-        this.traxService.getclusters({ clientId: this.headerFilters.client, group: [], city: [] }).subscribe({
-            next: (res) => {
-                if (res && res.code == 200) {
-                    this.ClusterList = res.data.groupData;
-                }
-                else {
-                    this.ClusterList = [];
-                }
-            }
-        });
-    }
-    clientDetails() {
-        this.traxService.getclient({ clientId: this.headerFilters.client }).subscribe({
-            next: (res) => {
-                if (res && res.code == 200) {
-                    this.clientData = res.data.result;
-                }
-            }
-        });
-    }
-    getAllStores() {
-        this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
-            next: (res) => {
-                if (res && res.code == 200) {
-                    this.storeList = res.data.storesData;
-                    this.eyeTestForm.get('storeList')?.setValue(this.storeList);
-                    this.onSubmit();
-                }
-                else {
-                    this.storeList = [];
-                }
-            },
-            error: (err) => {
-                this.storeList = [];
-            },
-        });
-    }
-    typeChange(event) {
-        this.eyeTestForm.get('type')?.setValue(event);
-        this.cd.detectChanges();
-    }
-    auditTypeChange(event) {
-        this.eyeTestForm.get('auditType')?.setValue(event);
-        this.cd.detectChanges();
-    }
-    datechange(event) {
-        if (event && event.startDate && event.endDate) {
-            if (this.dayjs(event.startDate).isValid() &&
-                this.dayjs(event.endDate).isValid()) {
-                this.selectedDateRange.startDate = this.dayjs(event.startDate, "DD-MM-YYYY").format("YYYY-MM-DD");
-                this.selectedDateRange.endDate = this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD");
-                console.log(this.selectedDateRange.startDate);
-                this.eyeTestForm.get('fromDate')?.setValue(this.selectedDateRange.startDate);
-            }
-        }
-    }
-    onStartDateChange(event) {
-        if (this.dayjs(event.startDate).isValid()) {
-            this.isCustomDate = (m) => {
-                const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
-                return isValidDate ? "invalid-date" : false;
-            };
-        }
-    }
-    selectedType;
-    createForm() {
-        const isRemote = this.selectedType === 'remote'; // or however you're determining it
-        this.eyeTestForm = this.fb.group({
-            fromDate: [this.dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD")],
-            toDate: [this.dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format('YYYY-MM-DD')],
-            type: 'remote',
-            ClusterList: [this.groups],
-            storeList: [this.stores],
-            ...(isRemote ? {} : { auditType: 'adult' }) // Conditionally add auditType
-        });
-    }
-    ongroupSelect(event) {
-        this.eyeTestForm.get('ClusterList')?.setValue(event);
-        this.groups = event.map((el) => el.groupName);
-        this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
-            next: (res) => {
-                if (res && res.code == 200) {
-                    this.storeList = res.data.storesData;
-                    this.eyeTestForm.get('storeList')?.setValue(this.storeList);
-                }
-            }
-        });
-        this.cd.detectChanges();
-    }
-    onStoreSelect(event) {
-        this.eyeTestForm.get('storeList')?.setValue(event);
-        this.cd.detectChanges();
-    }
-    searchValue = '';
-    searchData() {
-        this.searchValue = this.searchValue;
-        this.onSubmit();
-    }
-    exportXLSX() {
-        let finalStores = [];
-        if (Array.isArray(this.eyeTestForm.value.storeList)) {
-            this.eyeTestForm.value.storeList.forEach((store) => {
-                finalStores.push(store.storeId);
-            });
-        }
-        if (this.eyeTestForm.value.auditType === 'all')
-            this.eyeTestForm.value.auditType = ["adult", "kid"];
-        let requestData = {
-            fromDate: this.eyeTestForm.value.fromDate,
-            toDate: this.eyeTestForm.value.fromDate,
-            type: this.eyeTestForm.value.type,
-            ...(this.eyeTestForm.value.type !== 'remote' && {
-                demographics: Array.isArray(this.eyeTestForm.value.auditType)
-                    ? this.eyeTestForm.value.auditType
-                    : [this.eyeTestForm.value.auditType]
-            }),
-            storeId: finalStores,
-            limit: 10000,
-            offset: 1,
-            searchValue: this.searchValue,
-            isExport: true,
-            sortOrder: this.sortOrder ? this.sortOrder : 1,
-            sortBy: this.sortedColumn ? this.sortedColumn : 'storeName',
-        };
-        this.eyeService.getEyeTestTableExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                // if (res && res.code === 200) {
-                this.eyeService.exportAsExcelFile(res, `${this.eyeTestForm.value.type} Eye Test Table `);
-                // } else {
-                // this.ts.getErrorToast(res?.message)
-                // }
-                this.cd.detectChanges();
-            },
-            error: (err) => {
-                this.ts.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message);
-            },
-            complete: () => { },
-        });
-    }
-    totalItems = 0;
-    offset = 1;
-    limit = 10;
-    tableObj = {};
-    onSubmit() {
-        this.loading = true;
-        this.noData = false;
-        let finalStores = [];
-        if (Array.isArray(this.eyeTestForm.value.storeList)) {
-            this.eyeTestForm.value.storeList.forEach((store) => {
-                finalStores.push(store.storeId);
-            });
-        }
-        if (this.eyeTestForm.value.auditType === 'all')
-            this.eyeTestForm.value.auditType = ["adult", "kid"];
-        let requestData = {
-            fromDate: this.eyeTestForm.value.fromDate,
-            toDate: this.eyeTestForm.value.fromDate,
-            type: this.eyeTestForm.value.type,
-            ...(this.eyeTestForm.value.type !== 'remote' && {
-                demographics: Array.isArray(this.eyeTestForm.value.auditType)
-                    ? this.eyeTestForm.value.auditType
-                    : [this.eyeTestForm.value.auditType]
-            }),
-            storeId: finalStores,
-            limit: 10,
-            offset: 1,
-            searchValue: this.searchValue,
-            isExport: false,
-            sortOrder: this.sortOrder ? this.sortOrder : 1,
-            sortBy: this.sortedColumn ? this.sortedColumn : 'storeName',
-        };
-        this.tableObj = requestData;
-        this.eyeService.getEyeTestlist(requestData).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res.code === 200) {
-                    this.eyeTestData = res?.data.result;
-                    this.totalItems = res.data?.count;
-                    this.setPaginationSizes();
-                    this.loading = false;
-                    this.noData = false;
-                }
-                else {
-                    this.eyeTestData = [];
-                    this.loading = false;
-                    this.noData = true;
-                    this.totalItems = 0;
-                }
-                this.cd.detectChanges();
-            },
-            error: (err) => {
-                this.cd.detectChanges();
-            },
-            complete: () => { },
-        });
-    }
-    paginationSizes = [];
-    pageSize = 10;
-    setPaginationSizes() {
-        if (this.totalItems > 10) {
-            this.paginationSizes = [10, 20, 30];
-        }
-        else {
-            this.paginationSizes = [this.totalItems]; // Just one option if less than 10
-        }
-        this.pageSize = this.paginationSizes[0];
-    }
-    onPageChange(pageOffset) {
-        this.limit = 10;
-        this.pageSize = 10;
-        this.loading = true;
-        this.noData = false;
-        this.offset = Number(pageOffset);
-        let finalStores = [];
-        if (Array.isArray(this.eyeTestForm.value.storeList)) {
-            this.eyeTestForm.value.storeList.forEach((store) => {
-                finalStores.push(store.storeId);
-            });
-        }
-        if (this.eyeTestForm.value.auditType === 'all')
-            this.eyeTestForm.value.auditType = ["adult", "kid"];
-        let requestData = {
-            fromDate: this.eyeTestForm.value.fromDate,
-            toDate: this.eyeTestForm.value.fromDate,
-            type: this.eyeTestForm.value.type,
-            ...(this.eyeTestForm.value.type !== 'remote' && {
-                demographics: Array.isArray(this.eyeTestForm.value.auditType)
-                    ? this.eyeTestForm.value.auditType
-                    : [this.eyeTestForm.value.auditType]
-            }),
-            storeId: finalStores,
-            limit: this.limit,
-            offset: this.offset,
-            searchValue: this.searchValue,
-            isExport: false,
-            sortOrder: this.sortOrder,
-            sortBy: this.sortedColumn,
-        };
-        this.eyeService.getEyeTestlist(requestData).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res.code === 200) {
-                    // if(res?.data.eyeTestData.length ===0){
-                    //   this.eyeTestData =[]
-                    //   this.loading = false;
-                    //   this.noData = true;
-                    //   this.totalItems = 0; 
-                    // } else {
-                    this.eyeTestData = res?.data.result;
-                    this.totalItems = res.data?.count;
-                    this.loading = false;
-                    this.noData = false;
-                    // }
-                }
-                else {
-                    this.eyeTestData = [];
-                    this.loading = false;
-                    this.noData = true;
-                    this.totalItems = 0;
-                }
-                this.cd.detectChanges();
-            },
-            error: (err) => {
-                this.eyeTestData = [];
-                this.totalItems = 0;
-                this.loading = false;
-                this.noData = true;
-            }
-        });
-    }
-    onPageSizeChange(pageSize) {
-        this.offset = 1;
-        this.loading = true;
-        this.noData = false;
-        this.pageSize = Number(pageSize);
-        this.limit = Number(pageSize);
-        let finalStores = [];
-        if (Array.isArray(this.eyeTestForm.value.storeList)) {
-            this.eyeTestForm.value.storeList.forEach((store) => {
-                finalStores.push(store.storeId);
-            });
-        }
-        if (this.eyeTestForm.value.auditType === 'all')
-            this.eyeTestForm.value.auditType = ["adult", "kid"];
-        let requestData = {
-            fromDate: this.eyeTestForm.value.fromDate,
-            toDate: this.eyeTestForm.value.fromDate,
-            type: this.eyeTestForm.value.type,
-            ...(this.eyeTestForm.value.type !== 'remote' && {
-                demographics: Array.isArray(this.eyeTestForm.value.auditType)
-                    ? this.eyeTestForm.value.auditType
-                    : [this.eyeTestForm.value.auditType]
-            }),
-            storeId: finalStores,
-            limit: this.limit,
-            offset: this.offset,
-            searchValue: this.searchValue,
-            isExport: false,
-            sortOrder: this.sortOrder,
-            sortBy: this.sortedColumn,
-        };
-        this.eyeService.getEyeTestlist(requestData).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res.code === 200) {
-                    // if(res?.data.eyeTestData.length ===0){
-                    //   this.eyeTestData =[]
-                    //   this.loading = false;
-                    //   this.noData = true;
-                    //   this.totalItems = 0; 
-                    // } else {
-                    this.eyeTestData = res?.data.result;
-                    this.totalItems = res.data?.count;
-                    this.loading = false;
-                    this.noData = false;
-                    // }
-                }
-                else {
-                    this.eyeTestData = [];
-                    this.loading = false;
-                    this.noData = true;
-                    this.totalItems = 0;
-                }
-                this.cd.detectChanges();
-            },
-            error: (err) => {
-                this.eyeTestData = [];
-                this.totalItems = 0;
-                this.loading = false;
-                this.noData = true;
-            }
-        });
-    }
-    sortedColumn;
-    sortOrder;
-    onSort(column) {
-        if (this.sortedColumn === column) {
-            this.sortOrder = this.sortOrder === 1 ? -1 : 1;
-        }
-        else {
-            this.sortedColumn = column ? column : 'storeName';
-            this.sortOrder = 1;
-        }
-        this.onSubmit();
-    }
-    eyeTestView(data) {
-        this.router.navigate(['/manage/trax/audit/start'], { queryParams: { type: this.eyeTestForm.value.type, storeId: data?._source?.storeId, _id: data._id } });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestComponent, deps: [{ token: i2.PageInfoService }, { token: i1$1.FormBuilder }, { token: TraxService }, { token: EyeTestAuditService }, { token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EyeTestComponent, selector: "lib-eye-test", ngImport: i0, template: "<div class=\"card mb-2\">\r\n    <form [formGroup]=\"eyeTestForm\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-12 mt-7 mb-3\">\r\n                <div class=\"row px-3\">\r\n                    <div class=\"col-md-2 mb-0\">\r\n                        <div class=\"position-relative\">\r\n                            <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\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=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14 z-2\" \r\n                                type=\"text\" matInput ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"   [ngModelOptions]=\"{standalone: true}\"\r\n                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"  (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div [ngClass]=\"eyeTestForm.get('type')?.value ==='remote' ? 'col-md-3 mb-4' : 'col-md-2 mb-4'\" class=\"col-md-2 mb-4\">\r\n                        <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"col-md-1 mb-4\">\r\n                        <lib-reactive-select formControlName=\"auditType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"auditType\" (itemChange)=\"auditTypeChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" >\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('ClusterList')?.value?.length)\">\r\n                              Select cluster\r\n                            </div>\r\n                            <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n                                               [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                               [selectedValues]=\"eyeTestForm.get('ClusterList')?.value\">\r\n                            </lib-group-select>\r\n                          </div>\r\n                          \r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" >\r\n                        <div class=\"select-wrapper\">\r\n                        <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('storeList')?.value?.length)\">\r\n                            Select Stores\r\n                          </div>\r\n                        <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n                            [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n                            [selectedValues]=\"eyeTestForm.get('storeList')?.value\"></lib-stores-select>\r\n                    </div>\r\n                   </div>\r\n                   <div class=\"col-md-1\">\r\n                    <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                   </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>\r\n\r\n<div class=\"card my-3\">\r\n    <div class=\"card-header border-0 py-1\">\r\n        <h3 class=\"card-title dashed w-100 align-items-start flex-column\">\r\n            <span class=\"title-text\"><span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEE4E2\"/>\r\n                <g clip-path=\"url(#clip0_235_24234)\">\r\n                <path d=\"M16 13.3335V16.0002M16 18.6668H16.0067M22.6667 16.0002C22.6667 19.6821 19.6819 22.6668 16 22.6668C12.3181 22.6668 9.33337 19.6821 9.33337 16.0002C9.33337 12.3183 12.3181 9.3335 16 9.3335C19.6819 9.3335 22.6667 12.3183 22.6667 16.0002Z\" stroke=\"#D92D20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </g>\r\n                <defs>\r\n                <clipPath id=\"clip0_235_24234\">\r\n                <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\r\n                </clipPath>\r\n                </defs>\r\n                </svg></span><span class=\"dashed-desc\">Eye test video preview is available for 7 days. Audit data remains accessible, but videos will not be retained beyond this period.</span></span>\r\n        </h3>\r\n        </div> \r\n</div>\r\n\r\n<div class=\"card mt-3\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span class=\"title-text mb-2\">Eye Test<span *ngIf=\"this.totalItems\" class=\"badge badge-light-primary\">{{this.totalItems}} Total</span>\r\n        </span>\r\n            <span class=\"text-sub mb-2\">Based on {{this.selectedDateRange.startDate | date:'dd MMM, yyyy'}}</span>\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                            fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></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 (change)=\"searchData()\" [(ngModel)]=\"searchValue\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n               \r\n                  \r\n                    <button disabled *ngIf=\"!noData && !loading\" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                            fill=\"none\">\r\n                            <path\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\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"loading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"noData\" class=\"row\">\r\n        <div class=\"col-lg-12 mb-3\">\r\n            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                <div class=\"nodata-title\">No data found</div>\r\n                <div class=\"nodata-sub\">There is no result for this eye test table</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!noData && !loading\" class=\"card-body\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"w-100 table bottom-border text-nowrap\">\r\n                <thead>\r\n                    <tr>\r\n                       <th class=\"text-start\">Date</th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name <svg \r\n                        [ngClass]=\"sortedColumn === 'storeName' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span></th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID <svg \r\n                        [ngClass]=\"sortedColumn === 'storeId' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span></th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value ==='remote'\" class=\"text-start\">Engagement ID</th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\"  class=\"text-start\">Optum ID</th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\"  class=\"text-start\">Queue ID</th>\r\n                       <th class=\"text-start\">Compliance Score</th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('coveredStepsAI')\">Steps Covered By AI <svg \r\n                        [ngClass]=\"sortedColumn === 'coveredStepsAI' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'coveredStepsAI' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span> </th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\"><span class=\"cursor-pointer\" (click)=\"onSort('visitorsType')\">Visitor Type <svg \r\n                        [ngClass]=\"sortedColumn === 'visitorsType' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'visitorsType' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span> </th>\r\n                       <th class=\"text-start\">Test Duration</th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('auditStatus')\">Audit Status <svg \r\n                        [ngClass]=\"sortedColumn === 'auditStatus' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'auditStatus' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span></th>\r\n                       <th class=\"text-start\">Audited By</th>\r\n                       <th class=\"text-start\">Action</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let obj of eyeTestData; let i=index;\">\r\n                        <td>{{obj?._source?.fileDate}}</td>\r\n                        <td>{{obj?._source?.storeName}}</td>\r\n                        <td>{{obj?._source?.storeId}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value ==='remote'\" class=\"engage-text\">{{obj?._source?.engagementId}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\">{{obj?._source?.optumId ? obj?._source?.optumId :''}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"engage-text\">{{obj?._source?.queueId ? obj?._source?.queueId:''}}</td>\r\n                        <td>{{obj?._source?.complianceScore ? obj?._source?.complianceScore :'--'}}<span *ngIf=\"obj?._source?.complianceScore\">%</span></td>\r\n                        <td>{{obj?._source?.coveredStepsAI ? obj?._source?.coveredStepsAI:'--'}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\">{{obj?._source?.visitorsType ? obj?._source?.visitorsType:'--'}}</td>\r\n                        <td>{{obj?._source?.min ? obj?._source?.min :'0'}} mins {{obj?._source?.sec ? obj?._source?.sec:'0'}} secs</td>\r\n                        <td><span class=\"badge badge-light-primary\" *ngIf=\"obj?._source?.auditStatus ==='Yet-to-Audit'\">{{obj?._source?.auditStatus}}</span>\r\n                        <span class=\"badge badge-light-warning\" *ngIf=\"obj?._source?.auditStatus ==='Re-Audited'\">{{obj?._source?.auditStatus}}</span>\r\n                        <span class=\"badge badge-light-success\" *ngIf=\"obj?._source?.auditStatus ==='Audited'\">{{obj?._source?.auditStatus}}</span>\r\n                        <span class=\"badge badge-light-info\" *ngIf=\"obj?._source?.auditStatus ==='In-Progress'\">{{obj?._source?.auditStatus}}</span></td>\r\n                        <td>{{obj?._source?.auditedBy?obj?._source?.auditedBy:\"-\"}}</td>\r\n                        <td class=\"cursor-pointer\" (click)=\"eyeTestView(obj)\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\r\n                            <path d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            <path d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></td>\r\n                    </tr>\r\n                </tbody>\r\n                </table>\r\n\r\n</div>\r\n</div>\r\n<div class=\"card-footer\" *ngIf=\"!noData && !loading\">\r\n    <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n    [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n    (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n</div>\r\n</div>", styles: [":host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}table th,table td{height:44px!important;padding:12px 24px!important;gap:12px;align-self:stretch}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:18px}table td{color:var(--Gray-900, #667085);font-size:14px!important;font-weight:500!important;line-height:20px}.bottom-border td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}.rotate{rotate:180deg;transition:1s}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.dashed{border-radius:4px;border:1px dashed var(--Error-500, #F04438)!important;background:var(--Error-25, #FFFBFA)}.dashed-desc{color:var(--Error-600, #D92D20)!important;font-size:16px;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-eye-test', template: "<div class=\"card mb-2\">\r\n    <form [formGroup]=\"eyeTestForm\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-12 mt-7 mb-3\">\r\n                <div class=\"row px-3\">\r\n                    <div class=\"col-md-2 mb-0\">\r\n                        <div class=\"position-relative\">\r\n                            <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\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=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14 z-2\" \r\n                                type=\"text\" matInput ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"   [ngModelOptions]=\"{standalone: true}\"\r\n                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"  (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div [ngClass]=\"eyeTestForm.get('type')?.value ==='remote' ? 'col-md-3 mb-4' : 'col-md-2 mb-4'\" class=\"col-md-2 mb-4\">\r\n                        <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"type\" (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"col-md-1 mb-4\">\r\n                        <lib-reactive-select formControlName=\"auditType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"auditType\" (itemChange)=\"auditTypeChange($event)\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" >\r\n                        <div class=\"select-wrapper\">\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('ClusterList')?.value?.length)\">\r\n                              Select cluster\r\n                            </div>\r\n                            <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n                                               [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                               [selectedValues]=\"eyeTestForm.get('ClusterList')?.value\">\r\n                            </lib-group-select>\r\n                          </div>\r\n                          \r\n                    </div>\r\n                    <div class=\"col-md-3 mb-4\" >\r\n                        <div class=\"select-wrapper\">\r\n                        <div class=\"placeholder-overlay\" *ngIf=\"!(eyeTestForm.get('storeList')?.value?.length)\">\r\n                            Select Stores\r\n                          </div>\r\n                        <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n                            [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n                            [selectedValues]=\"eyeTestForm.get('storeList')?.value\"></lib-stores-select>\r\n                    </div>\r\n                   </div>\r\n                   <div class=\"col-md-1\">\r\n                    <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                   </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>\r\n\r\n<div class=\"card my-3\">\r\n    <div class=\"card-header border-0 py-1\">\r\n        <h3 class=\"card-title dashed w-100 align-items-start flex-column\">\r\n            <span class=\"title-text\"><span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#FEE4E2\"/>\r\n                <g clip-path=\"url(#clip0_235_24234)\">\r\n                <path d=\"M16 13.3335V16.0002M16 18.6668H16.0067M22.6667 16.0002C22.6667 19.6821 19.6819 22.6668 16 22.6668C12.3181 22.6668 9.33337 19.6821 9.33337 16.0002C9.33337 12.3183 12.3181 9.3335 16 9.3335C19.6819 9.3335 22.6667 12.3183 22.6667 16.0002Z\" stroke=\"#D92D20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </g>\r\n                <defs>\r\n                <clipPath id=\"clip0_235_24234\">\r\n                <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\r\n                </clipPath>\r\n                </defs>\r\n                </svg></span><span class=\"dashed-desc\">Eye test video preview is available for 7 days. Audit data remains accessible, but videos will not be retained beyond this period.</span></span>\r\n        </h3>\r\n        </div> \r\n</div>\r\n\r\n<div class=\"card mt-3\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span class=\"title-text mb-2\">Eye Test<span *ngIf=\"this.totalItems\" class=\"badge badge-light-primary\">{{this.totalItems}} Total</span>\r\n        </span>\r\n            <span class=\"text-sub mb-2\">Based on {{this.selectedDateRange.startDate | date:'dd MMM, yyyy'}}</span>\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                            fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></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 (change)=\"searchData()\" [(ngModel)]=\"searchValue\" type=\"text\" class=\"form-control ps-14 me-2\" autocomplete=\"off\" placeholder=\"Search\" />\r\n\r\n               \r\n                  \r\n                    <button disabled *ngIf=\"!noData && !loading\" type=\"button\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                            fill=\"none\">\r\n                            <path\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\" />\r\n                        </svg><span class=\"ms-2\">Export</span> </button>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"loading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"noData\" class=\"row\">\r\n        <div class=\"col-lg-12 mb-3\">\r\n            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                <div class=\"nodata-title\">No data found</div>\r\n                <div class=\"nodata-sub\">There is no result for this eye test table</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!noData && !loading\" class=\"card-body\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"w-100 table bottom-border text-nowrap\">\r\n                <thead>\r\n                    <tr>\r\n                       <th class=\"text-start\">Date</th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name <svg \r\n                        [ngClass]=\"sortedColumn === 'storeName' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span></th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID <svg \r\n                        [ngClass]=\"sortedColumn === 'storeId' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span></th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value ==='remote'\" class=\"text-start\">Engagement ID</th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\"  class=\"text-start\">Optum ID</th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\"  class=\"text-start\">Queue ID</th>\r\n                       <th class=\"text-start\">Compliance Score</th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('coveredStepsAI')\">Steps Covered By AI <svg \r\n                        [ngClass]=\"sortedColumn === 'coveredStepsAI' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'coveredStepsAI' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span> </th>\r\n                       <th *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\"><span class=\"cursor-pointer\" (click)=\"onSort('visitorsType')\">Visitor Type <svg \r\n                        [ngClass]=\"sortedColumn === 'visitorsType' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'visitorsType' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span> </th>\r\n                       <th class=\"text-start\">Test Duration</th>\r\n                       <th><span class=\"cursor-pointer\" (click)=\"onSort('auditStatus')\">Audit Status <svg \r\n                        [ngClass]=\"sortedColumn === 'auditStatus' && sortOrder === 1 ? 'rotate' : ''\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                            fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'auditStatus' ? '#00A3FF' : '#667085'\"\r\n                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg></span></th>\r\n                       <th class=\"text-start\">Audited By</th>\r\n                       <th class=\"text-start\">Action</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let obj of eyeTestData; let i=index;\">\r\n                        <td>{{obj?._source?.fileDate}}</td>\r\n                        <td>{{obj?._source?.storeName}}</td>\r\n                        <td>{{obj?._source?.storeId}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value ==='remote'\" class=\"engage-text\">{{obj?._source?.engagementId}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\">{{obj?._source?.optumId ? obj?._source?.optumId :''}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\" class=\"engage-text\">{{obj?._source?.queueId ? obj?._source?.queueId:''}}</td>\r\n                        <td>{{obj?._source?.complianceScore ? obj?._source?.complianceScore :'--'}}<span *ngIf=\"obj?._source?.complianceScore\">%</span></td>\r\n                        <td>{{obj?._source?.coveredStepsAI ? obj?._source?.coveredStepsAI:'--'}}</td>\r\n                        <td *ngIf=\"eyeTestForm.get('type')?.value !=='remote'\">{{obj?._source?.visitorsType ? obj?._source?.visitorsType:'--'}}</td>\r\n                        <td>{{obj?._source?.min ? obj?._source?.min :'0'}} mins {{obj?._source?.sec ? obj?._source?.sec:'0'}} secs</td>\r\n                        <td><span class=\"badge badge-light-primary\" *ngIf=\"obj?._source?.auditStatus ==='Yet-to-Audit'\">{{obj?._source?.auditStatus}}</span>\r\n                        <span class=\"badge badge-light-warning\" *ngIf=\"obj?._source?.auditStatus ==='Re-Audited'\">{{obj?._source?.auditStatus}}</span>\r\n                        <span class=\"badge badge-light-success\" *ngIf=\"obj?._source?.auditStatus ==='Audited'\">{{obj?._source?.auditStatus}}</span>\r\n                        <span class=\"badge badge-light-info\" *ngIf=\"obj?._source?.auditStatus ==='In-Progress'\">{{obj?._source?.auditStatus}}</span></td>\r\n                        <td>{{obj?._source?.auditedBy?obj?._source?.auditedBy:\"-\"}}</td>\r\n                        <td class=\"cursor-pointer\" (click)=\"eyeTestView(obj)\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\r\n                            <path d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            <path d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></td>\r\n                    </tr>\r\n                </tbody>\r\n                </table>\r\n\r\n</div>\r\n</div>\r\n<div class=\"card-footer\" *ngIf=\"!noData && !loading\">\r\n    <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"offset\" [totalItems]=\"totalItems\"\r\n    [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n    (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n</div>\r\n</div>", styles: [":host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}table th,table td{height:44px!important;padding:12px 24px!important;gap:12px;align-self:stretch}table th{border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--Gray-50, #F9FAFB)!important;color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:500!important;line-height:18px}table td{color:var(--Gray-900, #667085);font-size:14px!important;font-weight:500!important;line-height:20px}.bottom-border td{border-bottom:1px solid var(--Gray-200, #EAECF0)!important}.rotate{rotate:180deg;transition:1s}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.dashed{border-radius:4px;border:1px dashed var(--Error-500, #F04438)!important;background:var(--Error-25, #FFFBFA)}.dashed-desc{color:var(--Error-600, #D92D20)!important;font-size:16px;font-weight:400;line-height:24px}\n"] }]
-        }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i1$1.FormBuilder }, { type: TraxService }, { type: EyeTestAuditService }, { type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }] });
-
-class EyeTestAuditComponent {
-    pageInfo;
-    constructor(pageInfo) {
-        this.pageInfo = pageInfo;
-    }
-    ngOnInit() {
-        this.setPageData();
-    }
-    setPageData() {
-        this.pageInfo.setTitle('Eye Test');
-        this.pageInfo.setBreadcrumbs([
-            { title: 'Tango Trax', path: '/manage/trax/dashboard', isActive: false, isSeparator: false },
-            { title: 'Tango Trax', path: '/manage/trax/dashboard', isActive: false, isSeparator: true },
-        ]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditComponent, deps: [{ token: i2.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EyeTestAuditComponent, selector: "lib-eye-test-audit", ngImport: i0, template: "<lib-eye-test></lib-eye-test>\r\n", styles: [""], dependencies: [{ kind: "component", type: EyeTestComponent, selector: "lib-eye-test" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-eye-test-audit', template: "<lib-eye-test></lib-eye-test>\r\n" }]
-        }], ctorParameters: () => [{ type: i2.PageInfoService }] });
-
-class StartAuditComponent {
-    cd;
-    toastService;
-    route;
-    $api;
-    modalService;
-    stepWiseProcess = [];
-    dropdownList = [{ key: 'Sentence Transcription okay, but not matching with Predicted Step', item: 'Sentence Transcription okay, but not matching with Predicted Step' }, { key: 'Sentence Transcription not accurate, but matching with Predicted Step', item: 'Sentence Transcription not accurate, but matching with Predicted Step' }, { key: 'Step not accurate, not matching with Predicted Step', item: 'Step not accurate, not matching with Predicted Step' }, { key: 'others', item: 'Others' }];
-    loading = true;
-    noData = false;
-    tableLoading = new BehaviorSubject('initial');
-    historytableLoading = new BehaviorSubject('initial');
-    selectedMinutes = '00';
-    selectedSeconds = '00';
-    minutesList = [];
-    secondsList = [];
-    auditDetails = [];
-    currentAuditType;
-    takeAudit = false;
-    storeId;
-    tooltipContent;
-    viewHistory;
-    destroy$ = new Subject();
-    historyData = [];
-    AuditId;
-    viewHistoryData;
-    spokenLanguage = 'English';
-    constructor(cd, toastService, route, $api, modalService) {
-        this.cd = cd;
-        this.toastService = toastService;
-        this.route = route;
-        this.$api = $api;
-        this.modalService = modalService;
-    }
-    viewHistoryModel(item) {
-        let payload = {
-            id: item._id
-        };
-        this.$api.viewAuditHistory(payload).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res?.code == 200) {
-                    this.viewHistoryData = res.data.result;
-                    const modalRef = this.modalService.open(this.viewHistory, {
-                        size: 'xl',
-                        centered: true,
-                        scrollable: true,
-                    });
-                }
-            }
-        });
-    }
-    ngOnInit() {
-        this.takeAudit = false;
-        this.stepWiseProcess = [];
-        this.route.queryParams.subscribe(params => {
-            this.storeId = params['storeId'];
-            this.currentAuditType = params['type'];
-            this.AuditId = params['_id'];
-        });
-        this.getAuditdetails();
-        this.generateTimeOptions();
-    }
-    getAuditHistory() {
-        this.historytableLoading.next('loading');
-        console.log(this.auditDetails);
-        let payload = {
-            id: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
-            type: this.currentAuditType
-        };
-        this.$api.getAuditHistory(payload).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res?.code == 200) {
-                    this.historyData = res.data.result;
-                    this.historytableLoading.next('loaded');
-                }
-                else {
-                    this.historyData = [];
-                    this.historytableLoading.next('loaded');
-                }
-            },
-            error: (err) => {
-                this.historyData = [];
-                this.historytableLoading.next('loaded');
-            }
-        });
-    }
-    getAuditdetails() {
-        this.tableLoading.next('loading');
-        let payload = {
-            id: this.AuditId,
-            type: this.currentAuditType
-        };
-        this.$api.getAuditdetails(payload).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res?.code == 200) {
-                    this.auditDetails = res?.data?.result;
-                    if (this.auditDetails.auditStatus === 'In-Progress') {
-                        this.takeAudit = true;
-                    }
-                    else {
-                        this.takeAudit = false;
-                    }
-                    this.stepWiseProcess = this.auditDetails?.steps;
-                    console.log(this.stepWiseProcess);
-                    this.getAuditHistory();
-                }
-            }
-        });
-        this.tableLoading.next('loaded');
-    }
-    generateTimeOptions() {
-        this.minutesList = Array.from({ length: 60 }, (_, i) => this.formatNumber(i));
-        this.secondsList = Array.from({ length: 60 }, (_, i) => this.formatNumber(i));
-    }
-    formatNumber(num) {
-        return num < 10 ? '0' + num : num.toString();
-    }
-    dropdownOpen = {};
-    toggleDropdown(i, time) {
-        const currentState = this.dropdownOpen[i]?.[time] ?? false;
-        Object.keys(this.dropdownOpen).forEach((key) => {
-            this.dropdownOpen[Number(key)] = { startTime: false, endTime: false, reason: false };
-        });
-        if (!this.dropdownOpen[i]) {
-            this.dropdownOpen[i] = { startTime: false, endTime: false, reason: false };
-        }
-        this.dropdownOpen[i][time] = !currentState;
-    }
-    getSecondsFromTime(time) {
-        if (!time)
-            return 0;
-        const [min, sec] = time.split(':').map(Number);
-        return (min * 60) + sec;
-    }
-    selectMinute(index, min, time) {
-        this.selectedMinutes = min;
-        const newTime = `${this.selectedMinutes}:${this.selectedSeconds}`;
-        if (time === 'endTime') {
-            const start = this.getSecondsFromTime(this.stepWiseProcess[index]?.startTime);
-            const end = this.getSecondsFromTime(newTime);
-            if (end <= start) {
-                // Optional: show warning or prevent setting
-                return;
-            }
-        }
-        this.stepWiseProcess[index][time] = newTime;
-        this.cd.detectChanges();
-    }
-    selectSecond(index, sec, time) {
-        this.selectedSeconds = sec;
-        const newTime = `${this.selectedMinutes}:${this.selectedSeconds}`;
-        if (time === 'endTime') {
-            const start = this.getSecondsFromTime(this.stepWiseProcess[index]?.startTime);
-            const end = this.getSecondsFromTime(newTime);
-            if (end <= start) {
-                return;
-            }
-        }
-        this.stepWiseProcess[index][time] = newTime;
-        this.cd.detectChanges();
-    }
-    selectReason(index, key, time) {
-        this.stepWiseProcess[index][time] = key;
-        if (key === 'others') {
-            this.stepWiseProcess[index].otherReason = '';
-        }
-        else {
-            this.stepWiseProcess[index].otherReason = null;
-        }
-        this.cd.detectChanges();
-    }
-    selectHumanVerified(index, value) {
-        this.stepWiseProcess[index].auditedStatus = value;
-        console.log(this.stepWiseProcess);
-    }
-    findcount() {
-        let count = 0;
-        this.stepWiseProcess.forEach((data) => {
-            if (data.auditedStatus !== data.AIStatus) {
-                count++;
-            }
-        });
-        return count;
-    }
-    getValidaForm() {
-        let errorCount = 0;
-        this.stepWiseProcess.forEach((data) => {
-            if (data.auditedStatus !== data.AIStatus) {
-                if (!data.reason) {
-                    errorCount++;
-                }
-            }
-        });
-        if (errorCount > 0) {
-            this.toastService.getWarningToast("Comments are mandatory for inverse human audited responses");
-        }
-        return errorCount;
-    }
-    onsubmit() {
-        console.log(this.auditDetails);
-        if (this.getValidaForm() === 0) {
-            let payload = {
-                id: this.AuditId,
-                type: this.currentAuditType,
-                fileId: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
-                auditedSteps: this.stepWiseProcess.length,
-                auditStatus: "Audited",
-                overRides: this.findcount(),
-                spokenLanguage: this.spokenLanguage,
-                steps: this.stepWiseProcess
-            };
-            this.$api.submitAudit(payload).pipe(takeUntil(this.destroy$)).subscribe({
-                next: (res) => {
-                    if (res && res?.code == 200) {
-                        this.getAuditdetails();
-                    }
-                }
-            });
-        }
-    }
-    startAudit(value) {
-        this.takeAudit = true;
-        let payload = {
-            id: this.AuditId
-        };
-        this.$api.getAuditFile(payload).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res?.code == 200) {
-                    console.log(res.data);
-                    this.getAuditdetails();
-                }
-            },
-            error: (err) => {
-                console.log(err);
-            }
-        });
-    }
-    cancel() {
-        let payload = {
-            id: this.AuditId,
-            type: this.currentAuditType,
-            fileId: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
-        };
-        this.$api.cancelAuditFile(payload).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                if (res && res?.code == 200) {
-                    console.log(res.data);
-                    this.getAuditdetails();
-                }
-            },
-            error: (err) => {
-                console.log(err);
-            }
-        });
-        this.takeAudit = false;
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StartAuditComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i1$2.ActivatedRoute }, { token: EyeTestAuditService }, { token: i2$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StartAuditComponent, selector: "lib-start-audit", viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "viewHistory", first: true, predicate: ["viewHistory"], descendants: true }], ngImport: i0, template: "<div class=\"card p-5\">\r\n    <div class=\"d-flex align-items-center\">\r\n        <div routerLink=\"/manage/trax/audit\" class=\"btn btn-am btn-outline p-3\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path d=\"M15.8332 9.99984H4.1665M4.1665 9.99984L9.99984 15.8332M4.1665 9.99984L9.99984 4.1665\"\r\n                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg></span>\r\n        </div>\r\n        <span class=\"ms-3 badge badge-light-default\">{{auditDetails?.storeName}}</span>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <path\r\n                        d=\"M5.25021 6.50028C5.91329 6.50028 6.54921 6.23689 7.01807 5.76807C7.48694 5.29924 7.75035 4.66337 7.75035 4.00035C7.75035 3.33732 7.48694 2.70146 7.01807 2.23263C6.54921 1.7638 5.91329 1.50042 5.25021 1.50042C4.58713 1.50042 3.95121 1.7638 3.48234 2.23263C3.01348 2.70146 2.75007 3.33732 2.75007 4.00035C2.75007 4.66337 3.01348 5.29924 3.48234 5.76807C3.95121 6.23689 4.58713 6.50028 5.25021 6.50028ZM5.25021 5.25031C4.91867 5.25031 4.60071 5.11862 4.36628 4.88421C4.13184 4.64979 4.00014 4.33186 4.00014 4.00035C4.00014 3.66884 4.13184 3.3509 4.36628 3.11649C4.60071 2.88207 4.91867 2.75038 5.25021 2.75038C5.58175 2.75038 5.89971 2.88207 6.13414 3.11649C6.36857 3.3509 6.50028 3.66884 6.50028 4.00035C6.50028 4.33186 6.36857 4.64979 6.13414 4.88421C5.89971 5.11862 5.58175 5.25031 5.25021 5.25031ZM1.5 8.79188C1.5 7.9869 2.15337 7.33359 2.95841 7.33359H7.542C8.34705 7.33359 9.00042 7.9869 9.00042 8.79188V12.7501C9.00042 13.7446 8.60531 14.6984 7.90201 15.4017C7.1987 16.1049 6.24483 16.5 5.25021 16.5C4.25559 16.5 3.30171 16.1049 2.59841 15.4017C1.89511 14.6984 1.5 13.7446 1.5 12.7501V8.79188ZM2.95841 8.58355C2.90316 8.58355 2.85016 8.6055 2.81109 8.64457C2.77202 8.68364 2.75007 8.73663 2.75007 8.79188V12.7501C2.75007 13.4131 3.01348 14.049 3.48234 14.5178C3.95121 14.9867 4.58713 15.25 5.25021 15.25C5.91329 15.25 6.54921 14.9867 7.01807 14.5178C7.48694 14.049 7.75035 13.4131 7.75035 12.7501V8.79188C7.75035 8.73663 7.7284 8.68364 7.68932 8.64457C7.65025 8.6055 7.59726 8.58355 7.542 8.58355H2.95841ZM7.77285 6.17862C8.15328 6.39267 8.58313 6.5034 9.01963 6.49978C9.45614 6.49616 9.8841 6.37832 10.2609 6.15799C10.6378 5.93766 10.9503 5.62252 11.1675 5.24391C11.3848 4.8653 11.499 4.43642 11.499 3.99993C11.499 3.56344 11.3848 3.13456 11.1675 2.75595C10.9503 2.37734 10.6378 2.0622 10.2609 1.84187C9.8841 1.62154 9.45614 1.50371 9.01963 1.50009C8.58313 1.49647 8.15328 1.60719 7.77285 1.82124C8.04536 2.13623 8.25954 2.50289 8.39955 2.90454C8.58991 2.80026 8.80415 2.74733 9.02118 2.75097C9.23821 2.75462 9.45055 2.81471 9.63731 2.92533C9.82406 3.03594 9.97879 3.19328 10.0863 3.38185C10.1937 3.57042 10.2503 3.78372 10.2503 4.00076C10.2503 4.21781 10.1937 4.43111 10.0863 4.61968C9.97879 4.80825 9.82406 4.96558 9.63731 5.0762C9.45055 5.18682 9.23821 5.24691 9.02118 5.25055C8.80415 5.2542 8.58991 5.20127 8.39955 5.09698C8.26074 5.49382 8.0481 5.86082 7.77285 6.17862ZM8.05036 16.3783C8.35483 16.4583 8.67151 16.4989 9.00042 16.5C9.99503 16.5 10.9489 16.1049 11.6522 15.4017C12.3555 14.6984 12.7506 13.7446 12.7506 12.7501V8.79188C12.7506 8.40512 12.597 8.03419 12.3235 7.76071C12.05 7.48723 11.679 7.33359 11.2922 7.33359H9.30877C9.59462 7.67941 9.78046 8.11107 9.8238 8.58355H11.2905C11.3458 8.58355 11.3988 8.6055 11.4379 8.64457C11.4769 8.68364 11.4989 8.73663 11.4989 8.79188V12.7501C11.4989 13.3968 11.2483 14.0184 10.7996 14.4843C10.351 14.9501 9.73925 15.224 9.09292 15.2484C8.81041 15.6817 8.45872 16.0633 8.05036 16.3783ZM11.5222 6.17862C11.9027 6.39267 12.3325 6.5034 12.769 6.49978C13.2055 6.49616 13.6335 6.37832 14.0103 6.15799C14.3871 5.93766 14.6997 5.62252 14.9169 5.24391C15.1341 4.8653 15.2484 4.43642 15.2484 3.99993C15.2484 3.56344 15.1341 3.13456 14.9169 2.75595C14.6997 2.37734 14.3871 2.0622 14.0103 1.84187C13.6335 1.62154 13.2055 1.50371 12.769 1.50009C12.3325 1.49647 11.9027 1.60719 11.5222 1.82124C11.7947 2.13623 12.0089 2.50289 12.1489 2.90454C12.3393 2.80026 12.5535 2.74733 12.7706 2.75097C12.9876 2.75462 13.1999 2.81471 13.3867 2.92533C13.5734 3.03594 13.7282 3.19328 13.8356 3.38185C13.9431 3.57042 13.9996 3.78372 13.9996 4.00076C13.9996 4.21781 13.9431 4.43111 13.8356 4.61968C13.7282 4.80825 13.5734 4.96558 13.3867 5.0762C13.1999 5.18682 12.9876 5.24691 12.7706 5.25055C12.5535 5.2542 12.3393 5.20127 12.1489 5.09698C12.0101 5.49382 11.7975 5.86082 11.5222 6.17862ZM11.7997 16.3783C12.1042 16.4583 12.4209 16.4989 12.7498 16.5C13.7444 16.5 14.6983 16.1049 15.4016 15.4017C16.1049 14.6984 16.5 13.7446 16.5 12.7501V8.79188C16.5 8.40526 16.3465 8.03447 16.0731 7.76101C15.7998 7.48755 15.4291 7.33381 15.0424 7.33359H13.059C13.3448 7.67941 13.5315 8.11107 13.574 8.58355H15.0408C15.096 8.58355 15.149 8.6055 15.1881 8.64457C15.2271 8.68364 15.2491 8.73663 15.2491 8.79188V12.7501C15.2491 13.3968 14.9985 14.0184 14.5498 14.4843C14.1012 14.9501 13.4895 15.224 12.8431 15.2484C12.5606 15.6817 12.2081 16.0633 11.7997 16.3783Z\"\r\n                        fill=\"#667085\" />\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{auditDetails?.engagementId}}</span>\r\n        </div>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <path\r\n                        d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{currentAuditType | titlecase}} Eye Test</span>\r\n        </div>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <path\r\n                        d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{auditDetails?.fileDate | date: 'dd/MM/YYYY'}}</span>\r\n        </div>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <g clip-path=\"url(#clip0_166_55019)\">\r\n                        <path\r\n                            d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                            stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_166_55019\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{auditDetails?.testStartTime}} - {{auditDetails?.testEndTime}}\r\n                ({{auditDetails?.testDuration}} Mins)</span>\r\n        </div>\r\n        <span class=\"ms-3 badge badge-light-primary\">{{auditDetails?.visitorsType | titlecase}}</span>\r\n        <div *ngIf=\"['Yet-to-Audit'].includes(auditDetails?.auditStatus)\"\r\n            class=\"text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-primary\" style=\"font-size: 14px;\">\r\n            Yet to Audit\r\n        </div>\r\n        <div *ngIf=\"auditDetails?.auditType === 'Audit'&&auditDetails?.auditStatus === 'Audited'\"\r\n            class=\"text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-success\" style=\"font-size: 14px;\">\r\n            Audited\r\n        </div>\r\n        <div *ngIf=\"auditDetails?.auditType === 'Re-Audit'&&auditDetails?.auditStatus === 'Audited'\"\r\n            class=\"text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-warning\" style=\"font-size: 14px;\">\r\n            Re-Audited\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row mt-3\">\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 text-center header-card\">\r\n                AI Verified Steps <span><svg ngbTooltip=\"Number of steps detected and validated automatically without manual review.\" placement=\"right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" \r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.coveredStepsAI?auditDetails?.coveredStepsAI:0}}/{{auditDetails?.totalSteps ? auditDetails?.totalSteps:'--'}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 text-center header-card\">\r\n                Human Verified Steps <span><svg ngbTooltip=\"Number of steps that required human validation to ensure compliance and accuracy.\" placement=\"right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.auditedSteps?auditDetails?.auditedSteps:0}}/{{auditDetails?.totalSteps ? auditDetails?.totalSteps:'--'}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 header-card\">\r\n                AI Compliance Score <span><svg ngbTooltip=\"Measures the percentage of steps AI flagged as compliant without human intervention.\" placement=\"left\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.complianceScore ?auditDetails?.complianceScore :'--'}}%</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 header-card\">\r\n                AI Trust Score <span><svg ngbTooltip=\"This score reflects how often AI predictions were accepted without manual overrides.\" placement=\"left\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                        fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.trustScore ? auditDetails?.trustScore:'--'}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row mt-3\">\r\n    <div class=\"col-sm-6\">\r\n        <div class=\"card h-500px px-5\">\r\n            <div class=\"card-header p-0 border-0\">\r\n                <span class=\"card-title m-0 fw-bolder bg-none\">Preview Eye Test</span>\r\n            </div>\r\n            <div class=\"card-body px-0 position-relative\">\r\n                <div class=\"video-position w-100\">\r\n                    <video class=\"w-100 rounded-3 h-auto\" controls\r\n                        [src]=\"auditDetails?.filePath\"></video>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-6\">\r\n        <div class=\"card h-500px px-5 overflow-scroll\">\r\n            <div class=\"card-header p-0 border-0 d-flex justify-content-between align-items-center\">\r\n                <div class=\"\">\r\n                    <span class=\"card-title m-0 fw-bolder bg-none\">Step-wise Breakdown</span>\r\n                   \r\n                    \r\n                    <div class=\"d-flex sub-title mt-2\" *ngIf=\"auditDetails?.lastAuditedDetails?.auditedBy\">\r\n                      <span *ngIf=\"auditDetails?.spokenLanguage\"> <span *ngIf=\"!takeAudit\" class=\"badge badge-light-info mt-0 me-2\">Language Spoken: {{auditDetails?.spokenLanguage}}</span></span>  <span class=\"mt-1\">Recently Audited By : </span>\r\n                        <span class=\"ms-2 mt-1\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n                                    height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3337 14V12.6667C13.3337 11.9594 13.0527 11.2811 12.5526 10.781C12.0525 10.281 11.3742 10 10.667 10H5.33366C4.62641 10 3.94814 10.281 3.44804 10.781C2.94794 11.2811 2.66699 11.9594 2.66699 12.6667V14M10.667 4.66667C10.667 6.13943 9.47308 7.33333 8.00033 7.33333C6.52757 7.33333 5.33366 6.13943 5.33366 4.66667C5.33366 3.19391 6.52757 2 8.00033 2C9.47308 2 10.667 3.19391 10.667 4.66667Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></span >{{auditDetails?.lastAuditedDetails?.auditedBy}}</span>\r\n                        <span class=\"ms-2 mt-1\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_152_29431)\">\r\n                                        <path\r\n                                            d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_152_29431\">\r\n                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>{{auditDetails?.lastAuditedDetails?.completionTime}}\r\n                            {{auditDetails?.lastAuditedDetails?.timeZone}}</span>\r\n                    </div>\r\n                    \r\n                </div>\r\n                <div class=\"card-toolbar\">\r\n                    <div *ngIf=\"takeAudit&& currentAuditType === 'remote'\" class=\"d-flex align-items-end me-2\">\r\n                        <select [(ngModel)]=\"spokenLanguage\" class=\"form-select form-select-sm\">\r\n                            <option selected disabled >Language Spoken <span style=\"color:red\">*</span></option>\r\n                            <option value=\"English\">English</option>\r\n                            <option value=\"Hindi\">Hindi</option>\r\n                        </select></div>\r\n                <div *ngIf=\"auditDetails?.auditStatus === 'Yet-to-Audit' && !takeAudit\" (click)=\"startAudit('audit')\"\r\n                    class=\"text-white ms-3 px-3 py-2 fw-semibold rounded-2 cursor-pointer bg-primary\"\r\n                    style=\"font-size: 14px;\">\r\n                    Start Audit\r\n                </div>\r\n                <div *ngIf=\"['Audited','Re-Audit'].includes(auditDetails?.auditStatus) && !takeAudit\"\r\n                    (click)=\"startAudit('Re-Audit')\" class=\"btn btn-sm py-2 btn-warning\">Re-Audit</div>\r\n                <div *ngIf=\"takeAudit\" class=\"d-flex\">\r\n                    <div class=\"btn btn-sm btn-outline\" (click)=\"cancel()\" >Cancel</div>\r\n                    <div class=\"btn ms-3 btn-sm btn-success\" (click)=\"onsubmit()\" >Submit</div>\r\n                </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-body px-0\">\r\n                <div *ngIf=\"!takeAudit && stepWiseProcess?.length\" class=\"table-responsive border border-1 rounded-3\">\r\n                    <table class=\"w-100 table bottom-border text-nowrap\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"text-align-left\">\r\n                                    Step-by-step Process\r\n                                </th>\r\n                                <th *ngIf=\"currentAuditType === 'remote'\" class=\"text-align-left\">\r\n                                    Predicted Transcript\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    AI Verified\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    Human Audited\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    Reason for Error\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    Noticed Time Range\r\n                                </th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr *ngFor=\"let data of stepWiseProcess;let i=index\">\r\n                                <td>\r\n                                    <div class=\"d-flex align-items-start\">\r\n                                        <!-- <div class=\"w-40px h-40px d-flex justify-content-center text-center me-3\">\r\n                                            <img class=\"w-100 rounded-5\" [src]=\"data?.imageUrl\">\r\n                                        </div> -->\r\n                                        {{data.processName}}\r\n                                    </div>\r\n                                </td>\r\n                                <td *ngIf=\"currentAuditType ==='remote'\" class=\"text-capitalize\">\r\n                                    <div class=\"text-primary1 text-decoration-underline cursor-pointer\"\r\n                                        [ngbTooltip]=\"data?.predictedTranscript ? tooltipContent : ''\"\r\n                                        placement='bottom'>{{data?.predictedTranscript}}</div>\r\n\r\n                                    <ng-template #tooltipContent>\r\n                                        <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                            <span class=\"min-w-500px\">{{data?.predictedTranscript}}</span>\r\n                                        </div>\r\n                                    </ng-template>\r\n\r\n                                </td>\r\n                                <td class=\"text-capitalize\"><span\r\n                                        [ngClass]=\"data.AIStatus ? 'badge badge-light-success' : 'badge badge-light-danger'\">{{data.AIStatus\r\n                                        ? 'pass' : 'fail'}}</span></td>\r\n                         <td class=\"text-capitalize\">\r\n                            <span *ngIf=\"data.auditedStatus !== null && data.auditedStatus !== undefined && data.auditedStatus !== ''\"\r\n                                  [ngClass]=\"data.auditedStatus === true ? 'badge badge-light-success' : (data.auditedStatus === false ? 'badge badge-light-danger' : '')\">\r\n                              {{ data.auditedStatus === true ? 'pass' : (data.auditedStatus === false ? 'fail' : '') }}\r\n                            </span>\r\n                          </td>\r\n                          <td *ngIf=\"data.AIStatus !== data.auditedStatus || data.auditedStatus === null || data.auditedStatus === undefined || data.auditedStatus === ''; else EqualBlock\">\r\n                            {{ data?.reason || 'N/A' }}\r\n                          </td>\r\n                          <ng-template #EqualBlock>\r\n                            <td>N/A</td>\r\n                          </ng-template>\r\n                                <td>{{data?.startTime}} - {{data?.endTime}}</td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n                <div *ngIf=\"stepWiseProcess?.length && takeAudit&&auditDetails?.auditStatus==='Yet-to-Audit'||auditDetails?.auditStatus==='In-Progress'\">\r\n                    <div *ngFor=\"let process of stepWiseProcess; let i=index ;let last=last\"\r\n                        class=\"border border-1 rounded-3 mb-3\">\r\n                        <table class=\"w-100 table bottom-border text-nowrap\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th class=\"text-primary bg-light-primary text-align-left\">\r\n                                        Step-{{i+1 | number}}\r\n                                    </th>\r\n                                    <th class=\"text-primary bg-light-primary text-align-left\">\r\n                                        AI Verified\r\n                                    </th>\r\n                                    <th class=\"text-primary bg-light-primary text-align-left\">\r\n                                        Human Audited\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr>\r\n                                    <td class=\"w-200px\">\r\n                                        <!-- <div class=\"d-flex align-items-start\"> -->\r\n                                            <!-- <div class=\"w-40px h-40px d-flex justify-content-center text-center me-3\">\r\n                                                <img class=\"w-100 rounded-5\" [src]=\"process.imageUrl\">\r\n                                            </div> -->\r\n                                            {{process.processName}}\r\n                                        <!-- </div> -->\r\n                                    </td>\r\n                                    <td><span *ngIf=\"process.AIStatus\" class=\"badge badge-light-success text-capitalize\">Pass</span>\r\n                                        <span *ngIf=\"!process.AIStatus\" class=\"badge badge-light-danger text-capitalize\">Fail</span>\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"d-flex justify-content-start\">\r\n                                            <div (click)=\"selectHumanVerified(i,true)\"\r\n                                                [ngClass]=\"process?.auditedStatus ? 'text-white btn-success' : 'text-success bg-white border border-success'\"\r\n                                                class=\"btn btn-sm  rounded-5\"><span><svg\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\"\r\n                                                        viewBox=\"0 0 17 16\" fill=\"none\">\r\n                                                        <path d=\"M14.1667 4L6.83333 11.3333L3.5 8\"\r\n                                                            [attr.stroke]=\"process?.auditedStatus ? 'white' : '#17C653'\"\r\n                                                            stroke-width=\"1.25\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg></span><span class=\"ms-2\">Pass</span></div>\r\n\r\n                                            <div (click)=\"selectHumanVerified(i,false)\"\r\n                                                [ngClass]=\"process?.auditedStatus===false ? 'text-white bg-danger' : 'text-danger bg-white border border-danger'\"\r\n                                                class=\"ms-3 px-5 py-2 fw-semibold rounded-5 cursor-pointer rounded-5\">\r\n                                                <span>\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\"\r\n                                                        viewBox=\"0 0 17 16\" fill=\"none\">\r\n                                                        <path d=\"M12.6665 4L4.6665 12M4.6665 4L12.6665 12\"\r\n                                                            [attr.stroke]=\"process?.auditedStatus===false ? 'white' : '#F8285A'\"\r\n                                                            stroke-width=\"1.25\" stroke-linecap=\"rowund\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span><span class=\"ms-2\">Fail</span></div>\r\n                                        </div>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                        <div *ngIf=\"currentAuditType === 'remote' && process?.predictedTranscript\" class=\"w-100\">\r\n                            <div class=\"bg-light-primary text-primary p-3\">\r\n                                Predicted Transcript\r\n                            </div>\r\n                            <div class=\"row col-sm-12 p-5\">\r\n                                <div class=\"text-primary text-decoration-underline cursor-pointer\"\r\n                                    [ngbTooltip]=\"process?.predictedTranscript ? tooltipContent : ''\"\r\n                                    placement='bottom'>\r\n                                    {{process?.predictedTranscript}}\r\n                                </div>\r\n                                <ng-template #tooltipContent>\r\n                                    <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                        <span class=\"min-w-500px\">{{process?.predictedTranscript}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"process?.auditedStatus !== undefined && process?.auditedStatus !== '' && process?.auditedStatus !== process?.AIStatus\" class=\"w-100\">\r\n                            <div class=\"bg-light-primary text-primary p-3\">\r\n                                Reason & Time Stamp\r\n                            </div>\r\n                            <div class=\"row col-sm-12 p-5\">\r\n                                <div class=\"col-sm-6 col-md-6\">\r\n                                    <div>\r\n                                      <div (click)=\"toggleDropdown(i,'reason')\" class=\"custom-dropdown\">\r\n                                        <div class=\"d-flex justify-content-between\">\r\n                                          <span class=\"text-select\">\r\n                                            {{ process?.reason ? process?.reason : 'Select Reason' }}\r\n                                          </span>\r\n                                          <span>\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                              <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                          </span>\r\n                                        </div>\r\n                                  \r\n                                        <div [ngClass]=\"last ? 'dropdown-content1' : 'dropdown-content'\" *ngIf=\"dropdownOpen[i]?.reason\">\r\n                                          <div class=\"scroll-container\">\r\n                                            <!-- Minutes List -->\r\n                                            <div class=\"item my-2 minutes-scroll\">\r\n                                              <ul *ngFor=\"let item of dropdownList\" class=\"list-unstyled\">\r\n                                                <li [ngClass]=\"process?.reason === item?.key ? 'active' : ''\"\r\n                                                    class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                                    (click)=\"selectReason(i, item?.key, 'reason')\">\r\n                                                  {{ item?.item }}\r\n                                                </li>\r\n                                              </ul>\r\n                                            </div>\r\n                                          </div>\r\n                                        </div>\r\n                                      </div>\r\n                                  \r\n                                      <!-- Custom Input for \"Others\" -->\r\n                                      <div *ngIf=\"process?.reason === 'others'\" class=\"mt-2\">\r\n                                        <input \r\n                                          type=\"text\" \r\n                                          [(ngModel)]=\"process.otherReason\" \r\n                                          placeholder=\"Enter your reason\" \r\n                                          class=\"form-control form-control-sm\" />\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>\r\n                                  \r\n                                <div class=\"col-sm-3\">\r\n                                    <div class=\"w-100\">\r\n                                        <div (click)=\"toggleDropdown(i,'startTime')\" class=\"custom-dropdown\">\r\n                                            <label class=\"label fw-semibold bg-white px-2\">Start</label>\r\n                                            <div class=\"text-select\">{{process?.startTime ? process?.startTime\r\n                                                :'MM:SS'}}</div>\r\n\r\n                                            <div [ngClass]=\"last ? 'dropdown-content1' : 'dropdown-content'\"\r\n                                                *ngIf=\"dropdownOpen[i]?.startTime\">\r\n                                                <div class=\"scroll-container\">\r\n                                                    <!-- Minutes List -->\r\n                                                    <div class=\"scroll-section minutes-scroll \">\r\n                                                        <div *ngFor=\"let min of minutesList\"\r\n                                                            (click)=\"selectMinute(i,min,'startTime')\"\r\n                                                            [class.selected]=\"min === selectedMinutes\">\r\n                                                            {{ min }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <!-- Seconds List -->\r\n                                                    <div class=\"scroll-section seconds-scroll\">\r\n                                                        <div *ngFor=\"let sec of secondsList\"\r\n                                                            (click)=\"selectSecond(i,sec,'startTime')\"\r\n                                                            [class.selected]=\"sec === selectedSeconds\">\r\n                                                            {{ sec }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-sm-3\">\r\n                                    <div class=\"w-100\">\r\n                                        <div (click)=\"toggleDropdown(i,'endTime')\" class=\"custom-dropdown\">\r\n                                            <label class=\"label fw-semibold bg-white px-2\">End</label>\r\n                                            <div class=\"text-select\"><span>{{process.endTime ? process.endTime :\r\n                                                    'MM:SS'}}</span></div>\r\n\r\n                                            <div [ngClass]=\"last ? 'dropdown-content1' : 'dropdown-content'\"\r\n                                                *ngIf=\"dropdownOpen[i]?.endTime\">\r\n                                                <div class=\"scroll-container\">\r\n                                                    <!-- Minutes List -->\r\n                                                    <div class=\"scroll-section minutes-scroll\">\r\n                                                        <div *ngFor=\"let min of minutesList\"\r\n                                                        [class.selected]=\"min === selectedMinutes\"\r\n                                                        [class.disabled]=\"getSecondsFromTime(min + ':' + selectedSeconds) <= getSecondsFromTime(process.startTime)\"\r\n                                                        (click)=\"\r\n                                                           getSecondsFromTime(min + ':' + selectedSeconds) > getSecondsFromTime(process.startTime)\r\n                                                           && selectMinute(i,min,'endTime')\">\r\n                                                     {{ min }}\r\n                                                   </div>\r\n                                                   \r\n                                                    </div>\r\n                                                    <!-- Seconds List -->\r\n                                                    <div class=\"scroll-section seconds-scroll\">\r\n                                                        <div *ngFor=\"let sec of secondsList\"\r\n                                                        [class.selected]=\"sec === selectedSeconds\"\r\n                                                        [class.disabled]=\"getSecondsFromTime(selectedMinutes + ':' + sec) <= getSecondsFromTime(process.startTime)\"\r\n                                                        (click)=\"\r\n                                                           getSecondsFromTime(selectedMinutes + ':' + sec) > getSecondsFromTime(process.startTime)\r\n                                                           && selectSecond(i,sec,'endTime')\">\r\n                                                     {{ sec }}\r\n                                                   </div>\r\n                                                   \r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!stepWiseProcess?.length\">\r\n                    <div *ngIf=\"(tableLoading | async) === 'loading'\"\r\n                        class=\"card row loader d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"(tableLoading | async) === 'loaded'\" class=\"row mt-2\">\r\n                        <div *ngIf=\"noData\" class=\"col-lg-12\">\r\n                            <div class=\"card-body my-8 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=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for the test</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"card mt-3 p-2\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span class=\"title-text mb-2\">History</span>\r\n        </h3>\r\n    </div>\r\n    <div class=\"card-body py-0 px-3\">\r\n        <div class=\"table-responsive border border-1 rounded-3\" *ngIf=\"historyData?.length\">\r\n            <table class=\"w-100 table bottom-border text-nowrap\">\r\n                <thead>\r\n                    <tr>\r\n                        <th class=\"text-start\">Audited By</th>\r\n                        <th>Audited Date</th>\r\n                        <th>Time Stamp</th>\r\n                        <th>View Logs</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let item of historyData\">\r\n                        <td>{{item.userName}}</td>\r\n                        <td>{{item.Date}}</td>\r\n                        <td>{{item.Time}}</td>\r\n                        <td (click)=\"viewHistoryModel(item)\" class=\"cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\"\r\n                                viewBox=\"0 0 20 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n\r\n        <div *ngIf=\"!historyData?.length\">\r\n            <div *ngIf=\"(historytableLoading | async) === 'loading'\"\r\n                class=\"card row loader d-flex justify-content-center align-items-center\">\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"stroke animate title\"></div>\r\n                        <div class=\"stroke animate link\"></div>\r\n                        <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"stroke animate title\"></div>\r\n                        <div class=\"stroke animate link\"></div>\r\n                        <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"(historytableLoading | async) === 'loaded'\" class=\"row mt-2\">\r\n                <div class=\"col-lg-12\">\r\n                    <div class=\"card-body my-8 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=\"nodata-title\">No data found</div>\r\n                        <div class=\"nodata-sub\">There is no result for the test</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<ng-template #viewHistory let-model>\r\n    <div class=\"p-5\">\r\n\r\n\r\n        <div class=\"card-body py-0 \">\r\n            <div class=\"my-2 d-flex\">\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\"\r\n                            height=\"46\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n                            <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                            <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                            <path\r\n                                d=\"M28 22V28L32 30M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n                                stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                    <span\r\n                        class=\"ms-3 pt-2 fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Audit\r\n                        History</span>\r\n            </div>\r\n            <div class=\"table-responsive\" *ngIf=\"historyData?.length\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"text-start\">Step-by-Step Process</th>\r\n                            <th>Status changed from</th>\r\n                            <th>Noted Time Range</th>\r\n                            <th>Reason for Error</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let item of viewHistoryData\">\r\n                            <td>{{item.processName}}</td>\r\n                            <td>\r\n                                <span *ngIf=\"item.AIStatus\" class=\"badge badge-light-success me-2\">Pass</span>\r\n                                <span *ngIf=\"!item.AIStatus\" class=\"badge badge-light-danger me-2\">Fail</span>\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"31\" height=\"8\" viewBox=\"0 0 31 8\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M30.3536 4.35355C30.5488 4.15829 30.5488 3.84171 30.3536 3.64645L27.1716 0.464466C26.9763 0.269204 26.6597 0.269204 26.4645 0.464466C26.2692 0.659728 26.2692 0.976311 26.4645 1.17157L29.2929 4L26.4645 6.82843C26.2692 7.02369 26.2692 7.34027 26.4645 7.53553C26.6597 7.7308 26.9763 7.7308 27.1716 7.53553L30.3536 4.35355ZM0 4.5H30V3.5H0V4.5Z\"\r\n                                        fill=\"#D0D5DD\" />\r\n                                </svg>\r\n                                <span *ngIf=\"item.auditedStatus\" class=\"badge badge-light-success ms-2\">Pass</span>\r\n                                <span *ngIf=\"!item.auditedStatus\" class=\"badge badge-light-danger ms-2\">Fail</span>\r\n                            </td>\r\n                            <td ><span class=\"badge badge-light-success\" *ngIf=\"item.startTime\">Noted Time Range : <span class=\"text-dark1\">{{item.startTime ? item.startTime:'--'}} - {{item.endTime}}</span></span></td>\r\n                            <td class=\"engage-text\">{{item.reason}}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header-card{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;color:var(--Black, #101828);font-size:18px;line-height:32px}.text-card{color:var(--Black, #101828);font-size:24px;line-height:32px}.bg-light-primary{border-bottom:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important}.sub-title{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.video-position{position:absolute;top:50%;transform:translateY(-50%)}.btn-success{border:1px solid var(--Success-700, #027A48)!important;background:var(--Success-700, #027A48)!important;box-shadow:0 1px 2px #1018280d!important}.btn.btn-success:hover:not(.btn-active),.btn.btn-success:active:not(.btn-active){border:1px solid var(--Success-700, #027A48)!important;background:var(--Success-700, #027A48)!important;box-shadow:0 1px 2px #1018280d!important}table tr{vertical-align:middle}table tr td{color:var(--Gray-500, #667085);font-size:14px!important;font-weight:500;line-height:20px}.custom-dropdown{position:relative;width:100%;padding:10px 16px;cursor:pointer;border-radius:8px;font-size:16px;font-weight:400;line-height:20px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Gray-50, #F9FAFB);box-shadow:0 1px 2px #1018280d}.dropdown-content{position:absolute;z-index:1;top:100%;left:0;border-radius:6px;width:100%;background:#fff;box-shadow:0 4px 6px #0000001a;display:flex}.dropdown-content1{position:absolute;z-index:1;bottom:100%;left:0;border-radius:6px;width:100%;background:#fff;box-shadow:0 4px 6px #0000001a;display:flex}.scroll-container{display:flex;width:100%}.scroll-container .item{width:100%;text-align:start}.scroll-container .items:hover,.scroll-container .tems.focus,.scroll-container .items.active{background:var(--Gray-50, #F9FAFB)}.label{position:absolute;top:-25%;color:var(--Gray-700, #344054);font-size:12px;line-height:18px}.scroll-section{width:50%;height:200px;overflow-y:auto;text-align:center;border-right:1px solid #ddd}.scroll-section:last-child{border-right:none}.scroll-section div{padding:8px;cursor:pointer}.scroll-section div.selected{background:#007bff;color:#fff}.bg-primary{border-radius:8px;background:var(--Primary-500, #33B5FF)!important}.bg-danger{background:var(--Primary-500, #D92D20)!important}.text-primary{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:500!important;line-height:18px!important}.text-primary1{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:500!important;line-height:18px!important;font-style:italic;text-overflow:ellipsis;max-width:200px;overflow:hidden}.text-select{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400;line-height:21.84px!important}.custom-tooltip-content{font-size:12px!important;text-align:left!important}::ng-deep .tooltip-inner{max-width:500px!important;white-space:normal}.test-dark1{color:var(--Success-700, #027A48)!important;text-align:center;font-size:12px!important;font-weight:500!important;line-height:18px}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.disabled{pointer-events:none;opacity:.4;cursor:not-allowed}@media (min-width: 1920px) and (max-width: 2119px){.h-500px{height:600px!important}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StartAuditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-start-audit', template: "<div class=\"card p-5\">\r\n    <div class=\"d-flex align-items-center\">\r\n        <div routerLink=\"/manage/trax/audit\" class=\"btn btn-am btn-outline p-3\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path d=\"M15.8332 9.99984H4.1665M4.1665 9.99984L9.99984 15.8332M4.1665 9.99984L9.99984 4.1665\"\r\n                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg></span>\r\n        </div>\r\n        <span class=\"ms-3 badge badge-light-default\">{{auditDetails?.storeName}}</span>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <path\r\n                        d=\"M5.25021 6.50028C5.91329 6.50028 6.54921 6.23689 7.01807 5.76807C7.48694 5.29924 7.75035 4.66337 7.75035 4.00035C7.75035 3.33732 7.48694 2.70146 7.01807 2.23263C6.54921 1.7638 5.91329 1.50042 5.25021 1.50042C4.58713 1.50042 3.95121 1.7638 3.48234 2.23263C3.01348 2.70146 2.75007 3.33732 2.75007 4.00035C2.75007 4.66337 3.01348 5.29924 3.48234 5.76807C3.95121 6.23689 4.58713 6.50028 5.25021 6.50028ZM5.25021 5.25031C4.91867 5.25031 4.60071 5.11862 4.36628 4.88421C4.13184 4.64979 4.00014 4.33186 4.00014 4.00035C4.00014 3.66884 4.13184 3.3509 4.36628 3.11649C4.60071 2.88207 4.91867 2.75038 5.25021 2.75038C5.58175 2.75038 5.89971 2.88207 6.13414 3.11649C6.36857 3.3509 6.50028 3.66884 6.50028 4.00035C6.50028 4.33186 6.36857 4.64979 6.13414 4.88421C5.89971 5.11862 5.58175 5.25031 5.25021 5.25031ZM1.5 8.79188C1.5 7.9869 2.15337 7.33359 2.95841 7.33359H7.542C8.34705 7.33359 9.00042 7.9869 9.00042 8.79188V12.7501C9.00042 13.7446 8.60531 14.6984 7.90201 15.4017C7.1987 16.1049 6.24483 16.5 5.25021 16.5C4.25559 16.5 3.30171 16.1049 2.59841 15.4017C1.89511 14.6984 1.5 13.7446 1.5 12.7501V8.79188ZM2.95841 8.58355C2.90316 8.58355 2.85016 8.6055 2.81109 8.64457C2.77202 8.68364 2.75007 8.73663 2.75007 8.79188V12.7501C2.75007 13.4131 3.01348 14.049 3.48234 14.5178C3.95121 14.9867 4.58713 15.25 5.25021 15.25C5.91329 15.25 6.54921 14.9867 7.01807 14.5178C7.48694 14.049 7.75035 13.4131 7.75035 12.7501V8.79188C7.75035 8.73663 7.7284 8.68364 7.68932 8.64457C7.65025 8.6055 7.59726 8.58355 7.542 8.58355H2.95841ZM7.77285 6.17862C8.15328 6.39267 8.58313 6.5034 9.01963 6.49978C9.45614 6.49616 9.8841 6.37832 10.2609 6.15799C10.6378 5.93766 10.9503 5.62252 11.1675 5.24391C11.3848 4.8653 11.499 4.43642 11.499 3.99993C11.499 3.56344 11.3848 3.13456 11.1675 2.75595C10.9503 2.37734 10.6378 2.0622 10.2609 1.84187C9.8841 1.62154 9.45614 1.50371 9.01963 1.50009C8.58313 1.49647 8.15328 1.60719 7.77285 1.82124C8.04536 2.13623 8.25954 2.50289 8.39955 2.90454C8.58991 2.80026 8.80415 2.74733 9.02118 2.75097C9.23821 2.75462 9.45055 2.81471 9.63731 2.92533C9.82406 3.03594 9.97879 3.19328 10.0863 3.38185C10.1937 3.57042 10.2503 3.78372 10.2503 4.00076C10.2503 4.21781 10.1937 4.43111 10.0863 4.61968C9.97879 4.80825 9.82406 4.96558 9.63731 5.0762C9.45055 5.18682 9.23821 5.24691 9.02118 5.25055C8.80415 5.2542 8.58991 5.20127 8.39955 5.09698C8.26074 5.49382 8.0481 5.86082 7.77285 6.17862ZM8.05036 16.3783C8.35483 16.4583 8.67151 16.4989 9.00042 16.5C9.99503 16.5 10.9489 16.1049 11.6522 15.4017C12.3555 14.6984 12.7506 13.7446 12.7506 12.7501V8.79188C12.7506 8.40512 12.597 8.03419 12.3235 7.76071C12.05 7.48723 11.679 7.33359 11.2922 7.33359H9.30877C9.59462 7.67941 9.78046 8.11107 9.8238 8.58355H11.2905C11.3458 8.58355 11.3988 8.6055 11.4379 8.64457C11.4769 8.68364 11.4989 8.73663 11.4989 8.79188V12.7501C11.4989 13.3968 11.2483 14.0184 10.7996 14.4843C10.351 14.9501 9.73925 15.224 9.09292 15.2484C8.81041 15.6817 8.45872 16.0633 8.05036 16.3783ZM11.5222 6.17862C11.9027 6.39267 12.3325 6.5034 12.769 6.49978C13.2055 6.49616 13.6335 6.37832 14.0103 6.15799C14.3871 5.93766 14.6997 5.62252 14.9169 5.24391C15.1341 4.8653 15.2484 4.43642 15.2484 3.99993C15.2484 3.56344 15.1341 3.13456 14.9169 2.75595C14.6997 2.37734 14.3871 2.0622 14.0103 1.84187C13.6335 1.62154 13.2055 1.50371 12.769 1.50009C12.3325 1.49647 11.9027 1.60719 11.5222 1.82124C11.7947 2.13623 12.0089 2.50289 12.1489 2.90454C12.3393 2.80026 12.5535 2.74733 12.7706 2.75097C12.9876 2.75462 13.1999 2.81471 13.3867 2.92533C13.5734 3.03594 13.7282 3.19328 13.8356 3.38185C13.9431 3.57042 13.9996 3.78372 13.9996 4.00076C13.9996 4.21781 13.9431 4.43111 13.8356 4.61968C13.7282 4.80825 13.5734 4.96558 13.3867 5.0762C13.1999 5.18682 12.9876 5.24691 12.7706 5.25055C12.5535 5.2542 12.3393 5.20127 12.1489 5.09698C12.0101 5.49382 11.7975 5.86082 11.5222 6.17862ZM11.7997 16.3783C12.1042 16.4583 12.4209 16.4989 12.7498 16.5C13.7444 16.5 14.6983 16.1049 15.4016 15.4017C16.1049 14.6984 16.5 13.7446 16.5 12.7501V8.79188C16.5 8.40526 16.3465 8.03447 16.0731 7.76101C15.7998 7.48755 15.4291 7.33381 15.0424 7.33359H13.059C13.3448 7.67941 13.5315 8.11107 13.574 8.58355H15.0408C15.096 8.58355 15.149 8.6055 15.1881 8.64457C15.2271 8.68364 15.2491 8.73663 15.2491 8.79188V12.7501C15.2491 13.3968 14.9985 14.0184 14.5498 14.4843C14.1012 14.9501 13.4895 15.224 12.8431 15.2484C12.5606 15.6817 12.2081 16.0633 11.7997 16.3783Z\"\r\n                        fill=\"#667085\" />\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{auditDetails?.engagementId}}</span>\r\n        </div>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <path\r\n                        d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{currentAuditType | titlecase}} Eye Test</span>\r\n        </div>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <path\r\n                        d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{auditDetails?.fileDate | date: 'dd/MM/YYYY'}}</span>\r\n        </div>\r\n        <div class=\"d-flex ms-3 align-items-center\">\r\n            <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                    <g clip-path=\"url(#clip0_166_55019)\">\r\n                        <path\r\n                            d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                            stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_166_55019\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg></span>\r\n            <span class=\"ms-2 sub-title\">{{auditDetails?.testStartTime}} - {{auditDetails?.testEndTime}}\r\n                ({{auditDetails?.testDuration}} Mins)</span>\r\n        </div>\r\n        <span class=\"ms-3 badge badge-light-primary\">{{auditDetails?.visitorsType | titlecase}}</span>\r\n        <div *ngIf=\"['Yet-to-Audit'].includes(auditDetails?.auditStatus)\"\r\n            class=\"text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-primary\" style=\"font-size: 14px;\">\r\n            Yet to Audit\r\n        </div>\r\n        <div *ngIf=\"auditDetails?.auditType === 'Audit'&&auditDetails?.auditStatus === 'Audited'\"\r\n            class=\"text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-success\" style=\"font-size: 14px;\">\r\n            Audited\r\n        </div>\r\n        <div *ngIf=\"auditDetails?.auditType === 'Re-Audit'&&auditDetails?.auditStatus === 'Audited'\"\r\n            class=\"text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-warning\" style=\"font-size: 14px;\">\r\n            Re-Audited\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row mt-3\">\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 text-center header-card\">\r\n                AI Verified Steps <span><svg ngbTooltip=\"Number of steps detected and validated automatically without manual review.\" placement=\"right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" \r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.coveredStepsAI?auditDetails?.coveredStepsAI:0}}/{{auditDetails?.totalSteps ? auditDetails?.totalSteps:'--'}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 text-center header-card\">\r\n                Human Verified Steps <span><svg ngbTooltip=\"Number of steps that required human validation to ensure compliance and accuracy.\" placement=\"right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.auditedSteps?auditDetails?.auditedSteps:0}}/{{auditDetails?.totalSteps ? auditDetails?.totalSteps:'--'}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 header-card\">\r\n                AI Compliance Score <span><svg ngbTooltip=\"Measures the percentage of steps AI flagged as compliant without human intervention.\" placement=\"left\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.complianceScore ?auditDetails?.complianceScore :'--'}}%</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-3\">\r\n        <div class=\"card p-3 fw-bold text-center\">\r\n            <div class=\"p-3 header-card\">\r\n                AI Trust Score <span><svg ngbTooltip=\"This score reflects how often AI predictions were accepted without manual overrides.\" placement=\"left\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                        fill=\"none\">\r\n                        <g clip-path=\"url(#clip0_362_2979)\">\r\n                            <path\r\n                                d=\"M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\"\r\n                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_362_2979\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg></span>\r\n            </div>\r\n            <div class=\"p-5 text-card\">\r\n                <span>{{auditDetails?.trustScore ? auditDetails?.trustScore:'--'}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"row mt-3\">\r\n    <div class=\"col-sm-6\">\r\n        <div class=\"card h-500px px-5\">\r\n            <div class=\"card-header p-0 border-0\">\r\n                <span class=\"card-title m-0 fw-bolder bg-none\">Preview Eye Test</span>\r\n            </div>\r\n            <div class=\"card-body px-0 position-relative\">\r\n                <div class=\"video-position w-100\">\r\n                    <video class=\"w-100 rounded-3 h-auto\" controls\r\n                        [src]=\"auditDetails?.filePath\"></video>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-6\">\r\n        <div class=\"card h-500px px-5 overflow-scroll\">\r\n            <div class=\"card-header p-0 border-0 d-flex justify-content-between align-items-center\">\r\n                <div class=\"\">\r\n                    <span class=\"card-title m-0 fw-bolder bg-none\">Step-wise Breakdown</span>\r\n                   \r\n                    \r\n                    <div class=\"d-flex sub-title mt-2\" *ngIf=\"auditDetails?.lastAuditedDetails?.auditedBy\">\r\n                      <span *ngIf=\"auditDetails?.spokenLanguage\"> <span *ngIf=\"!takeAudit\" class=\"badge badge-light-info mt-0 me-2\">Language Spoken: {{auditDetails?.spokenLanguage}}</span></span>  <span class=\"mt-1\">Recently Audited By : </span>\r\n                        <span class=\"ms-2 mt-1\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n                                    height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3337 14V12.6667C13.3337 11.9594 13.0527 11.2811 12.5526 10.781C12.0525 10.281 11.3742 10 10.667 10H5.33366C4.62641 10 3.94814 10.281 3.44804 10.781C2.94794 11.2811 2.66699 11.9594 2.66699 12.6667V14M10.667 4.66667C10.667 6.13943 9.47308 7.33333 8.00033 7.33333C6.52757 7.33333 5.33366 6.13943 5.33366 4.66667C5.33366 3.19391 6.52757 2 8.00033 2C9.47308 2 10.667 3.19391 10.667 4.66667Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></span >{{auditDetails?.lastAuditedDetails?.auditedBy}}</span>\r\n                        <span class=\"ms-2 mt-1\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_152_29431)\">\r\n                                        <path\r\n                                            d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_152_29431\">\r\n                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>{{auditDetails?.lastAuditedDetails?.completionTime}}\r\n                            {{auditDetails?.lastAuditedDetails?.timeZone}}</span>\r\n                    </div>\r\n                    \r\n                </div>\r\n                <div class=\"card-toolbar\">\r\n                    <div *ngIf=\"takeAudit&& currentAuditType === 'remote'\" class=\"d-flex align-items-end me-2\">\r\n                        <select [(ngModel)]=\"spokenLanguage\" class=\"form-select form-select-sm\">\r\n                            <option selected disabled >Language Spoken <span style=\"color:red\">*</span></option>\r\n                            <option value=\"English\">English</option>\r\n                            <option value=\"Hindi\">Hindi</option>\r\n                        </select></div>\r\n                <div *ngIf=\"auditDetails?.auditStatus === 'Yet-to-Audit' && !takeAudit\" (click)=\"startAudit('audit')\"\r\n                    class=\"text-white ms-3 px-3 py-2 fw-semibold rounded-2 cursor-pointer bg-primary\"\r\n                    style=\"font-size: 14px;\">\r\n                    Start Audit\r\n                </div>\r\n                <div *ngIf=\"['Audited','Re-Audit'].includes(auditDetails?.auditStatus) && !takeAudit\"\r\n                    (click)=\"startAudit('Re-Audit')\" class=\"btn btn-sm py-2 btn-warning\">Re-Audit</div>\r\n                <div *ngIf=\"takeAudit\" class=\"d-flex\">\r\n                    <div class=\"btn btn-sm btn-outline\" (click)=\"cancel()\" >Cancel</div>\r\n                    <div class=\"btn ms-3 btn-sm btn-success\" (click)=\"onsubmit()\" >Submit</div>\r\n                </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-body px-0\">\r\n                <div *ngIf=\"!takeAudit && stepWiseProcess?.length\" class=\"table-responsive border border-1 rounded-3\">\r\n                    <table class=\"w-100 table bottom-border text-nowrap\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"text-align-left\">\r\n                                    Step-by-step Process\r\n                                </th>\r\n                                <th *ngIf=\"currentAuditType === 'remote'\" class=\"text-align-left\">\r\n                                    Predicted Transcript\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    AI Verified\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    Human Audited\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    Reason for Error\r\n                                </th>\r\n                                <th class=\"text-align-left\">\r\n                                    Noticed Time Range\r\n                                </th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr *ngFor=\"let data of stepWiseProcess;let i=index\">\r\n                                <td>\r\n                                    <div class=\"d-flex align-items-start\">\r\n                                        <!-- <div class=\"w-40px h-40px d-flex justify-content-center text-center me-3\">\r\n                                            <img class=\"w-100 rounded-5\" [src]=\"data?.imageUrl\">\r\n                                        </div> -->\r\n                                        {{data.processName}}\r\n                                    </div>\r\n                                </td>\r\n                                <td *ngIf=\"currentAuditType ==='remote'\" class=\"text-capitalize\">\r\n                                    <div class=\"text-primary1 text-decoration-underline cursor-pointer\"\r\n                                        [ngbTooltip]=\"data?.predictedTranscript ? tooltipContent : ''\"\r\n                                        placement='bottom'>{{data?.predictedTranscript}}</div>\r\n\r\n                                    <ng-template #tooltipContent>\r\n                                        <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                            <span class=\"min-w-500px\">{{data?.predictedTranscript}}</span>\r\n                                        </div>\r\n                                    </ng-template>\r\n\r\n                                </td>\r\n                                <td class=\"text-capitalize\"><span\r\n                                        [ngClass]=\"data.AIStatus ? 'badge badge-light-success' : 'badge badge-light-danger'\">{{data.AIStatus\r\n                                        ? 'pass' : 'fail'}}</span></td>\r\n                         <td class=\"text-capitalize\">\r\n                            <span *ngIf=\"data.auditedStatus !== null && data.auditedStatus !== undefined && data.auditedStatus !== ''\"\r\n                                  [ngClass]=\"data.auditedStatus === true ? 'badge badge-light-success' : (data.auditedStatus === false ? 'badge badge-light-danger' : '')\">\r\n                              {{ data.auditedStatus === true ? 'pass' : (data.auditedStatus === false ? 'fail' : '') }}\r\n                            </span>\r\n                          </td>\r\n                          <td *ngIf=\"data.AIStatus !== data.auditedStatus || data.auditedStatus === null || data.auditedStatus === undefined || data.auditedStatus === ''; else EqualBlock\">\r\n                            {{ data?.reason || 'N/A' }}\r\n                          </td>\r\n                          <ng-template #EqualBlock>\r\n                            <td>N/A</td>\r\n                          </ng-template>\r\n                                <td>{{data?.startTime}} - {{data?.endTime}}</td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n                <div *ngIf=\"stepWiseProcess?.length && takeAudit&&auditDetails?.auditStatus==='Yet-to-Audit'||auditDetails?.auditStatus==='In-Progress'\">\r\n                    <div *ngFor=\"let process of stepWiseProcess; let i=index ;let last=last\"\r\n                        class=\"border border-1 rounded-3 mb-3\">\r\n                        <table class=\"w-100 table bottom-border text-nowrap\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th class=\"text-primary bg-light-primary text-align-left\">\r\n                                        Step-{{i+1 | number}}\r\n                                    </th>\r\n                                    <th class=\"text-primary bg-light-primary text-align-left\">\r\n                                        AI Verified\r\n                                    </th>\r\n                                    <th class=\"text-primary bg-light-primary text-align-left\">\r\n                                        Human Audited\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr>\r\n                                    <td class=\"w-200px\">\r\n                                        <!-- <div class=\"d-flex align-items-start\"> -->\r\n                                            <!-- <div class=\"w-40px h-40px d-flex justify-content-center text-center me-3\">\r\n                                                <img class=\"w-100 rounded-5\" [src]=\"process.imageUrl\">\r\n                                            </div> -->\r\n                                            {{process.processName}}\r\n                                        <!-- </div> -->\r\n                                    </td>\r\n                                    <td><span *ngIf=\"process.AIStatus\" class=\"badge badge-light-success text-capitalize\">Pass</span>\r\n                                        <span *ngIf=\"!process.AIStatus\" class=\"badge badge-light-danger text-capitalize\">Fail</span>\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"d-flex justify-content-start\">\r\n                                            <div (click)=\"selectHumanVerified(i,true)\"\r\n                                                [ngClass]=\"process?.auditedStatus ? 'text-white btn-success' : 'text-success bg-white border border-success'\"\r\n                                                class=\"btn btn-sm  rounded-5\"><span><svg\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\"\r\n                                                        viewBox=\"0 0 17 16\" fill=\"none\">\r\n                                                        <path d=\"M14.1667 4L6.83333 11.3333L3.5 8\"\r\n                                                            [attr.stroke]=\"process?.auditedStatus ? 'white' : '#17C653'\"\r\n                                                            stroke-width=\"1.25\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg></span><span class=\"ms-2\">Pass</span></div>\r\n\r\n                                            <div (click)=\"selectHumanVerified(i,false)\"\r\n                                                [ngClass]=\"process?.auditedStatus===false ? 'text-white bg-danger' : 'text-danger bg-white border border-danger'\"\r\n                                                class=\"ms-3 px-5 py-2 fw-semibold rounded-5 cursor-pointer rounded-5\">\r\n                                                <span>\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\"\r\n                                                        viewBox=\"0 0 17 16\" fill=\"none\">\r\n                                                        <path d=\"M12.6665 4L4.6665 12M4.6665 4L12.6665 12\"\r\n                                                            [attr.stroke]=\"process?.auditedStatus===false ? 'white' : '#F8285A'\"\r\n                                                            stroke-width=\"1.25\" stroke-linecap=\"rowund\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span><span class=\"ms-2\">Fail</span></div>\r\n                                        </div>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                        <div *ngIf=\"currentAuditType === 'remote' && process?.predictedTranscript\" class=\"w-100\">\r\n                            <div class=\"bg-light-primary text-primary p-3\">\r\n                                Predicted Transcript\r\n                            </div>\r\n                            <div class=\"row col-sm-12 p-5\">\r\n                                <div class=\"text-primary text-decoration-underline cursor-pointer\"\r\n                                    [ngbTooltip]=\"process?.predictedTranscript ? tooltipContent : ''\"\r\n                                    placement='bottom'>\r\n                                    {{process?.predictedTranscript}}\r\n                                </div>\r\n                                <ng-template #tooltipContent>\r\n                                    <div class=\"custom-tooltip-content tooltip-content w-100\">\r\n                                        <span class=\"min-w-500px\">{{process?.predictedTranscript}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"process?.auditedStatus !== undefined && process?.auditedStatus !== '' && process?.auditedStatus !== process?.AIStatus\" class=\"w-100\">\r\n                            <div class=\"bg-light-primary text-primary p-3\">\r\n                                Reason & Time Stamp\r\n                            </div>\r\n                            <div class=\"row col-sm-12 p-5\">\r\n                                <div class=\"col-sm-6 col-md-6\">\r\n                                    <div>\r\n                                      <div (click)=\"toggleDropdown(i,'reason')\" class=\"custom-dropdown\">\r\n                                        <div class=\"d-flex justify-content-between\">\r\n                                          <span class=\"text-select\">\r\n                                            {{ process?.reason ? process?.reason : 'Select Reason' }}\r\n                                          </span>\r\n                                          <span>\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                              <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                            </svg>\r\n                                          </span>\r\n                                        </div>\r\n                                  \r\n                                        <div [ngClass]=\"last ? 'dropdown-content1' : 'dropdown-content'\" *ngIf=\"dropdownOpen[i]?.reason\">\r\n                                          <div class=\"scroll-container\">\r\n                                            <!-- Minutes List -->\r\n                                            <div class=\"item my-2 minutes-scroll\">\r\n                                              <ul *ngFor=\"let item of dropdownList\" class=\"list-unstyled\">\r\n                                                <li [ngClass]=\"process?.reason === item?.key ? 'active' : ''\"\r\n                                                    class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                                    (click)=\"selectReason(i, item?.key, 'reason')\">\r\n                                                  {{ item?.item }}\r\n                                                </li>\r\n                                              </ul>\r\n                                            </div>\r\n                                          </div>\r\n                                        </div>\r\n                                      </div>\r\n                                  \r\n                                      <!-- Custom Input for \"Others\" -->\r\n                                      <div *ngIf=\"process?.reason === 'others'\" class=\"mt-2\">\r\n                                        <input \r\n                                          type=\"text\" \r\n                                          [(ngModel)]=\"process.otherReason\" \r\n                                          placeholder=\"Enter your reason\" \r\n                                          class=\"form-control form-control-sm\" />\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>\r\n                                  \r\n                                <div class=\"col-sm-3\">\r\n                                    <div class=\"w-100\">\r\n                                        <div (click)=\"toggleDropdown(i,'startTime')\" class=\"custom-dropdown\">\r\n                                            <label class=\"label fw-semibold bg-white px-2\">Start</label>\r\n                                            <div class=\"text-select\">{{process?.startTime ? process?.startTime\r\n                                                :'MM:SS'}}</div>\r\n\r\n                                            <div [ngClass]=\"last ? 'dropdown-content1' : 'dropdown-content'\"\r\n                                                *ngIf=\"dropdownOpen[i]?.startTime\">\r\n                                                <div class=\"scroll-container\">\r\n                                                    <!-- Minutes List -->\r\n                                                    <div class=\"scroll-section minutes-scroll \">\r\n                                                        <div *ngFor=\"let min of minutesList\"\r\n                                                            (click)=\"selectMinute(i,min,'startTime')\"\r\n                                                            [class.selected]=\"min === selectedMinutes\">\r\n                                                            {{ min }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <!-- Seconds List -->\r\n                                                    <div class=\"scroll-section seconds-scroll\">\r\n                                                        <div *ngFor=\"let sec of secondsList\"\r\n                                                            (click)=\"selectSecond(i,sec,'startTime')\"\r\n                                                            [class.selected]=\"sec === selectedSeconds\">\r\n                                                            {{ sec }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-sm-3\">\r\n                                    <div class=\"w-100\">\r\n                                        <div (click)=\"toggleDropdown(i,'endTime')\" class=\"custom-dropdown\">\r\n                                            <label class=\"label fw-semibold bg-white px-2\">End</label>\r\n                                            <div class=\"text-select\"><span>{{process.endTime ? process.endTime :\r\n                                                    'MM:SS'}}</span></div>\r\n\r\n                                            <div [ngClass]=\"last ? 'dropdown-content1' : 'dropdown-content'\"\r\n                                                *ngIf=\"dropdownOpen[i]?.endTime\">\r\n                                                <div class=\"scroll-container\">\r\n                                                    <!-- Minutes List -->\r\n                                                    <div class=\"scroll-section minutes-scroll\">\r\n                                                        <div *ngFor=\"let min of minutesList\"\r\n                                                        [class.selected]=\"min === selectedMinutes\"\r\n                                                        [class.disabled]=\"getSecondsFromTime(min + ':' + selectedSeconds) <= getSecondsFromTime(process.startTime)\"\r\n                                                        (click)=\"\r\n                                                           getSecondsFromTime(min + ':' + selectedSeconds) > getSecondsFromTime(process.startTime)\r\n                                                           && selectMinute(i,min,'endTime')\">\r\n                                                     {{ min }}\r\n                                                   </div>\r\n                                                   \r\n                                                    </div>\r\n                                                    <!-- Seconds List -->\r\n                                                    <div class=\"scroll-section seconds-scroll\">\r\n                                                        <div *ngFor=\"let sec of secondsList\"\r\n                                                        [class.selected]=\"sec === selectedSeconds\"\r\n                                                        [class.disabled]=\"getSecondsFromTime(selectedMinutes + ':' + sec) <= getSecondsFromTime(process.startTime)\"\r\n                                                        (click)=\"\r\n                                                           getSecondsFromTime(selectedMinutes + ':' + sec) > getSecondsFromTime(process.startTime)\r\n                                                           && selectSecond(i,sec,'endTime')\">\r\n                                                     {{ sec }}\r\n                                                   </div>\r\n                                                   \r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"!stepWiseProcess?.length\">\r\n                    <div *ngIf=\"(tableLoading | async) === 'loading'\"\r\n                        class=\"card row loader d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"(tableLoading | async) === 'loaded'\" class=\"row mt-2\">\r\n                        <div *ngIf=\"noData\" class=\"col-lg-12\">\r\n                            <div class=\"card-body my-8 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=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for the test</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"card mt-3 p-2\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span class=\"title-text mb-2\">History</span>\r\n        </h3>\r\n    </div>\r\n    <div class=\"card-body py-0 px-3\">\r\n        <div class=\"table-responsive border border-1 rounded-3\" *ngIf=\"historyData?.length\">\r\n            <table class=\"w-100 table bottom-border text-nowrap\">\r\n                <thead>\r\n                    <tr>\r\n                        <th class=\"text-start\">Audited By</th>\r\n                        <th>Audited Date</th>\r\n                        <th>Time Stamp</th>\r\n                        <th>View Logs</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let item of historyData\">\r\n                        <td>{{item.userName}}</td>\r\n                        <td>{{item.Date}}</td>\r\n                        <td>{{item.Time}}</td>\r\n                        <td (click)=\"viewHistoryModel(item)\" class=\"cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\"\r\n                                viewBox=\"0 0 20 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n\r\n        <div *ngIf=\"!historyData?.length\">\r\n            <div *ngIf=\"(historytableLoading | async) === 'loading'\"\r\n                class=\"card row loader d-flex justify-content-center align-items-center\">\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"stroke animate title\"></div>\r\n                        <div class=\"stroke animate link\"></div>\r\n                        <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"stroke animate title\"></div>\r\n                        <div class=\"stroke animate link\"></div>\r\n                        <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"(historytableLoading | async) === 'loaded'\" class=\"row mt-2\">\r\n                <div class=\"col-lg-12\">\r\n                    <div class=\"card-body my-8 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=\"nodata-title\">No data found</div>\r\n                        <div class=\"nodata-sub\">There is no result for the test</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<ng-template #viewHistory let-model>\r\n    <div class=\"p-5\">\r\n\r\n\r\n        <div class=\"card-body py-0 \">\r\n            <div class=\"my-2 d-flex\">\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\"\r\n                            height=\"46\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n                            <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                            <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                            <path\r\n                                d=\"M28 22V28L32 30M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n                                stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                    <span\r\n                        class=\"ms-3 pt-2 fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Audit\r\n                        History</span>\r\n            </div>\r\n            <div class=\"table-responsive\" *ngIf=\"historyData?.length\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th class=\"text-start\">Step-by-Step Process</th>\r\n                            <th>Status changed from</th>\r\n                            <th>Noted Time Range</th>\r\n                            <th>Reason for Error</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let item of viewHistoryData\">\r\n                            <td>{{item.processName}}</td>\r\n                            <td>\r\n                                <span *ngIf=\"item.AIStatus\" class=\"badge badge-light-success me-2\">Pass</span>\r\n                                <span *ngIf=\"!item.AIStatus\" class=\"badge badge-light-danger me-2\">Fail</span>\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"31\" height=\"8\" viewBox=\"0 0 31 8\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M30.3536 4.35355C30.5488 4.15829 30.5488 3.84171 30.3536 3.64645L27.1716 0.464466C26.9763 0.269204 26.6597 0.269204 26.4645 0.464466C26.2692 0.659728 26.2692 0.976311 26.4645 1.17157L29.2929 4L26.4645 6.82843C26.2692 7.02369 26.2692 7.34027 26.4645 7.53553C26.6597 7.7308 26.9763 7.7308 27.1716 7.53553L30.3536 4.35355ZM0 4.5H30V3.5H0V4.5Z\"\r\n                                        fill=\"#D0D5DD\" />\r\n                                </svg>\r\n                                <span *ngIf=\"item.auditedStatus\" class=\"badge badge-light-success ms-2\">Pass</span>\r\n                                <span *ngIf=\"!item.auditedStatus\" class=\"badge badge-light-danger ms-2\">Fail</span>\r\n                            </td>\r\n                            <td ><span class=\"badge badge-light-success\" *ngIf=\"item.startTime\">Noted Time Range : <span class=\"text-dark1\">{{item.startTime ? item.startTime:'--'}} - {{item.endTime}}</span></span></td>\r\n                            <td class=\"engage-text\">{{item.reason}}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header-card{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;color:var(--Black, #101828);font-size:18px;line-height:32px}.text-card{color:var(--Black, #101828);font-size:24px;line-height:32px}.bg-light-primary{border-bottom:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important}.sub-title{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.video-position{position:absolute;top:50%;transform:translateY(-50%)}.btn-success{border:1px solid var(--Success-700, #027A48)!important;background:var(--Success-700, #027A48)!important;box-shadow:0 1px 2px #1018280d!important}.btn.btn-success:hover:not(.btn-active),.btn.btn-success:active:not(.btn-active){border:1px solid var(--Success-700, #027A48)!important;background:var(--Success-700, #027A48)!important;box-shadow:0 1px 2px #1018280d!important}table tr{vertical-align:middle}table tr td{color:var(--Gray-500, #667085);font-size:14px!important;font-weight:500;line-height:20px}.custom-dropdown{position:relative;width:100%;padding:10px 16px;cursor:pointer;border-radius:8px;font-size:16px;font-weight:400;line-height:20px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Gray-50, #F9FAFB);box-shadow:0 1px 2px #1018280d}.dropdown-content{position:absolute;z-index:1;top:100%;left:0;border-radius:6px;width:100%;background:#fff;box-shadow:0 4px 6px #0000001a;display:flex}.dropdown-content1{position:absolute;z-index:1;bottom:100%;left:0;border-radius:6px;width:100%;background:#fff;box-shadow:0 4px 6px #0000001a;display:flex}.scroll-container{display:flex;width:100%}.scroll-container .item{width:100%;text-align:start}.scroll-container .items:hover,.scroll-container .tems.focus,.scroll-container .items.active{background:var(--Gray-50, #F9FAFB)}.label{position:absolute;top:-25%;color:var(--Gray-700, #344054);font-size:12px;line-height:18px}.scroll-section{width:50%;height:200px;overflow-y:auto;text-align:center;border-right:1px solid #ddd}.scroll-section:last-child{border-right:none}.scroll-section div{padding:8px;cursor:pointer}.scroll-section div.selected{background:#007bff;color:#fff}.bg-primary{border-radius:8px;background:var(--Primary-500, #33B5FF)!important}.bg-danger{background:var(--Primary-500, #D92D20)!important}.text-primary{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:500!important;line-height:18px!important}.text-primary1{color:var(--Primary-700, #009BF3)!important;font-size:12px!important;font-weight:500!important;line-height:18px!important;font-style:italic;text-overflow:ellipsis;max-width:200px;overflow:hidden}.text-select{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400;line-height:21.84px!important}.custom-tooltip-content{font-size:12px!important;text-align:left!important}::ng-deep .tooltip-inner{max-width:500px!important;white-space:normal}.test-dark1{color:var(--Success-700, #027A48)!important;text-align:center;font-size:12px!important;font-weight:500!important;line-height:18px}.engage-text{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-transform:capitalize}.disabled{pointer-events:none;opacity:.4;cursor:not-allowed}@media (min-width: 1920px) and (max-width: 2119px){.h-500px{height:600px!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i1$2.ActivatedRoute }, { type: EyeTestAuditService }, { type: i2$1.NgbModal }], propDecorators: { tooltipContent: [{
-                type: ViewChild,
-                args: ['tooltipContent']
-            }], viewHistory: [{
-                type: ViewChild,
-                args: ['viewHistory']
-            }] } });
-
-const routes = [
-    {
-        path: '',
-        component: EyeTestAuditComponent
-    },
-    {
-        path: 'start',
-        component: StartAuditComponent
-    }
-];
-class EyeTestAuditRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [RouterModule.forChild(routes)],
-                    exports: [RouterModule]
-                }]
-        }] });
-
-class EyeTestAuditModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditModule, declarations: [EyeTestAuditComponent,
-            StartAuditComponent,
-            EyeTestComponent,
-            ReactiveSelectComponent,
-            CustomSelectComponent,
-            GroupSelectComponent], imports: [CommonModule,
-            EyeTestAuditRoutingModule,
-            CommonSharedModule,
-            FormsModule,
-            ReactiveFormsModule,
-            NgxDaterangepickerMd,
-            NgbTooltipModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditModule, imports: [CommonModule,
-            EyeTestAuditRoutingModule,
-            CommonSharedModule,
-            FormsModule,
-            ReactiveFormsModule,
-            NgxDaterangepickerMd,
-            NgbTooltipModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EyeTestAuditModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        EyeTestAuditComponent,
-                        StartAuditComponent,
-                        EyeTestComponent,
-                        ReactiveSelectComponent,
-                        CustomSelectComponent,
-                        GroupSelectComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        EyeTestAuditRoutingModule,
-                        CommonSharedModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgxDaterangepickerMd,
-                        NgbTooltipModule
-                    ]
-                }]
-        }] });
-
-export { EyeTestAuditModule };
-//# sourceMappingURL=tango-app-ui-analyse-trax-eye-test-audit.module-Dy5v59Wb.mjs.map