@annalib/anna-core 4.2.3 → 4.2.5

package/src/lib/anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component.ts

@@ -0,0 +1,2064 @@
+
+// Angular import statements
+import { Component, OnInit, Input, ViewChildren, QueryList, Output, EventEmitter, SimpleChanges, OnChanges, ChangeDetectorRef, ElementRef, AfterViewChecked, ChangeDetectionStrategy } from '@angular/core';
+
+// Third party import statements
+import moment from "moment";
+import { Options } from '@angular-slider/ngx-slider';
+import { cloneDeep, isEqual, map, uniq, sortBy } from "lodash-es";
+
+
+//sub-entries of anna lib import statement
+import { IGtGeneralConfig, IGtTableHeader, IHeaderInfo, ITotalRowInfo } from '../../../anna-core-shared-lib/models/anna-non-editable-gt-models';
+import { AnnaDateTimeFormatService, NgbDateType } from '../../../anna-core-shared-lib/services/anna-date-time-format.service';
+import { IWeekCalendar } from '../../../anna-core-shared-lib/models/anna-global-dropdown-config.model';
+import { GtColumnIconEmittedData, RatingSellerGroupHierarchy,  } from '../../../anna-core-shared-lib/models/anna-generic-data-type.model';
+import { SortType } from '../../../anna-core-shared-lib/models/anna-sort.model';
+import { radioButtonModel, TooltipModel } from '../../../anna-core-shared-lib/models/anna-tooltip.model';
+import { AnnaSortService } from '../../../anna-core-shared-lib/services/anna-sort.service';
+import { AnnaFilterService } from '../../../anna-core-shared-lib/services/anna-filter.service';
+import { AnnaGenericTableService } from '../../../anna-core-shared-lib/services/anna-generic-table.service';
+import { BehaviorSubject } from 'rxjs';
+
+
+@Component({
+  selector: 'anna-core-non-editable-generic-table-lib',
+  templateUrl: './anna-non-editable-generic-table.component.html',
+  styleUrls: ['./anna-non-editable-generic-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AnnaNonEditableGenericTableComponent implements OnInit, OnChanges, AfterViewChecked {
+
+  @Input() showSkeletonLoading: boolean;
+  @Input() tableHeaders: IGtTableHeader[];
+  @Input() tableData: any[];
+  @Input() clonedTableData: any[];
+  @Input() numberOfSkeletonRows: number[];
+  @Input() numberOfSkeletonColumns: number[][];
+  @Input() gtGeneralConfig: IGtGeneralConfig;
+  @Input() totalRowInfo?: ITotalRowInfo[];
+  @Input() gtDimension: { rowHeight: number, tableHeight: string, headerHeight: number };
+  @Input() tableClass: string;
+  @Input() maximumRowsWhichCanBeRenderedWithoutScroll: number = 5;
+  @Input() limit: number = 30; 
+  @Input() includeBorderInTableHeight: boolean = true; 
+  @Input() downloadInProgress: boolean;
+  @Input() percentDone: number;
+  @Input() starredInProgress: boolean;
+
+  @Output() toggleCheckbox = new EventEmitter();
+  @Output() toggleRowCheckbox = new EventEmitter();
+  @Output() toggleHeaderCheckbox = new EventEmitter();
+  @Output() undoIconClicked = new EventEmitter();
+  @Output() filterAppliedToTable = new EventEmitter();
+  @Output() sortingAppliedToTable = new EventEmitter();
+  @Output() rowClicked = new EventEmitter();
+  @Output() radioButtonSelected = new EventEmitter();
+  @Output() columnFilterOpened = new EventEmitter();
+  @Output() columnFilterClosed = new EventEmitter();
+  @Output() gtIconClicked = new EventEmitter();
+  @Output() gtSVGIconClicked = new EventEmitter();
+  @Output() gtTextActionClicked = new EventEmitter();
+  @Output() gtViewDetailClicked = new EventEmitter();
+  @Output() downloadSpotDetails = new EventEmitter();
+
+
+  tableDataWrapper: any[];
+  rowChecked: boolean;
+  isAllRowsChecked: boolean;
+  noDataWidth: string = "55%";
+  markedForCreditStatus: string;
+  markedForMGStatus: string;
+
+  //Sort and Filter
+  toolTipdata: any;
+  tempTooltipData: any;
+  tooltipRadioTextMap: Map<any, any>;
+  filterTabObjects: any[];
+  tooltip: any;
+  clonedTooltipData: any;
+  clonedTooltipSelectedMapData: any;
+  searchBar: string;
+  disableClearAllBtn: boolean = true;
+  disableColumnClearAllBtn: boolean = true;
+  allSelected = 0;
+  showAll: boolean;
+  disableCheckboxApply: boolean;
+  disableSliderApplyButton: boolean;
+  disableTimeApplyButton: boolean;
+
+  // Slider Filter
+  sliderMinValue: number;
+  sliderMaxValue: number;
+  options: Options = {
+    floor: 0,
+    ceil: 0,
+    step: 0.1
+  };
+  sliderValue: { min: number, max: number };
+  sliderFilterTextBoxStep: string;
+  sliderEnteredMinValue: number;
+  sliderEnteredMaxValue: number;
+
+  // Calendar Filter
+  calendarMinEnabledDate: NgbDateType;
+  calendarMaxEnabledDate: NgbDateType;
+  selectedMinDate: NgbDateType;
+  selectedMaxDate: NgbDateType;
+
+  //Week Filter
+  multiWeekPickerConfig: IWeekCalendar;
+
+  //Time Filter
+  selectedFromTime: any[];
+  selectedToTime: any[];
+  clonedSelectedFromTime: any;
+  clonedSelectedToTime: any;
+  disableTimeFilterApplyBtn: boolean;
+  tableColumns: string[] = [];
+  totalRowColumns: string[] = null;
+  showMultiTimeCheckbox: boolean;
+  showZeroTimeCheckbox: boolean;
+  showEnterTimeCheckbox: boolean;
+  multiTimeCheckboxChecked: boolean;
+  zeroTimeCheckboxChecked: boolean;
+  enterTimeCheckboxChecked: boolean;
+  bindValueFuncCalled: boolean;
+
+  hierarchyTooltip: { open: () => void; close: () => void; };
+  sellerGroupHierarchy: RatingSellerGroupHierarchy[];
+  showFilterTooltipTabs: boolean; //Change the Name
+
+  isScrolledLeft: boolean = false;
+  rowBorderWidth: number = 2;
+  
+  showSortComponent: boolean = false;
+  showFilterComponent: boolean = false;
+  tempSortOrder: SortType = null;
+    
+  tooltipOptions: TooltipModel[];
+  clonedTooltipOptions: TooltipModel[];
+  disableSelectAll: boolean;
+  disableClearAll: boolean;
+  searchItem: string;
+
+  disableCalendarApplyBtn: boolean;
+  calendarSelection: any = {fromDate: null , toDate: null};
+
+  showSliderMinValueError: boolean;
+  showSliderMaxValueError: boolean;
+  isMinTextBoxEmpty: boolean;
+  isMaxTextBoxEmpty: boolean;
+  selectedLabel: string;
+
+  startTimeHourErr: boolean;
+  startTimeMinErr: boolean;
+  endTimeHourErr: boolean;
+  endTimeMinErr: boolean;
+
+  sameTooltipClicked: boolean;
+  marginTop: string = "";
+  @ViewChildren('tableHeader') viewChildTableHeaders: QueryList<ElementRef>;
+
+  selectedCheckboxOptionsCount: number;
+  isFilterChanged: boolean;
+  isSortChanged: boolean;
+  isDifferenceLessThan25Percent: boolean;
+  incorrectSliderInput: boolean;
+  start: number = 0;
+  end: number = this.limit + this.start;
+  renderedData: any[]; 
+  selectedInventoryIdForDownload: number;
+  selectedDemographicForDownload: any;
+  selectedRowTypeForDownload: string;
+  heightOfCheckboxTooltipFilter: number;
+  isNoDataToDisplaySubject$ = new BehaviorSubject<boolean>(false);
+  selectedStarredOrderId: string;
+  
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    private annaSortService: AnnaSortService,
+    public annaDateTimeFormatService: AnnaDateTimeFormatService,
+    public annaFilterService: AnnaFilterService,
+    private annaGenericTableService: AnnaGenericTableService
+  ) {
+    this.setTooltipRadioNames();
+  }
+  
+  ngAfterViewChecked(): void {
+    if(this.gtGeneralConfig.component && this.gtGeneralConfig.component.includes("ORDER_LISTING") || this.gtGeneralConfig.component == "DRRLISTING"){
+      this.setMarginLeftForFilterIcon();
+    }    
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.showSkeletonLoading) {
+      this.tableData = this.numberOfSkeletonColumns;
+      this.renderedData = this.numberOfSkeletonColumns;
+      this.isNoDataToDisplaySubject$.next(false);
+      this.annaFilterService.initialValueMap = new Map();
+    }
+    else if(changes["percentDone"] || changes["downloadInProgress"] || ( changes["starredInProgress"] && changes["starredInProgress"].currentValue != undefined )){
+      console.log("do nothing");
+    }
+    else {
+      this.setInitialRowsForTable();
+      this.disableEnableEachColumnTooltipIcon();
+      this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
+      if(this.tableData && this.tableData.length == 0){
+        this.tableData = Array(2).fill(0);
+        this.renderedData = cloneDeep(this.tableData);
+        this.marginTop = (- this.gtDimension.rowHeight - (this.gtDimension.rowHeight/2)) + 'px';
+        this.isNoDataToDisplaySubject$.next(true);
+      }
+      else{
+        this.isNoDataToDisplaySubject$.next(false);
+      }
+
+      this.showSkeletonLoading = false;
+    }
+
+    //setting table column here as well because while showing skeleton loader, we should show table headers.
+    if (changes['tableHeaders'] && !isEqual(changes['tableHeaders'].currentValue, changes['tableHeaders'].previousValue)) {
+      this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
+      this.annaSortService.columnSortState = new Map();
+      this.setColumnSortStateMap();
+      this.setActiveStateObject();
+    }
+
+    if (changes['totalRowInfo'] && changes['totalRowInfo'].currentValue) {
+      this.totalRowColumns = this.totalRowInfo.map(x => x.colName);
+    }
+    this.cdRef.detectChanges();
+  }
+
+
+  trackByFn(index: number) {
+    return index;
+  }
+
+  setTooltipRadioNames() {
+    this.tooltipRadioTextMap = new Map();
+    this.tooltipRadioTextMap.set("StartTimeForFilter", "Start Time");
+    this.tooltipRadioTextMap.set("EndTimeForFilter", "End Time");
+    this.tooltipRadioTextMap.set("start_time_for_filter", "Start Time");
+    this.tooltipRadioTextMap.set("end_time_for_filter", "End Time");
+    this.tooltipRadioTextMap.set("primaryAEName", "Primary AE");
+    this.tooltipRadioTextMap.set("region", "Region");
+    this.tooltipRadioTextMap.set("agencyName", "Agency");
+    this.tooltipRadioTextMap.set("location", "Location");
+    this.tooltipRadioTextMap.set("advertiserName", "Advertiser");
+    this.tooltipRadioTextMap.set("productCode", "Product Category");
+    this.tooltipRadioTextMap.set("flightStartDate", "Start Date");
+    this.tooltipRadioTextMap.set("flightEndDate", "End Date");
+    this.tooltipRadioTextMap.set("orderIdAndRevNumber", "STN Order#-Rev#");
+    this.tooltipRadioTextMap.set("alternateOrderId", "Alt/Rep Order #");
+    this.tooltipRadioTextMap.set("grp", "GRP");
+    this.tooltipRadioTextMap.set("cpp", "CPP");
+    this.tooltipRadioTextMap.set("imps", "IMPS");
+    this.tooltipRadioTextMap.set("cpm", "CPM");
+    this.tooltipRadioTextMap.set("offeredMGs", "Offered MG");
+    this.tooltipRadioTextMap.set("outstandingPE", "O/S PE");
+    this.tooltipRadioTextMap.set("offeredADUs", "Offered ADUs");
+    this.tooltipRadioTextMap.set("udDeficitValue", "O/S Aud Delta");
+    this.tooltipRadioTextMap.set("startEndTimeMulti", "Time");
+    this.tooltipRadioTextMap.set("bookedValue", "Booked");
+    this.tooltipRadioTextMap.set("bookedSpots", "Spots");
+    this.tooltipRadioTextMap.set("userChanges", "User Changes");
+    this.tooltipRadioTextMap.set("buyerChanges", "Buyer Changes");
+    this.tooltipRadioTextMap.set("userMG", "User MG");
+    this.tooltipRadioTextMap.set("userADUs", "User ADUs");
+    this.tooltipRadioTextMap.set("inventoryCode", "Inventory Code");
+    this.tooltipRadioTextMap.set("program", "Program");
+    this.tooltipRadioTextMap.set("agency", "Agency");
+    this.tooltipRadioTextMap.set("advertiser", "Advertiser");
+    this.tooltipRadioTextMap.set("startDate", "Start Date");
+    this.tooltipRadioTextMap.set("endDate", "End Date");
+    this.tooltipRadioTextMap.set("rcvPreempt", "$ Madegood PEs");
+    this.tooltipRadioTextMap.set("osPreempt", "$ O/S PEs");
+    this.tooltipRadioTextMap.set("rcvUnderDly", "Recovered UD");
+    this.tooltipRadioTextMap.set("osUnderDly", "O/s Under Dly");
+    this.tooltipRadioTextMap.set("primaryAe", "Primary AE");
+    this.tooltipRadioTextMap.set("region", "Region");
+    this.tooltipRadioTextMap.set("revCode1", "Rev code 1");
+    this.tooltipRadioTextMap.set("orderNoRevNo", "STN Order#-Rev#");
+    this.tooltipRadioTextMap.set("revCode2", "Rev code 2");
+    this.tooltipRadioTextMap.set("revCode3", "Rev code 3");
+    this.tooltipRadioTextMap.set("booked", "$ Booked");
+    this.tooltipRadioTextMap.set("spots", "Spots");
+    this.tooltipRadioTextMap.set("postedAudPercent", "Posted %");
+    this.tooltipRadioTextMap.set("revision", "Revision");
+    this.tooltipRadioTextMap.set("buyerOrderId", "ALT/REP Order#");
+    this.tooltipRadioTextMap.set("demo","Demo");
+    this.tooltipRadioTextMap.set("postedAdu","$ Posted ADUs");
+    this.tooltipRadioTextMap.set("scheduledAdu","$ Scheduled ADUs");
+    this.tooltipRadioTextMap.set("audienceDeficit","$ O/S Audience");
+    this.tooltipRadioTextMap.set("postedAudPercent","Posted Audience %");
+    this.tooltipRadioTextMap.set("potentialUnitsValue","POT Units");
+    this.tooltipRadioTextMap.set("bookedUnitsValue","Booked Units");
+    this.tooltipRadioTextMap.set("bookedAmountWithZeroRatingValue","Total $ Booked");
+    this.tooltipRadioTextMap.set("bookedAmountPercentageWithZeroRatingValue","% Against All Demos");
+    this.tooltipRadioTextMap.set("bookedAmountWithoutZeroRatingValue","$Booked With Imps(’000)");
+    this.tooltipRadioTextMap.set("bookedAmountPercentageWithoutZeroRatingValue", "% Against All Demos");
+    
+    this.tooltipRadioTextMap.set("totalBookedAmountValue","Total $Booked");
+    this.tooltipRadioTextMap.set("averageUnitRateValue","AUR");
+    this.tooltipRadioTextMap.set("totalBookedAmountWithRatingValue", "$Booked With Rating");
+    this.tooltipRadioTextMap.set("averageUnitRateWithRatingValue", "AUR With Rating");
+    
+    this.tooltipRadioTextMap.set("totalBookedAmountWithImpressionValue", "$Booked With IMPS");
+    this.tooltipRadioTextMap.set("averageUnitRateWithImpressionValue", "AUR With IMPS");
+    
+    this.tooltipRadioTextMap.set("bookedUnitsWithRatingValue", "Booked Units With Rating");
+    this.tooltipRadioTextMap.set("postedUnitsWithRatingValue", "Posted Units With Rating");
+    
+    this.tooltipRadioTextMap.set("bookedUnitsWithImpressionValue", "Booked Units With IMPS");
+    this.tooltipRadioTextMap.set("postedUnitsWithImpressionValue", "Posted Units With IMPS");
+    
+    this.tooltipRadioTextMap.set("bookedRatings", "Booked Rating");
+    this.tooltipRadioTextMap.set("postedRatings", "Posted Rating");
+    
+    this.tooltipRadioTextMap.set("bookedImpressions", "Booked IMPS");
+    this.tooltipRadioTextMap.set("postedImpressions", "Posted IMPS");
+    
+    this.tooltipRadioTextMap.set("bookedAverageRating", "Booked AVG Rating");
+    this.tooltipRadioTextMap.set("postedAverageRating", "Posted AVG Rating");
+    
+    this.tooltipRadioTextMap.set("bookedAverageImpression", "Booked AVG IMPS");
+    this.tooltipRadioTextMap.set("postedAverageImpression", "Posted AVG IMPS");
+    
+    this.tooltipRadioTextMap.set("bookedCppValue", "Booked CPP");
+    this.tooltipRadioTextMap.set("bookedEffectiveCppValue", "Effective CPP");
+    
+    this.tooltipRadioTextMap.set("bookedCpmValue", "Booked CPM");
+    this.tooltipRadioTextMap.set("bookedEffectiveCpmValue", "Effective CPM");
+    
+    this.tooltipRadioTextMap.set("orderSource","Order Source");
+    this.tooltipRadioTextMap.set("orderCategory","Category");
+    this.tooltipRadioTextMap.set("cashOrTrade","C/T");
+    
+  }
+
+  generateTableDataWrapper() {
+    this.showSkeletonLoading = true;
+    this.tableDataWrapper = [];
+    let rowObject: any;
+    let columnName: string;
+    let columnObject: { [x: string]: any; };
+    let columnObjectKey;
+    let keysUsedForTableDisplay: string[];
+    let keysUsedForColumn: string[];
+    let additionalInfoObject: { [x: string]: any; };
+    let additionalKeys;
+    this.tableData.forEach((obj: { [x: string]: any; }) => {
+      rowObject = {};
+      keysUsedForTableDisplay = [];
+      for (var colNum in this.tableHeaders) {
+        columnObject = {};
+        if (!this.tableHeaders[colNum].visible) {
+          continue;
+        }
+        columnName = "";
+        keysUsedForColumn = [];
+        this.tableHeaders[colNum].headerInfo.forEach((header) => {
+          if (header.typeOfBodyData === "STRING") {
+            columnObjectKey = header.objectKey;
+            columnObject[columnObjectKey] = obj[columnObjectKey];
+            keysUsedForTableDisplay.push(columnObjectKey);
+            keysUsedForColumn.push(columnObjectKey);
+          }
+          else if (header.typeOfBodyData === "ICON") {
+            columnObjectKey = header.typeOfBodyData;
+            columnObject[columnObjectKey] = obj[header.objectKey];
+            keysUsedForColumn.push(header.objectKey);
+          }
+          else if (header.typeOfBodyData === "CHECKBOX") {
+            columnObjectKey = header.typeOfBodyData;
+            columnObject[columnObjectKey] = obj[header.objectKey];
+            keysUsedForColumn.push(header.objectKey);
+          }
+        })
+        for (var i = 0; i < keysUsedForColumn.length; i++) {
+          columnName += keysUsedForColumn[i];
+          if (i !== keysUsedForColumn.length - 1) {
+            columnName += ',';
+          }
+        }
+        rowObject[columnName] = columnObject;
+      }
+      additionalInfoObject = {};
+      additionalKeys = Object.keys(obj).filter(key => !keysUsedForTableDisplay.includes(key));
+      additionalKeys.forEach(key => {
+        additionalInfoObject[key] = obj[key];
+      })
+      rowObject.AdditionalInfo = additionalInfoObject;
+      this.tableDataWrapper.push(rowObject);
+    })
+    this.tableData = this.tableDataWrapper;
+    this.showSkeletonLoading = false;
+  }
+
+
+  selectOrUnselectCheckbox(rowData: any, columnKeys: any, isCheckboxSelected: any) {
+    this.toggleCheckbox.emit({ rowData, columnKeys, isCheckboxSelected });
+  }
+
+  selectUnselectAllRows() {
+    this.toggleHeaderCheckbox.emit();
+  }
+
+  selectUnselectRow(rowData: any) {
+    this.toggleRowCheckbox.emit(rowData);
+  }
+
+  undoCreditedSpot(data: any) {
+    this.undoIconClicked.emit({ data, mgOrCredit: "Credit" });
+  }
+
+  undoMgSpot(data: any) {
+    this.undoIconClicked.emit({ data, mgOrCredit: "MakeGood" });
+  }
+
+  //Sort and Filter Logic begins!
+  closeTooltip() {
+    if (this.tooltip && this.tooltip.isOpen()) {
+      this.tooltip.close();
+    }
+    this.tooltip = null;
+    this.disableCheckboxApply = false;
+    if (!this.bindValueFuncCalled) {
+      this.columnFilterClosed.emit();
+    }
+  }
+
+  isTooltipActive(header: any[]) {
+    return this.annaFilterService.isTooltipActive(header,this.annaSortService.columnSortState);
+  }
+
+  bindTheValueToToolTip(tooltip: any, header: IHeaderInfo) {
+
+    this.bindValueFuncCalled = true;
+    let containerToScroll;
+    if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "DRRLISTING") {
+      containerToScroll = document.getElementsByClassName("scrollable-container")[0];
+      var mediaQuery = window.matchMedia("(max-width: 1366px)");
+      if (mediaQuery.matches) {
+        containerToScroll.scroll(0, this.gtGeneralConfig.verticalScrollOffsetForFilterTooltip);
+      }
+    }
+    
+    // if same tooltip opened close it
+    if (tooltip == this.tooltip) {
+      this.bindValueFuncCalled = false;
+      this.closeTooltip();
+    }
+    else {
+      let enabledHeaders: any[] = [];
+      this.checkIfUniqueValuePresentForTheHeader(header,enabledHeaders);
+      this.openTooltip(tooltip, enabledHeaders,header);
+
+      if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header.filterSortObjectKeys[0])) {
+        this.columnFilterOpened.emit();
+      }
+
+      this.showFilterTooltipTabs = header.filterSortObjectKeys.length > 1;
+      let activeTab = this.filterTabObjects[0];
+      this.populateTooltipDataBasedOnSelectedRadio(activeTab);
+      this.bindValueFuncCalled = false;
+    }
+  }
+
+  checkIfUniqueValuePresentForTheHeader(header: IHeaderInfo, enabledHeaders: any[]){
+    header.filterSortObjectKeys.forEach((item: string | number) => {
+      if(item == "period"){
+          let uniqStartDate = uniq(this.tableData.map((u: { [x: string]: any; }) => u["startDate"]));
+          let uniqEndDate = uniq(this.tableData.map((u:{ [x: string]: any; }) => u["endDate"]));
+          if(uniqStartDate.length > 1 || uniqEndDate.length > 1 || this.isTooltipActive([item])){
+            enabledHeaders.push(item);
+          }
+      }
+      else if(uniq(this.tableData.map((u:{ [x: string]: any; }) => u[item])).length > 1 || this.isTooltipActive([item])){
+          enabledHeaders.push(item);
+      }
+    });
+  }
+
+  openTooltip(tooltip: any,header: any, columnHeader: IHeaderInfo) {
+    this.closeTooltip();
+    this.tooltip = tooltip;
+    this.tooltip.open();
+    //convert key into the header
+    this.filterTabObjects = header.map((key: string,index: number) => {
+      let value = this.tooltipRadioTextMap.has(key)
+        ? this.tooltipRadioTextMap.get(key)
+        : key; //change to display name
+      return new radioButtonModel(key, value, columnHeader.isSortRequired[index], columnHeader.isFilterRequired[index]);
+    });
+  }
+
+  clearColumnFilter() {
+    this.annaFilterService.clearColumnFilter();
+    this.closeTooltip();
+    this.tableData = cloneDeep(this.annaFilterService.filterData(this.clonedTableData, ""));
+    this.annaSortService.noSortingAppliedData = this.tableData;
+    this.checkIfSortingIsApplied();
+    this.filterAppliedToTable.emit(this.tableData);
+    this.disableEnableEachColumnTooltipIcon();
+    this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    this.cdRef.detectChanges();
+  }
+
+  populateTooltipDataBasedOnSelectedRadio(activeTab: radioButtonModel) {
+
+    let header = activeTab.key;
+    this.selectedLabel = activeTab.label;
+    this.showSortComponent = false;
+    this.showFilterComponent = false;
+    this.searchItem = null;
+    
+    this.showSortComponent = activeTab.isSortRequired;
+    this.showFilterComponent = activeTab.isFilterRequired;
+    this.tempSortOrder = null;
+    this.isFilterChanged = false;
+    this.isSortChanged = false;
+    
+    this.annaFilterService.selectedRadio = header;
+    this.disableActiveFilterClearButton();
+    
+    this.createFilterTooltipData(header);
+    
+  }
+
+  createFilterTooltipData(header: string){
+    if(this.showFilterComponent){
+      this.disableSliderApplyButton = this.disableCheckboxApply = true;
+      this.disableCalendarApplyBtn = this.disableTimeFilterApplyBtn = true;
+      
+      if (this.annaFilterService.calendarSet.has(header)) {
+        this.getCalendarData();
+      } else if (this.annaFilterService.sliderSet.has(header)) {
+        this.getSliderData(header);
+      } else if (this.annaFilterService.timeSet.has(header)) {
+        this.getTimeFilterData(header);
+      } else {
+        this.getCheckboxData(header);
+      }
+    }
+    else if(this.showSortComponent){
+      this.disableSliderApplyButton = this.disableCheckboxApply = true;
+      this.disableCalendarApplyBtn = this.disableTimeFilterApplyBtn = true;
+    }
+  }
+
+  disableActiveFilterClearButton(){
+    let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
+    let isSortPresent = (this.annaSortService.columnSortState.size > 0 && this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio) != "DEFAULT");
+    this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
+  }
+
+  getSliderData(header: string) {
+    
+    this.createOptionsForSlider(header);
+    this.setSelectedRangeForSlider(header);
+  }
+
+  createOptionsForSlider(header: string){
+
+    let translateFunc;
+    this.incorrectSliderInput = false;
+    this.sliderEnteredMaxValue = this.sliderEnteredMinValue = null;
+    this.showSliderMinValueError = this.showSliderMaxValueError = this.isMinTextBoxEmpty = this.isMaxTextBoxEmpty = false;
+
+    if (this.annaFilterService.sliderCurrencySet.has(header)) {
+      translateFunc = "currency";
+    }
+    else if(header == "postedAudPercent"){
+      translateFunc = "percent";
+    }
+    else {
+      translateFunc = "normal";
+    }
+
+    let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    let minValue = this.annaFilterService.returnMaxAndMinValue(optionsData, header, true);
+    let maxValue = this.annaFilterService.returnMaxAndMinValue(optionsData, header, false);
+
+    let obj = this.annaFilterService.setOptionValues(minValue,maxValue);
+
+    if (translateFunc === "normal") {
+        obj.translate = this.annaFilterService.normalTranslateFunction;
+    } else if (translateFunc === "percent") {
+        obj.translate = this.annaFilterService.percentTranslateFunction;
+    } else if (translateFunc === "currency") {
+        obj.translate = this.annaFilterService.currencyTranslateFunction;
+    }
+
+    this.options = obj;
+    this.options.step = 1;
+    this.sliderFilterTextBoxStep = "1";
+    if (header !== "WeekNumber") {
+      this.options.step = 0.1;
+      this.sliderFilterTextBoxStep = "0.1";
+    }
+  }
+
+  setSelectedRangeForSlider(header: string){
+    if(this.annaFilterService.tooltipSelectedMap.has(header)){
+      let selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+      this.sliderMinValue = selectedObj.min < this.options.floor ? this.options.floor : selectedObj.min;
+      this.sliderMaxValue = selectedObj.max < this.options.ceil ? selectedObj.max : this.options.ceil;
+      this.sliderEnteredMinValue = this.sliderMinValue;
+      this.sliderEnteredMaxValue = this.sliderMaxValue;   
+    }
+    else{
+        this.sliderMinValue = this.options.floor;
+        this.sliderMaxValue = this.options.ceil;
+    }
+    this.sliderEnteredMinValue = this.sliderMinValue;
+    this.sliderEnteredMaxValue = this.sliderMaxValue;
+  }
+
+
+  getCheckboxData(header: string) {
+
+    let tooltipOptions = this.createListForCheckboxFilter(header);    
+    let selectedItems = sortBy(tooltipOptions.filter(item => item.isSelected),"label");
+    let unselectedItems = sortBy(tooltipOptions.filter(item => !item.isSelected),"label");
+        
+    this.clonedTooltipOptions = [...selectedItems, ...unselectedItems];
+
+    this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
+    
+    let margin = 5;
+    let dataLength = this.tooltipOptions.length;
+    this.heightOfCheckboxTooltipFilter = dataLength > 6 ? 200 : ((26.03 * dataLength) + (margin * dataLength) + margin);
+    
+    this.disableSelectAll = unselectedItems.length == 0;
+    this.disableClearAll = selectedItems.length == 0;
+    this.selectedCheckboxOptionsCount = selectedItems.length;
+  }
+
+  createListForCheckboxFilter(header: string){
+    let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    let uniqOptionData = uniq(optionData.map(item => item[header]));
+    let tooltipOptions = uniqOptionData.map((item,index) => new TooltipModel(item,index+1));
+
+    this.selectUnselectListCheckbox(tooltipOptions,header);
+    let index = tooltipOptions.findIndex(item => item.value == null);
+    
+    if(index != -1){
+      tooltipOptions[index].label = "(Blank)";
+    }
+
+    return tooltipOptions;
+  }
+
+  selectUnselectListCheckbox(tooltipOptions: TooltipModel[],header: string){
+    
+    if(this.annaFilterService.tooltipSelectedMap.has(header)){
+      let selectedValueSet = new Set(this.annaFilterService.tooltipSelectedMap.get(header));
+      tooltipOptions.forEach(item => item.isSelected = selectedValueSet.has(item.value) ? true : false);
+    }
+    else{
+      tooltipOptions.forEach(item => item.isSelected = true);
+    }
+
+  }
+
+  getCalendarData() {
+    const parsingFormat = "MM/DD/YYYY";
+    let minMaxDate = this.createRangeForTheDateFilter();
+    this.selectRangeForTheDateFilter(minMaxDate, parsingFormat);
+  }
+
+  createRangeForTheDateFilter(){
+    
+    let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    
+    let minMaxDate;
+    //When you want to use startDate and endDate combined as single column then use Period.
+    if(this.annaFilterService.selectedRadio == "period"){
+      minMaxDate = this.createStartEndDateRange(optionData);
+    }
+    else{
+      minMaxDate = this.annaFilterService.returnMinAndMaxDate(optionData, this.annaFilterService.selectedRadio);  
+    }
+    
+    return minMaxDate;
+
+  }
+
+  createStartEndDateRange(optionData: any[]){
+    let minStartDate = this.annaFilterService.returnMinAndMaxDate(optionData, "startDate");
+    let maxEndDate = this.annaFilterService.returnMinAndMaxDate(optionData,"endDate");
+    return [minStartDate[0],maxEndDate[1]];
+  }
+
+  selectRangeForTheDateFilter(minMaxDate: any[], parsingFormat: string){
+    this.calendarMinEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[0],parsingFormat);
+    this.calendarMaxEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[1],parsingFormat);
+    
+    
+    if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+        let selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        
+        if(selectedDateObj.fromDate.isAfter(minMaxDate[0])){
+            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.fromDate,parsingFormat);
+        }
+        else{
+            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[0],parsingFormat);
+        } 
+
+        if(selectedDateObj.toDate.isAfter(minMaxDate[1])){
+            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[1],parsingFormat);
+        }
+        else{
+            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.toDate,parsingFormat);
+        }
+
+    }
+    else{
+       this.selectedMinDate = cloneDeep(this.calendarMinEnabledDate);
+       this.selectedMaxDate = cloneDeep(this.calendarMaxEnabledDate);
+    }
+
+    this.calendarSelection.fromDate = cloneDeep(this.selectedMinDate);
+    this.calendarSelection.toDate = cloneDeep(this.selectedMaxDate);
+
+    
+  }
+
+  getTimeFilterData(header: string): void {
+    
+    this.startTimeHourErr = this.startTimeMinErr = this.endTimeHourErr = this.endTimeMinErr = false;    
+
+    if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+      this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
+      this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
+    } else {
+      this.setInitialValueMapForTimeFilter(header);
+      this.selectedFromTime = this.annaFilterService.initialValueMap.get(header).fromTime;
+      this.selectedToTime = this.annaFilterService.initialValueMap.get(header).toTime;
+    }
+
+    if(this.selectedFromTime != undefined || this.selectedToTime != undefined) {
+      this.selectedFromTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedFromTime, true);
+      this.selectedToTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedToTime, true);
+
+      this.clonedSelectedFromTime = cloneDeep(this.selectedFromTime);
+      this.clonedSelectedToTime = cloneDeep(this.selectedToTime);
+    }
+    else {
+      this.selectedFromTime = ["-", "-", "-"];
+      this.selectedToTime = ["-", "-", "-"];
+    }
+
+    if(this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
+      this.setTimeFilterDataForComponentsOtherThanRatingsPage(header);
+    }
+    else if(this.gtGeneralConfig.component === "RATING"){
+      this.setTimeFilterDataForRatingPageComponent(header);
+    }
+  }
+
+  //Need to change this method
+  setTimeFilterDataForComponentsOtherThanRatingsPage(header: string){
+    this.showMultiTimeCheckbox = false;
+    this.showZeroTimeCheckbox = false;
+    this.showEnterTimeCheckbox = false;
+    this.multiTimeCheckboxChecked = false;
+    this.zeroTimeCheckboxChecked = false;
+    this.enterTimeCheckboxChecked = false;
+
+
+    let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    let selectedObj;
+
+    if(this.annaFilterService.tooltipSelectedMap.has(header)){
+      selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+    }
+    else{
+      selectedObj = this.annaFilterService.initialValueMap.get(header);
+    }
+
+    if(optionsData.findIndex(obj => obj[header] == "0") != -1) {
+      this.showZeroTimeCheckbox = true;
+      this.zeroTimeCheckboxChecked = selectedObj.includeZeroTime;
+    }
+    
+    
+    if(optionsData.findIndex(obj => obj[header] == "<multi>") != -1) {
+      this.showMultiTimeCheckbox = true;
+      this.multiTimeCheckboxChecked = selectedObj.includeMulti;
+    }
+    
+
+    if(this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+      this.showEnterTimeCheckbox = true;
+    }
+    
+    if(optionsData.findIndex(obj => obj[header] != "<multi>" && obj[header] != "0") != -1) {
+      this.enterTimeCheckboxChecked = selectedObj.includeTimeRange;
+    }
+  }
+
+  setTimeFilterDataForRatingPageComponent(header: string){
+      this.showMultiTimeCheckbox = false;
+      this.showZeroTimeCheckbox = false;
+      this.showEnterTimeCheckbox = false;
+      this.multiTimeCheckboxChecked = false;
+      this.zeroTimeCheckboxChecked = false;
+      this.enterTimeCheckboxChecked = false;
+
+      let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+      let selectedObj;
+
+      if(this.annaFilterService.tooltipSelectedMap.has(header)){
+        selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+      }
+      else{
+        selectedObj = this.annaFilterService.initialValueMap.get(header);
+      }
+
+      if(optionsData.findIndex(obj => obj[header][0] == "0") != -1) {
+        this.showZeroTimeCheckbox = true;
+        this.zeroTimeCheckboxChecked = selectedObj.includeZeroTime;
+      }
+      
+      
+      if(optionsData.findIndex(obj => obj[header][0] == "<multi>") != -1) {
+        this.showMultiTimeCheckbox = true;
+        this.multiTimeCheckboxChecked = selectedObj.includeMulti;
+      }
+      
+
+      if(this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+        this.showEnterTimeCheckbox = true;
+      }
+      
+      if(optionsData.findIndex(obj => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1) {
+        this.enterTimeCheckboxChecked = selectedObj.includeTimeRange;
+      }
+  }
+
+  selectOrUnselectMultiTimeCheckbox() {
+    this.multiTimeCheckboxChecked = !this.multiTimeCheckboxChecked;
+    this.disableTimeFilterApplyButton();
+  }
+
+  selectOrUnselectZeroTimeCheckbox() {
+    this.zeroTimeCheckboxChecked = !this.zeroTimeCheckboxChecked;
+    this.disableTimeFilterApplyButton();
+  }
+
+  selectOrUnselectEnterTimeCheckbox() {
+    this.enterTimeCheckboxChecked = !this.enterTimeCheckboxChecked;
+    this.disableTimeFilterApplyButton();
+  }
+
+  
+  selectUnselectCheckbox(data: TooltipModel) {
+    data.isSelected = !data.isSelected;
+    let index = this.clonedTooltipOptions.findIndex(item => item.id == data.id);
+    this.clonedTooltipOptions[index].isSelected = data.isSelected;
+        
+    let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
+    let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
+
+    this.disableClearAll =  selectedItems.length == 0;
+    this.disableSelectAll = unselectedItems.length == 0;
+    this.selectedCheckboxOptionsCount = selectedItems.length;
+    this.disableCheckboxFilterApplyButton();
+  }
+
+  minValueChanged(val: string) {
+    if (val || val == '0') {
+      this.sliderEnteredMinValue = parseInt(val);
+      this.isMinTextBoxEmpty = false;
+      if (this.isMaxTextBoxEmpty) {
+        if ( (this.sliderEnteredMinValue > this.options.ceil) || (this.sliderEnteredMinValue < this.options.floor)) {
+          this.showSliderMinValueError = true;
+          this.disableSliderApplyButton = true;
+          this.incorrectSliderInput = true;
+        } else {
+          this.showSliderMinValueError = false;
+          this.showSliderMaxValueError = false;
+          this.disableSliderApplyButton = false;
+          this.incorrectSliderInput = false;
+        }
+      } else if (this.sliderEnteredMinValue > this.sliderEnteredMaxValue) {
+        if(this.isValueInRange(this.sliderEnteredMaxValue)){
+          this.showSliderMinValueError = true;
+          this.showSliderMaxValueError = false;
+        }
+        else{
+          this.showSliderMaxValueError = true;
+          if(this.isValueInRange(this.sliderEnteredMinValue)){
+            this.showSliderMinValueError = false;
+          }
+          else{
+            this.showSliderMinValueError = true;
+          }
+         
+        }
+        this.disableSliderApplyButton = true;
+        this.incorrectSliderInput = true;
+        
+      } else if (this.sliderEnteredMinValue < this.options.floor) {
+        this.showSliderMinValueError = true;
+        this.disableSliderApplyButton = true;
+        this.incorrectSliderInput = true;
+      } else {
+        this.showSliderMinValueError = false;
+        this.disableSliderApplyButton = false;
+        this.incorrectSliderInput = false;
+      }
+
+      console.log(this.sliderEnteredMinValue);
+    } else {
+      console.log('inside else condition');
+      this.sliderEnteredMinValue = this.options.floor;
+      this.isMinTextBoxEmpty = true;
+      this.showSliderMinValueError = false;
+
+    }
+    this.showErrorForMinAndMaxValue();
+  }
+
+  maxValueChanged(val: string) {
+    if (val || val == "0") {
+      this.sliderEnteredMaxValue = parseInt(val);
+      this.isMaxTextBoxEmpty = false;
+      if (this.isMinTextBoxEmpty) {
+        if ( (this.sliderEnteredMaxValue < this.options.floor) || (this.sliderEnteredMaxValue > this.options.ceil)) {
+          this.showSliderMaxValueError = true;
+          this.disableSliderApplyButton = true;
+          this.incorrectSliderInput = true;
+        } else {
+          this.showSliderMaxValueError = false;
+          this.showSliderMinValueError = false;
+          this.disableSliderApplyButton = false;
+          this.incorrectSliderInput = false;
+        }
+      } else if (this.sliderEnteredMaxValue < this.sliderEnteredMinValue) {
+        if(this.isValueInRange(this.sliderEnteredMinValue)){
+          this.showSliderMaxValueError = true;
+          this.showSliderMinValueError = false;
+        }
+        else{
+          this.showSliderMinValueError = true;
+          if(this.isValueInRange(this.sliderEnteredMaxValue)){
+            this.showSliderMaxValueError = false;
+          }
+          else{
+            this.showSliderMaxValueError = true;
+          }
+        }
+        this.disableSliderApplyButton = true;
+        this.incorrectSliderInput = true;
+        // this.showMaxError = true;
+      } else if (this.sliderEnteredMaxValue > this.options.ceil) {
+        this.showSliderMaxValueError = true;
+        this.disableSliderApplyButton = true;
+        this.incorrectSliderInput = true;
+      } else {
+        this.showSliderMaxValueError = false;
+        this.disableSliderApplyButton = false;
+        this.incorrectSliderInput = false;
+      }
+    } else {
+      this.sliderEnteredMaxValue = this.options.ceil;
+      this.isMaxTextBoxEmpty = true;
+      this.showSliderMaxValueError = false;
+      console.log(this.sliderEnteredMaxValue);
+    }
+    this.showErrorForMinAndMaxValue();
+  }
+
+  showErrorForMinAndMaxValue(){
+      if(this.isMinTextBoxEmpty && this.isMaxTextBoxEmpty){
+        this.showSliderMinValueError = true;
+        this.showSliderMaxValueError = true;
+        this.disableSliderApplyButton = true;
+        this.incorrectSliderInput = true;
+     }
+     else if(this.showSliderMaxValueError || this.showSliderMinValueError){
+      this.incorrectSliderInput = true;
+     }
+     else{
+      this.incorrectSliderInput = false;
+     }
+     this.disableSliderApplyBtn();
+  }
+
+  isValueInRange(val: number){
+    return this.options.floor <= val && val <= this.options.ceil;
+  }
+
+  disableSliderApplyBtn(){
+    if(this.showFilterComponent && this.showSortComponent){
+      let isFilterChanged = this.checkIfSliderTooltipIsFiltered();
+      let isSortChanged = this.checkIfSortingChanged();
+          
+      this.disableSliderApplyButton = this.incorrectSliderInput || (!isSortChanged && !isFilterChanged );
+    }
+    else if(this.showFilterComponent){
+        this.disableSliderApplyButton = this.incorrectSliderInput || !this.checkIfSliderTooltipIsFiltered();
+    }
+    else if(this.showSortComponent){
+        this.disableSliderApplyButton = !this.checkIfSortingChanged();
+    }
+  }
+
+  sliderValueChange() {
+    this.sliderValue = { min: this.sliderMinValue, max: this.sliderMaxValue };
+  }
+
+  cancelSliderFilter() {
+    this.sliderValue = null;
+    this.closeTooltip();
+  }
+
+  applyFilters() {
+    this.applyListFilters();
+    this.applySortingOnFilteredData();
+    // this.emitData();
+    this.setInitialRowsForTable();
+    this.disableEnableEachColumnTooltipIcon();
+    this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    this.emitData();
+    this.closeTooltip();
+  }
+
+  applyListFilters(){
+    if(this.showFilterComponent && this.isFilterChanged){
+      let currentSelectedValue = [];
+      
+      if(this.tooltipOptions){
+
+          currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.value));
+
+          if(!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+            currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+          }
+          
+      }
+
+      let blankIndex = currentSelectedValue.findIndex((item: string) => item == null);
+      if(blankIndex != -1){
+        currentSelectedValue = sortBy(currentSelectedValue);
+      }
+
+        this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSelectedValue);
+        this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedValue);
+        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+        this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+    }
+  }
+
+  applySortingOnFilteredData(){
+    if(this.showSortComponent){
+      if(this.isSortChanged){
+        this.updateSortMap();
+      }
+      else if(this.isFilterChanged){
+        this.checkIfSortingIsApplied();
+      }
+    }
+    else if(this.isFilterChanged){
+      this.checkIfSortingIsApplied();
+    }
+  }
+
+  emitData(){
+    if(this.isFilterChanged && this.isSortChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(this.isFilterChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(this.isSortChanged){
+      this.sortingAppliedToTable.emit(this.tableData);
+    }
+  }
+
+  applySorting(key: string){
+    if(this.tempSortOrder == "ASC"){
+      this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true,this.tableData,key));
+    }
+    else if(this.tempSortOrder == "DESC"){
+        this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false,this.tableData,key));
+    }
+    else if(this.tempSortOrder == "DEFAULT"){
+        this.tableData = cloneDeep(this.annaSortService.noSortingAppliedData);
+    }
+  }
+
+  revert() {
+    this.tempTooltipData = cloneDeep(this.toolTipdata);
+    this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
+    this.toolTipdata = null;
+  }
+
+  closeCheckboxFilter() {
+    if (this.toolTipdata) {
+      this.revert();
+    }
+    this.closeTooltip();
+  }
+
+  applySliderFilter() {
+
+    this.applySliderFilterOnData();
+    this.applySortingOnFilteredData();
+    this.emitData();
+    this.setInitialRowsForTable();
+    this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    this.closeTooltip();
+  }
+
+  applySliderFilterOnData(){
+    if(this.showFilterComponent && this.isFilterChanged){
+      let currentSliderData: {min:any, max: any} = {min: null , max: null};
+
+      // if(this.isMinTextBoxEmpty){
+      //     currentSliderData.min = this.options.floor;
+      //     currentSliderData.max = this.sliderMaxValue;
+      // }
+      // else if(this.isMaxTextBoxEmpty){
+      //     currentSliderData.max = this.options.ceil;
+      //     currentSliderData.min = this.sliderMinValue;
+      // }
+      // else{
+          currentSliderData.max = this.sliderEnteredMaxValue;
+          currentSliderData.min = this.sliderEnteredMinValue;
+      // }
+
+      if(currentSliderData.min == this.options.floor && currentSliderData.max == this.options.ceil && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio) ){
+          currentSliderData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+      
+      this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSliderData);
+      this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio,currentSliderData);
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+      this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+      this.disableEnableEachColumnTooltipIcon();
+    }
+  }
+
+  cancelInDateFilter() {
+    this.closeTooltip();
+  }
+
+  updateSortMap(){
+    for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+      this.annaSortService.columnSortState.set(key, "DEFAULT");
+    }
+    this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+    this.applySorting(this.annaFilterService.selectedRadio);
+  }
+
+  applyDateFilter() {
+    this.applyDateFilterOnData();
+    this.applySortingOnFilteredData();
+    this.emitData();
+    this.setInitialRowsForTable();
+    this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    this.closeTooltip();
+    
+  }
+
+  applyDateFilterOnData(){
+    if(this.showFilterComponent && this.isFilterChanged){
+      let currentSelectedDate = this.calendarSelection;
+      
+      let fromDate = {year: currentSelectedDate.fromDate.year,month: currentSelectedDate.fromDate.month,day: currentSelectedDate.fromDate.day};
+      let toDate = {year: currentSelectedDate.toDate.year,month: currentSelectedDate.toDate.month,day: currentSelectedDate.toDate.day};
+          
+      if(isEqual(this.calendarMinEnabledDate,fromDate) && isEqual(this.calendarMaxEnabledDate,toDate) && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+          currentSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+      else{
+          currentSelectedDate.fromDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+          currentSelectedDate.toDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
+      }
+          
+          
+      this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSelectedDate);
+      this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio,currentSelectedDate);
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+      this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+      this.disableEnableEachColumnTooltipIcon();
+
+    }
+  }
+
+  applyWeekFilter(event: any) {
+
+  }
+
+  incrementHour(arr: any[]) {
+    if (arr[0] == "") {
+      arr[0] = 1;
+    } else if (parseInt(arr[0]) < 12) {
+      arr[0] = parseInt(arr[0]) + 1;
+    } else {
+      arr[0] = 1;
+    }
+  }
+
+  decrementHour(arr: any[]) {
+    if (arr[0] == "") {
+      arr[0] = 12;
+    } else if (parseInt(arr[0]) > 1) {
+      arr[0] = parseInt(arr[0]) - 1;
+    } else {
+      arr[0] = 12;
+    }
+  }
+
+  incrementMinute(arr: any[]) {
+    arr[1] = parseInt(arr[1]) + 15;
+    if (parseInt(arr[1]) == 60) {
+        arr[1] = "00";
+    } else if (parseInt(arr[1]) == 0) {
+        arr[1] = "00";
+    }
+    else if(parseInt(arr[1]) > 60){
+        let res = parseInt(arr[1]) - 60;
+        arr[1] = res < 10 ? `0${res}` : res.toString();    
+    }
+  }
+
+  decrementMinute(arr: any) {
+    arr[1] = parseInt(arr[1]) - 15;
+    if (parseInt(arr[1]) < 0) {
+        let res = 60 + parseInt(arr[1]);
+        arr[1] = res;
+    } else if (parseInt(arr[1]) == 0) {
+        arr[1] = "00";
+    }
+    else if(arr[1] < 10){
+        arr[1]= `0${arr[1]}`;
+    }
+  }
+
+  changeStartTimeHour(increment: boolean) {
+    if (increment) {
+      this.incrementHour(this.selectedFromTime);
+    } else {
+      this.decrementHour(this.selectedFromTime);
+    }
+    this.startTimeHourChange(this.selectedFromTime[0].toString());
+  }
+
+  changeEndTimeHour(increment: boolean) {
+    if (increment) {
+      this.incrementHour(this.selectedToTime);
+    } else {
+      this.decrementHour(this.selectedToTime);
+    }
+    this.endTimeHourChange(this.selectedToTime[0].toString());
+  }
+
+  changeEndTimeMinute(increment: boolean) {
+    if (increment) {
+      this.incrementMinute(this.selectedToTime);
+    } else {
+      this.decrementMinute(this.selectedToTime);
+    }
+    this.endTimeMinChange(this.selectedToTime[1].toString());
+  }
+
+  changeStartTimeMinute(increment: boolean) {
+    if (increment) {
+      this.incrementMinute(this.selectedFromTime);
+    } else {
+      this.decrementMinute(this.selectedFromTime);
+    }
+    this.startTimeMinChange(this.selectedFromTime[1].toString());
+  }
+
+  applyTimeFilters() {
+
+    this.applyTimeFilterOnData();
+    this.applySortingOnFilteredData();
+    this.emitData();
+    this.setInitialRowsForTable();
+    this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    this.closeTooltip();
+
+  }
+
+  applyTimeFilterOnData(){
+    if(this.showFilterComponent && this.isFilterChanged){
+      let currentSelectedTimeFilter: {fromTime: string, toTime:string, includeMulti: boolean, includeZero: boolean, includeTimeRange: boolean} = {
+        fromTime: null,
+        toTime: null,
+        includeMulti: false,
+        includeZero: false,
+        includeTimeRange: false,
+      };
+  
+      let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+        this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2],
+        true
+      );
+      let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
+      
+      let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+        this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2],
+        true
+      );
+      let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":00";
+  
+      currentSelectedTimeFilter = { fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.multiTimeCheckboxChecked, 
+      includeZero: this.zeroTimeCheckboxChecked, includeTimeRange: this.enterTimeCheckboxChecked};
+  
+      let isFiltered = this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSelectedTimeFilter);
+      this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio,currentSelectedTimeFilter);
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+      
+      if(!isFiltered){
+        this.annaFilterService.tooltipSelectedMap.delete(this.annaFilterService.selectedRadio);
+      }
+      this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+      this.disableEnableEachColumnTooltipIcon();            
+ 
+    }
+  }
+
+  closeTimeFilter() {
+    this.selectedFromTime = cloneDeep(this.clonedSelectedFromTime);
+    this.selectedToTime = cloneDeep(this.clonedSelectedToTime);
+    this.closeTooltip();
+  }
+
+  disableTimeFilterApplyButton() {
+
+    if(this.showFilterComponent && this.showSortComponent){
+      let isFilterChanged = this.checkIfTimeTooltipIsFiltered();
+      let isSortChanged = this.checkIfSortingChanged();
+      this.disableTimeFilterApplyBtn = !this.validateTimeFilterInput() || (!isSortChanged && !isFilterChanged );
+    }
+    else if(this.showFilterComponent){
+        this.disableTimeFilterApplyBtn = !this.validateTimeFilterInput() || !this.checkIfTimeTooltipIsFiltered();
+    }
+    else if(this.showSortComponent){
+        this.disableTimeFilterApplyBtn = !this.checkIfSortingChanged();
+    }
+
+  }
+
+  validateTimeFilterInput(){
+    if(this.startTimeHourErr || this.startTimeMinErr || this.endTimeHourErr || this.endTimeMinErr){
+        return false;
+    }
+
+    if (!this.multiTimeCheckboxChecked && !this.zeroTimeCheckboxChecked && !this.enterTimeCheckboxChecked) {
+        return false;
+    }
+
+    let timeFormat = "HH:mm:ss";
+
+    let startTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+        this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2],
+        true
+    );
+    let startTime24HrFormat = startTime24HrFormatArr[0] + ":" + startTime24HrFormatArr[1] + ":00";
+    let endTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+        this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2],
+        true
+    );
+    let endTime24HrFormat = endTime24HrFormatArr[0] + ":" + endTime24HrFormatArr[1] + ":00";
+
+    return !(moment(startTime24HrFormat, timeFormat).isAfter(moment(endTime24HrFormat, timeFormat)));        
+  }
+
+  sortedData(event: any) {
+    if (event.type == "none") {
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+    } else {
+      this.tableData = event.data;
+    }
+    this.sortingAppliedToTable.emit(this.tableData);
+  }
+
+  checkIfSortingIsApplied() {
+    for(let [key,value] of this.annaSortService.columnSortState.entries()){
+      if(value == "ASC"){
+          this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true,this.tableData,key));
+      }
+      else if(value == "DESC"){
+          this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false,this.tableData,key));
+      }
+    }
+  }
+
+
+  disableEnableEachColumnTooltipIcon() {
+    this.tableHeaders.forEach(header => {
+      
+      header.headerInfo.forEach(item => {
+        if (item.showTooltipIcon) {
+          
+          let values = [];
+          item.disableTooltipIcon = true;
+
+          item.filterSortObjectKeys.forEach(key => {
+            
+            if(key == "period"){
+              let uniqStartDate = uniq(this.tableData.map((u: { [x: string]: any; }) => u["startDate"]));
+              let uniqEndDate = uniq(this.tableData.map((u: { [x: string]: any; }) => u["endDate"]));
+
+              item.disableTooltipIcon = (uniqStartDate.length > 1 || uniqEndDate.length > 1) ? false : true; 
+            }
+            else{
+              values = this.tableData.map((u: { [x: string]: any; }) => u[key]);
+              if(item.filter == "CHECKBOX" && uniq(values).filter(n => n!=null).length > 1){
+                
+                item.disableTooltipIcon = false;
+              }
+              else if(item.filter != "CHECKBOX" && uniq(values).filter(n => n!=null && n!="-").length > 1){
+                item.disableTooltipIcon = false;
+              }
+
+            }
+            
+          })
+        }
+        
+      });
+    });
+  }
+
+  setMarginLeftForFilterIcon(){
+    let elementArr = this.viewChildTableHeaders.toArray();
+    elementArr.forEach((item) => {
+      let childDivElements = item.nativeElement.children;
+      
+      if (childDivElements.length == 2) {
+        let firstParagraphWidth = childDivElements[0].children[0];
+        let secondParagraphWidth = childDivElements[1].children[0];
+        
+        if(firstParagraphWidth.offsetWidth > secondParagraphWidth.offsetWidth){
+          let diff = firstParagraphWidth.offsetWidth - secondParagraphWidth.offsetWidth;
+          if(childDivElements[0].children.length == 2){
+            childDivElements[0].children[1].style.marginLeft = 4 + 'px';
+          }
+  
+          if(childDivElements[1].children.length == 2){
+
+            childDivElements[1].children[1].style.marginLeft = diff + 4 + 'px';
+          }
+        }
+        else{
+          let diff = secondParagraphWidth.offsetWidth - firstParagraphWidth.offsetWidth;
+          if(childDivElements[0].children.length == 2){
+            childDivElements[0].children[1].style.marginLeft = diff + 4 + 'px';
+          }
+  
+          if(childDivElements[1].children.length == 2){
+
+            childDivElements[1].children[1].style.marginLeft = 4 + 'px';
+          }
+        }
+        
+      }
+    });
+  }
+
+  dataRowClicked(rowData: any) {
+    this.rowClicked.emit(rowData);
+  }
+
+  radioButtonClicked(data: any, action: string, isDisabled: boolean) {
+    if (!isDisabled) {
+      this.radioButtonSelected.emit({ data, action });
+    }
+  }
+
+  bindTheValueToSellerGroupTooltip(sellerGroupHierarchy: RatingSellerGroupHierarchy[], tooltip: any): void {
+    if (this.hierarchyTooltip && this.hierarchyTooltip.open) {
+      this.hierarchyTooltip.close();
+    }
+    this.sellerGroupHierarchy = sellerGroupHierarchy;
+    this.hierarchyTooltip = tooltip;
+    this.hierarchyTooltip.open();
+  }
+
+  iconClicked(rowData: any,iconClass: string){
+    
+    if("orderId" in rowData && iconClass.includes("mdi-star") ){
+      this.selectedStarredOrderId = rowData.orderId;
+    }
+
+    this.gtIconClicked.emit({data: rowData,iconClass: iconClass});
+  }
+
+  svgIconClicked(data: GtColumnIconEmittedData){
+    this.gtSVGIconClicked.emit(data);
+  }
+
+  textActionClicked(rowData: any,id: number){
+    this.gtTextActionClicked.emit({data:rowData,id});
+  }
+
+  viewDetailsClicked(rowData: any){
+    this.gtViewDetailClicked.emit({data:rowData});
+  }
+
+  setColumnSortStateMap(){
+    this.tableHeaders.forEach(column => {
+        column.headerInfo.forEach( (header) => {
+            if(header.showTooltipIcon && header.isSortRequired){
+                header.isSortRequired.forEach( (item,index) => {
+                  if(item){
+                    this.annaSortService.columnSortState.set(header.filterSortObjectKeys[index], "DEFAULT");  
+                  }
+                })
+            }
+        })
+    });
+  }
+
+  storeSortTypeInTempVariable(event: SortType){
+    this.tempSortOrder = event;
+    this.disableApplyButtonOfSelectedFilter();
+  }
+
+  unCheckAllCheckbox(){
+      this.tooltipOptions.forEach(item => {
+        item.isSelected = false;
+        let index = this.clonedTooltipOptions.findIndex(opt => opt.id == item.id);
+        this.clonedTooltipOptions[index].isSelected = false;
+        
+      });
+      this.selectedCheckboxOptionsCount = 0;
+      this.disableSelectAll = false;
+      this.disableClearAll = true;
+      this.disableCheckboxApply = true;
+  }
+
+  selectAllCheckbox(){
+      this.tooltipOptions.forEach(item => {
+        item.isSelected = true;
+        let index = this.clonedTooltipOptions.findIndex(opt => opt.id == item.id);
+        this.clonedTooltipOptions[index].isSelected = true;
+      });
+      this.selectedCheckboxOptionsCount = this.tooltipOptions.length;
+      this.disableSelectAll = true;
+      this.disableClearAll = false;
+      this.disableCheckboxFilterApplyButton();
+  }
+
+  searchForTheItem(str: string){
+      if(str){
+          this.tooltipOptions = cloneDeep(this.clonedTooltipOptions.filter(item => item.label.toString().toLowerCase().includes(str.toLowerCase())));
+          
+          this.tooltipOptions.forEach(element => {
+            element.label = this.boldString(element.label,str);
+          });
+          
+          if(this.tooltipOptions.length > 0){
+              let unselectedItems = this.tooltipOptions.filter((item) => !item.isSelected);
+              let selectedItems = this.tooltipOptions.filter((item) => item.isSelected);  
+              this.disableSelectAll = unselectedItems.length == 0;
+              this.disableClearAll = selectedItems.length == 0;
+              this.selectedCheckboxOptionsCount = selectedItems.length;
+              this.disableCheckboxApply = (selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered());
+          
+          }
+          else{
+              this.selectedCheckboxOptionsCount = 0;
+              this.disableCheckboxApply = true;
+              this.disableClearAll = true;
+              this.disableSelectAll = true;
+          }
+      }
+      else{
+          this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
+          let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
+          let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
+          this.selectedCheckboxOptionsCount = selectedItems.length;
+          this.disableSelectAll = unselectedItems.length == 0;
+          this.disableClearAll = selectedItems.length == 0;
+          this.disableCheckboxFilterApplyButton();
+      }
+  }
+
+  boldString(str: string, find: string) {
+    let indexes = this.getIndicesOf(find, str, false);
+    
+    indexes.forEach((item,index) => {
+        let startIndex = item + (index * 7); //Multiplying by 7 as there are 7char: <b></b>
+        let endIndex = startIndex + find.length;
+        let strToBeReplaced = str.substring(startIndex, endIndex);
+        str = str.replace(strToBeReplaced, "<b>" + strToBeReplaced + "</b>"); 
+    });
+    return str;
+}
+
+getIndicesOf(searchStr: string, str: string, caseSensitive: boolean) {
+    var searchStrLen = searchStr.length;
+    if (searchStrLen == 0) {
+        return [];
+    }
+    var startIndex = 0, index, indices = [];
+    if (!caseSensitive) {
+        str = str.toLowerCase();
+        searchStr = searchStr.toLowerCase();
+    }
+    while ((index = str.indexOf(searchStr, startIndex)) > -1) {
+        indices.push(index);
+        startIndex = index + searchStrLen;
+    }
+    return indices;
+}
+
+
+  removeBoldElementFromString(originalString: string){
+      let firstRegExp = new RegExp('<b>','g');
+      let secondRegExp = new RegExp('</b>','g');
+
+      let ret = originalString.replace(firstRegExp,'');
+      return ret.replace(secondRegExp,'');
+  }
+
+  clearSearchedItem(){
+      this.searchItem = "";
+      this.searchForTheItem("");
+  }
+
+  calendarDateChanged(event: any){
+    this.calendarSelection = event;
+    this.disableCalendarApplyButton();
+  }
+
+  disableCalendarApplyButton() {
+
+    if(this.showFilterComponent && this.showSortComponent){
+      let isFilterChanged = this.checkIfDateTooltipIsFiltered();
+      let isSortChanged = this.checkIfSortingChanged();
+          
+      this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate) || (!isSortChanged && !isFilterChanged );
+    }
+    else if(this.showFilterComponent){
+        this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate) || !this.checkIfDateTooltipIsFiltered();
+    }
+    else if(this.showSortComponent){
+        this.disableCalendarApplyBtn = !this.checkIfSortingChanged();
+    }
+
+  }
+
+  setInitialValueMapForTimeFilter(key: string) {
+    let data = this.clonedTableData.filter(
+        (obj) => !["", "-", null, "0", "<multi>"].includes(obj[key]));
+
+    let timeArr = map(data, key);
+    timeArr.sort((a, b) => {
+        return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+    });
+    
+    let obj = {
+        fromTime: timeArr[0],
+        toTime: timeArr[timeArr.length - 1],
+        includeMulti: false,
+        includeZero: false,
+        includeTimeRange: false
+    };
+    
+    if (
+        this.gtGeneralConfig.component === "SPOTDETAILS" ||
+        this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP"
+    ) {
+        let includeMulti =
+            this.clonedTableData.findIndex((obj) => obj[key] == "<multi>") !=
+            -1;
+        let includeZero =
+            this.clonedTableData.findIndex((obj) => obj[key] == "0") != -1;
+        let includeTimeRange =
+            this.clonedTableData.findIndex(
+                (obj) => obj[key] != "0" && obj[key] != "<multi>"
+            ) != -1;
+        
+        let obj = {
+            fromTime: timeArr[0],
+            toTime: timeArr[timeArr.length - 1],
+            includeMulti: includeMulti,
+            includeZero: includeZero,
+            includeTimeRange: includeTimeRange,
+        };
+        this.annaFilterService.initialValueMap.set(key, obj);
+    } 
+    else if (this.gtGeneralConfig.component === "RATING") {
+        this.setInitialValueMapForRatingPageTimeFilter(key);
+    } else {
+        this.annaFilterService.initialValueMap.set(key, obj);
+    }
+}
+
+setInitialValueMapForRatingPageTimeFilter(key: string){
+  let includeMulti =
+            this.clonedTableData.findIndex((obj) => obj[key][0] == "<multi>") !=
+            -1;
+        let includeZero =
+            this.clonedTableData.findIndex((obj) => obj[key][0] == "0") != -1;
+        let includeTimeRange =
+            this.clonedTableData.findIndex(
+                (obj) => obj[key][0] != "0" && obj[key][0] != "<multi>"
+            ) != -1;
+
+        let startTimeArr = map(this.clonedTableData, "startTime");
+        let endTimeArr = map(this.clonedTableData, "endTime");
+
+        startTimeArr.sort((a, b) => {
+            return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+        });
+
+        endTimeArr.sort((a, b) => {
+            return this.annaDateTimeFormatService.sortByTimeDescending(a, b);
+        });
+
+        let obj = {
+            fromTime: startTimeArr[0],
+            toTime: endTimeArr[0],
+            includeMulti: includeMulti,
+            includeZero: includeZero,
+            includeTimeRange: includeTimeRange,
+        };
+        this.annaFilterService.initialValueMap.set(key, obj); 
+    }
+
+    startTimeHourChange(val: string){
+        if(val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12){
+            this.startTimeHourErr = true;
+        }
+        else{
+            this.startTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    startTimeMinChange(val: string){
+        if(val.length != 2  || 0 > parseInt(val) || parseInt(val) > 59){
+            this.startTimeMinErr = true;
+        }
+        else{
+            this.startTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    endTimeHourChange(val: string){
+        if(val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12){
+            this.endTimeHourErr = true;
+        }
+        else{
+            this.endTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    endTimeMinChange(val: string){
+        if(val.length != 2  || 0 > parseInt(val) || parseInt(val) > 59){
+            this.endTimeMinErr = true;
+        }
+        else{
+            this.endTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    checkIfCheckboxTooltipIsFiltered(){
+        let currentSelectedValue = [];
+        let previousSelectedValue = [];
+
+        if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+          previousSelectedValue = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+          
+          if(!this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+            let initialValue = sortBy(uniq(this.clonedTableData.map(item => item[this.annaFilterService.selectedRadio])));
+            this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio,initialValue);
+          }
+
+        }
+        else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+          previousSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        else{
+          previousSelectedValue = sortBy(uniq(this.clonedTableData.map(item => item[this.annaFilterService.selectedRadio])));
+          this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio,previousSelectedValue);
+        }
+
+        if(this.tooltipOptions){
+
+            currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.value));
+
+            if(!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+              currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+            
+        }
+
+        let blankIndex = currentSelectedValue.findIndex((item: string) => item == null);
+        if(blankIndex != -1){
+          currentSelectedValue = sortBy(currentSelectedValue);
+        }
+
+        this.isFilterChanged = !isEqual(currentSelectedValue,previousSelectedValue);
+        return this.isFilterChanged;
+    }
+
+    checkIfTimeTooltipIsFiltered(){
+      let currentSelectedTimeFilter: {fromTime: string, toTime:string, includeMulti: boolean, includeZero: boolean, includeTimeRange: boolean} = {
+        fromTime: null,
+        toTime: null,
+        includeMulti: false,
+        includeZero: false,
+        includeTimeRange: false,
+      };
+  
+      let previousSelectedTimeFilter;
+  
+      if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+        previousSelectedTimeFilter = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+      }
+      else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+        previousSelectedTimeFilter = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+  
+      let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+        this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2],
+        true
+      );
+      let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
+
+      let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+        this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2],
+        true
+      );
+      let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":00";
+  
+      currentSelectedTimeFilter = { fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.multiTimeCheckboxChecked, 
+      includeZero: this.zeroTimeCheckboxChecked, includeTimeRange: this.enterTimeCheckboxChecked};
+      
+      this.isFilterChanged = !isEqual(previousSelectedTimeFilter, currentSelectedTimeFilter);
+      return this.isFilterChanged;  
+    }
+
+    checkIfDateTooltipIsFiltered(){
+      let currentSelectedDate = cloneDeep(this.calendarSelection);
+      let previousSelectedDate: {fromDate: any, toDate: any} = {fromDate: null, toDate: null};
+
+      if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+        previousSelectedDate = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        
+        if(!this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+            this.setInitialValueMapForDateFilter();
+        }
+
+      }
+      else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+        previousSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+      else{
+        this.setInitialValueMapForDateFilter();
+        previousSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+
+      if(currentSelectedDate.fromDate && currentSelectedDate.toDate){
+          let fromDate = {year: currentSelectedDate.fromDate.year,month: currentSelectedDate.fromDate.month,day: currentSelectedDate.fromDate.day};
+          let toDate = {year: currentSelectedDate.toDate.year,month: currentSelectedDate.toDate.month,day: currentSelectedDate.toDate.day};
+          
+          if(isEqual(this.calendarMinEnabledDate,fromDate) && isEqual(this.calendarMaxEnabledDate,toDate) && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+              currentSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+          }
+          else{
+              currentSelectedDate.fromDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+              currentSelectedDate.toDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
+          }
+          this.isFilterChanged = !isEqual(previousSelectedDate,currentSelectedDate);
+      }
+
+        return this.isFilterChanged;
+    }
+
+    setInitialValueMapForDateFilter(){
+        let minMaxDate;
+
+        if(this.annaFilterService.selectedRadio == "period"){
+          let minStartDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "startDate");
+          let maxEndDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData,"endDate");
+          minMaxDate = [minStartDate[0],maxEndDate[1]];
+        }
+        else{
+          minMaxDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData,this.annaFilterService.selectedRadio);
+        }
+        let selectedDate = {fromDate: minMaxDate[0], toDate: minMaxDate[1]};
+        this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, selectedDate);
+    }
+
+    checkIfSliderTooltipIsFiltered(){
+      let currentSliderData: {min:any, max: any} = {min: null , max: null};
+      let previousSliderData: {min:any, max: any} = {min: "", max: ""};
+
+      // if(this.isMinTextBoxEmpty){
+      //     currentSliderData.min = this.options.floor;
+      //     currentSliderData.max = this.sliderMaxValue;
+      // }
+      // else if(this.isMaxTextBoxEmpty){
+      //     currentSliderData.max = this.options.ceil;
+      //     currentSliderData.min = this.sliderMinValue;
+      // }
+      // else{
+          currentSliderData.max = this.sliderEnteredMaxValue;
+          currentSliderData.min = this.sliderEnteredMinValue;
+      // }
+
+      if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+        previousSliderData = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        if(!this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+          this.setInitialValueMapForSliderFilter();
+        }
+      }
+      else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+        previousSliderData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+      else{
+        this.setInitialValueMapForSliderFilter();
+        previousSliderData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+
+      if(currentSliderData.min == this.options.floor && currentSliderData.max == this.options.ceil && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio) ){
+          currentSliderData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+
+      this.isFilterChanged = !isEqual(previousSliderData,currentSliderData);
+      return this.isFilterChanged;
+    }
+
+    setInitialValueMapForSliderFilter(){
+      let minValue = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, this.annaFilterService.selectedRadio, true);
+      let maxValue = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, this.annaFilterService.selectedRadio, false);
+      let sliderData = { min: minValue, max: maxValue };
+      this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, sliderData);
+      
+    }
+
+    checkIfSortingChanged(){
+      this.isSortChanged = this.tempSortOrder != null && this.tempSortOrder != this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio);;
+      console.log(this.isSortChanged);
+      return this.isSortChanged;
+    }
+
+    disableApplyButtonOfSelectedFilter(){
+      let header = this.annaFilterService.selectedRadio;
+
+      if (this.annaFilterService.calendarSet.has(header)) {
+        this.disableCalendarApplyButton();
+      } else if (this.annaFilterService.sliderSet.has(header)) {
+        this.disableSliderApplyBtn();
+      } else if (this.annaFilterService.timeSet.has(header)) {
+        this.disableTimeFilterApplyButton();
+      } else {
+        this.disableCheckboxFilterApplyButton();
+      }
+    }
+
+    disableCheckboxFilterApplyButton(){
+      let selectedItems = this.showFilterComponent ? this.tooltipOptions.filter(item => item.isSelected) : [];
+        
+      if(this.showFilterComponent && this.showSortComponent){
+          let isFilterChanged = this.checkIfCheckboxTooltipIsFiltered();
+          let isSortChanged = this.checkIfSortingChanged();
+          this.disableCheckboxApply = selectedItems.length == 0 || (!isSortChanged && !isFilterChanged );
+      }
+      else if(this.showFilterComponent){
+          this.disableCheckboxApply = selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered();
+      }
+      else if(this.showSortComponent){
+          this.disableCheckboxApply = !this.checkIfSortingChanged();
+      }
+    }
+
+    trackByTooltipModelId(index: number , item: TooltipModel){
+      return item.id;
+    }
+
+    setActiveStateObject(){
+      this.annaFilterService.isFilterSortActive = {};
+      this.tableHeaders.forEach(item => {
+        item.headerInfo.forEach(header => {
+            if(header.showTooltipIcon){
+              let key = header.filterSortObjectKeys.join(',');
+              header.joinedFilterSortObjectKeys = key;
+              this.annaFilterService.isFilterSortActive[key] = false;
+            }
+        })
+      });
+    }
+
+    setIsDifference(value: boolean){
+      this.isDifferenceLessThan25Percent = value;
+    }
+
+    resetIndex(){
+      this.start = 0;
+      this.end = this.limit + this.start;
+    }
+
+    onTableContainerScroll(e: any) {
+        const tableViewHeight = e.target.offsetHeight; // viewport
+        const tableScrollHeight = e.target.scrollHeight; // length of all table
+        const scrollLocation = e.target.scrollTop; // how far user scrolled
+        
+        // If the user has scrolled within 150px of the bottom, add more data
+        const buffer = 150;
+        const limit = tableScrollHeight - tableViewHeight - buffer;
+        if (scrollLocation > limit) {
+            let data = this.getTableData(this.start, this.end);
+            this.renderedData = this.renderedData.concat(data);
+            this.updateIndex();
+        }
+        this.tableContainerScrolled(e);
+    }
+
+    getTableData(start: number, end: number) {
+        return this.tableData.filter((value, index) => index >= start && index < end);
+    }
+
+    updateIndex() {
+        this.start = this.end;
+        this.end = this.limit + this.start;
+    }
+
+    setInitialRowsForTable(){
+      this.resetIndex();
+      this.renderedData = this.getTableData(this.start,this.end);
+      this.updateIndex();
+    }
+
+    spotDetailsDownloadClicked(parentChildOrTotalRow: "DATAROW" | "TOTALROW", rowdata?: any ) {
+      if(rowdata){
+        this.selectedInventoryIdForDownload = rowdata.inventoryCodeId;
+        this.selectedDemographicForDownload = rowdata.demographic;
+      } else{
+        this.selectedInventoryIdForDownload = null;
+        this.selectedDemographicForDownload = null;
+      }
+      this.selectedRowTypeForDownload = parentChildOrTotalRow;
+      this.downloadSpotDetails.emit({
+        parentChildOrTotalRow: parentChildOrTotalRow,
+        inventoryCodeId: this.selectedInventoryIdForDownload,
+        demographic: this.selectedDemographicForDownload})
+  }
+
+  tableContainerScrolled(event: any){
+      this.isScrolledLeft = event.target.scrollLeft > 0;
+    }
+}