@annalib/anna-core 2.5.0 → 2.7.0

package/fesm2020/annalib-anna-core-src-lib-anna-generic-table-lib.mjs

@@ -1,2499 +0,0 @@
-import * as i10 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChildren, ViewEncapsulation, Optional, Inject, ViewChild, forwardRef, Directive, ContentChildren, NgModule } from '@angular/core';
-import * as i12 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i4 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i8 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i2 from '@angular/material/table';
-import { MatHeaderRowDef, MatTableModule } from '@angular/material/table';
-import * as i11 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i6 from '@angular-slider/ngx-slider';
-import { NgxSliderModule } from '@angular-slider/ngx-slider';
-import * as i3 from 'ngx-skeleton-loader';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import * as i9 from 'ng-circle-progress';
-import { NgCircleProgressModule } from 'ng-circle-progress';
-import moment from 'moment';
-import { isEqual, uniq, cloneDeep, sortBy, map } from 'lodash-es';
-import * as i1 from '@annalib/anna-core/src/lib/anna-core-shared-lib';
-import { radioButtonModel, TooltipModel, AnnaFilterService, AnnaCoreSharedLibModule } from '@annalib/anna-core/src/lib/anna-core-shared-lib';
-import * as i7 from '@annalib/anna-core/src/lib/anna-dropdown-lib';
-import { AnnaDropdownLibModule } from '@annalib/anna-core/src/lib/anna-dropdown-lib';
-import * as i1$1 from '@angular/cdk/bidi';
-import { animationFrameScheduler, asapScheduler, Subject, Observable, Subscription, isObservable, of } from 'rxjs';
-import { startWith, auditTime, takeUntil, distinctUntilChanged, pairwise, switchMap, shareReplay, map as map$1 } from 'rxjs/operators';
-import * as i2$1 from '@angular/cdk/scrolling';
-import { CdkScrollable, VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { isDataSource, ArrayDataSource } from '@angular/cdk/collections';
-import * as i2$2 from '@angular/cdk/table';
-import { _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER, CdkHeaderRowDef } from '@angular/cdk/table';
-
-// Angular import statements
-//sub-entries of anna lib import statement
-//Add onChange push change detection
-class AnnaSortComponent {
-    constructor(annaSortService) {
-        this.annaSortService = annaSortService;
-        this.sortOptionClicked = new EventEmitter();
-        this.sortOptions = [
-            {
-                sortType: 'ASC',
-                isOptionActive: false,
-                text: 'A to Z',
-            },
-            {
-                sortType: 'DESC',
-                isOptionActive: false,
-                text: 'Z to A',
-            },
-            {
-                sortType: 'DEFAULT',
-                isOptionActive: false,
-                text: 'DEFAULT',
-            },
-        ];
-    }
-    ngOnChanges(changes) {
-        console.log("sort component ngOnChanges");
-        console.log(this.sortObjectKey);
-        if (changes["sortObjectKey"] && changes["sortObjectKey"].currentValue) {
-            console.log("inside sort active func");
-            let sortType = this.annaSortService.columnSortState.get(this.sortObjectKey);
-            this.setSortType(sortType);
-        }
-    }
-    sortOptionChanged(index, sortType) {
-        this.sortOptions.forEach((item) => (item.isOptionActive = false));
-        this.sortOptions[index].isOptionActive = true;
-        this.sortOptionClicked.emit(sortType);
-    }
-    ngOnInit() {
-        console.log("sort component ngOnInit");
-        console.log(this.annaSortService.columnSortState);
-        this.annaSortService.updateSortTypeSubject.subscribe((item) => {
-            this.setSortType(item);
-        });
-    }
-    setSortType(option) {
-        this.sortOptions.forEach(item => item.isOptionActive = false);
-        let index = this.sortOptions.findIndex(item => item.sortType == option);
-        this.sortOptions[index].isOptionActive = true;
-    }
-}
-AnnaSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortComponent, deps: [{ token: i1.AnnaSortService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: { sortObjectKey: "sortObjectKey" }, outputs: { sortOptionClicked: "sortOptionClicked" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"sort-container\">\r\n    <button\r\n        class=\"sort-btn\"\r\n        *ngFor=\"let option of sortOptions; let i = index\"\r\n        (click)=\"sortOptionChanged(i, option.sortType)\"\r\n        [ngClass]=\"{ active: option.isOptionActive }\"\r\n    >\r\n        {{option.text}}\r\n    </button>\r\n</p>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}\n"], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'anna-core-sort-lib', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"sort-container\">\r\n    <button\r\n        class=\"sort-btn\"\r\n        *ngFor=\"let option of sortOptions; let i = index\"\r\n        (click)=\"sortOptionChanged(i, option.sortType)\"\r\n        [ngClass]=\"{ active: option.isOptionActive }\"\r\n    >\r\n        {{option.text}}\r\n    </button>\r\n</p>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.AnnaSortService }]; }, propDecorators: { sortObjectKey: [{
-                type: Input
-            }], sortOptionClicked: [{
-                type: Output
-            }] } });
-
-// Angular import statements
-class AnnaNonEditableGenericTableComponent {
-    constructor(cdRef, annaSortService, annaDateTimeFormatService, annaFilterService, annaGenericTableService) {
-        this.cdRef = cdRef;
-        this.annaSortService = annaSortService;
-        this.annaDateTimeFormatService = annaDateTimeFormatService;
-        this.annaFilterService = annaFilterService;
-        this.annaGenericTableService = annaGenericTableService;
-        this.maximumRowsWhichCanBeRenderedWithoutScroll = 5;
-        this.includeBorderInTableHeight = true;
-        this.toggleCheckbox = new EventEmitter();
-        this.toggleRowCheckbox = new EventEmitter();
-        this.toggleHeaderCheckbox = new EventEmitter();
-        this.undoIconClicked = new EventEmitter();
-        this.filterAppliedToTable = new EventEmitter();
-        this.sortingAppliedToTable = new EventEmitter();
-        this.rowClicked = new EventEmitter();
-        this.radioButtonSelected = new EventEmitter();
-        this.columnFilterOpened = new EventEmitter();
-        this.columnFilterClosed = new EventEmitter();
-        this.gtIconClicked = new EventEmitter();
-        this.gtSVGIconClicked = new EventEmitter();
-        this.gtTextActionClicked = new EventEmitter();
-        this.gtViewDetailClicked = new EventEmitter();
-        this.downloadSpotDetails = new EventEmitter();
-        this.noDataWidth = "55%";
-        this.disableClearAllBtn = true;
-        this.disableColumnClearAllBtn = true;
-        this.allSelected = 0;
-        this.options = {
-            floor: 0,
-            ceil: 0,
-            step: 0.1
-        };
-        this.tableColumns = [];
-        this.totalRowColumns = null;
-        this.isScrolledLeft = false;
-        this.rowBorderWidth = 2;
-        this.showSortComponent = false;
-        this.showFilterComponent = false;
-        this.tempSortOrder = null;
-        this.calendarSelection = { fromDate: null, toDate: null };
-        this.showNoDataToDisplay = false;
-        this.marginTop = "";
-        this.setTooltipRadioNames();
-    }
-    ngAfterViewChecked() {
-        if (this.gtGeneralConfig.component && this.gtGeneralConfig.component.includes("ORDER_LISTING") || this.gtGeneralConfig.component == "DRRLISTING") {
-            this.setMarginLeftForFilterIcon();
-        }
-    }
-    ngOnInit() {
-    }
-    ngOnChanges(changes) {
-        if (this.showSkeletonLoading) {
-            this.tableData = this.numberOfSkeletonColumns;
-            this.annaFilterService.initialValueMap = new Map();
-        }
-        else {
-            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.marginTop = (-this.gtDimension.rowHeight - (this.gtDimension.rowHeight / 2)) + 'px';
-                this.showNoDataToDisplay = true;
-            }
-            else {
-                this.showNoDataToDisplay = 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) {
-        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 Code");
-        this.tooltipRadioTextMap.set("flightStartDate", "Start Date");
-        this.tooltipRadioTextMap.set("flightEndDate", "End Date");
-        this.tooltipRadioTextMap.set("orderIdAndRevNumber", "STN Order#-Rev#");
-        this.tooltipRadioTextMap.set("alternateOrderId", "Buyer 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", "Pending Audience Delta");
-        this.tooltipRadioTextMap.set("startEndTimeMulti", "Time");
-        this.tooltipRadioTextMap.set("bookedValue", "Booked");
-        this.tooltipRadioTextMap.set("bookedSpots", "Spots");
-        this.tooltipRadioTextMap.set("userChanges", "Other changes");
-        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 PE");
-        this.tooltipRadioTextMap.set("osPreempt", "O/S PE");
-        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("productCode", "Product Code");
-        this.tooltipRadioTextMap.set("buyerOrderId", "ALT Order#");
-        this.tooltipRadioTextMap.set("demo", "Demo");
-        this.tooltipRadioTextMap.set("postedAdu", "Posted ADUs");
-        this.tooltipRadioTextMap.set("scheduledAdu", "Scheduled ADUs");
-        this.tooltipRadioTextMap.set("audienceDeficit", "Audience Deficit");
-        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");
-    }
-    generateTableDataWrapper() {
-        this.showSkeletonLoading = true;
-        this.tableDataWrapper = [];
-        let rowObject;
-        let columnName;
-        let columnObject;
-        let columnObjectKey;
-        let keysUsedForTableDisplay;
-        let keysUsedForColumn;
-        let additionalInfoObject;
-        let additionalKeys;
-        this.tableData.forEach((obj) => {
-            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, columnKeys, isCheckboxSelected) {
-        this.toggleCheckbox.emit({ rowData, columnKeys, isCheckboxSelected });
-    }
-    selectUnselectAllRows() {
-        this.toggleHeaderCheckbox.emit();
-    }
-    selectUnselectRow(rowData) {
-        this.toggleRowCheckbox.emit(rowData);
-    }
-    undoCreditedSpot(data) {
-        this.undoIconClicked.emit({ data, mgOrCredit: "Credit" });
-    }
-    undoMgSpot(data) {
-        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) {
-        return this.annaFilterService.isTooltipActive(header, this.annaSortService.columnSortState);
-    }
-    bindTheValueToToolTip(tooltip, header) {
-        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 = [];
-            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, enabledHeaders) {
-        header.filterSortObjectKeys.forEach((item) => {
-            if (item == "period") {
-                let uniqStartDate = uniq(this.tableData.map((u) => u["startDate"]));
-                let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
-                if (uniqStartDate.length > 1 || uniqEndDate.length > 1 || this.isTooltipActive([item])) {
-                    enabledHeaders.push(item);
-                }
-            }
-            else if (uniq(this.tableData.map((u) => u[item])).length > 1 || this.isTooltipActive([item])) {
-                enabledHeaders.push(item);
-            }
-        });
-    }
-    openTooltip(tooltip, header, columnHeader) {
-        this.closeTooltip();
-        this.tooltip = tooltip;
-        this.tooltip.open();
-        //convert key into the header
-        this.filterTabObjects = header.map((key, index) => {
-            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);
-    }
-    populateTooltipDataBasedOnSelectedRadio(activeTab) {
-        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) {
-        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) {
-        this.createOptionsForSlider(header);
-        this.setSelectedRangeForSlider(header);
-    }
-    createOptionsForSlider(header) {
-        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) {
-        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) {
-        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);
-        this.disableSelectAll = unselectedItems.length == 0;
-        this.disableClearAll = selectedItems.length == 0;
-        this.selectedCheckboxOptionsCount = selectedItems.length;
-    }
-    createListForCheckboxFilter(header) {
-        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, header) {
-        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) {
-        let minStartDate = this.annaFilterService.returnMinAndMaxDate(optionData, "startDate");
-        let maxEndDate = this.annaFilterService.returnMinAndMaxDate(optionData, "endDate");
-        return [minStartDate[0], maxEndDate[1]];
-    }
-    selectRangeForTheDateFilter(minMaxDate, parsingFormat) {
-        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) {
-        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) {
-        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) {
-        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) {
-        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) {
-        if (val || val == '0') {
-            this.sliderEnteredMinValue = parseInt(val);
-            this.isMinTextBoxEmpty = false;
-            if (this.isMaxTextBoxEmpty) {
-                if (this.sliderEnteredMinValue > this.options.ceil) {
-                    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) {
-        if (val || val == "0") {
-            this.sliderEnteredMaxValue = parseInt(val);
-            this.isMaxTextBoxEmpty = false;
-            if (this.isMinTextBoxEmpty) {
-                if (this.sliderEnteredMaxValue < this.options.floor) {
-                    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;
-        }
-        this.disableSliderApplyBtn();
-    }
-    isValueInRange(val) {
-        return this.options.floor <= val && val <= this.options.ceil;
-    }
-    disableSliderApplyBtn() {
-        if (this.showFilterComponent && this.showSortComponent) {
-            this.disableSliderApplyButton = this.incorrectSliderInput || (!this.checkIfSortingChanged() && !this.checkIfSliderTooltipIsFiltered());
-        }
-        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.disableEnableEachColumnTooltipIcon();
-        this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
-        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) => 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) {
-        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.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
-        this.closeTooltip();
-    }
-    applySliderFilterOnData() {
-        if (this.showFilterComponent && this.isFilterChanged) {
-            let currentSliderData = { 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.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) {
-    }
-    incrementHour(arr) {
-        if (arr[0] == "") {
-            arr[0] = 1;
-        }
-        else if (parseInt(arr[0]) < 12) {
-            arr[0] = parseInt(arr[0]) + 1;
-        }
-        else {
-            arr[0] = 1;
-        }
-    }
-    decrementHour(arr) {
-        if (arr[0] == "") {
-            arr[0] = 12;
-        }
-        else if (parseInt(arr[0]) > 1) {
-            arr[0] = parseInt(arr[0]) - 1;
-        }
-        else {
-            arr[0] = 12;
-        }
-    }
-    incrementMinute(arr) {
-        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) {
-        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) {
-        if (increment) {
-            this.incrementHour(this.selectedFromTime);
-        }
-        else {
-            this.decrementHour(this.selectedFromTime);
-        }
-        this.startTimeHourChange(this.selectedFromTime[0].toString());
-    }
-    changeEndTimeHour(increment) {
-        if (increment) {
-            this.incrementHour(this.selectedToTime);
-        }
-        else {
-            this.decrementHour(this.selectedToTime);
-        }
-        this.endTimeHourChange(this.selectedToTime[0].toString());
-    }
-    changeEndTimeMinute(increment) {
-        if (increment) {
-            this.incrementMinute(this.selectedToTime);
-        }
-        else {
-            this.decrementMinute(this.selectedToTime);
-        }
-        this.endTimeMinChange(this.selectedToTime[1].toString());
-    }
-    changeStartTimeMinute(increment) {
-        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.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
-        this.closeTooltip();
-    }
-    applyTimeFilterOnData() {
-        if (this.showFilterComponent && this.isFilterChanged) {
-            let currentSelectedTimeFilter = {
-                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) {
-            this.disableTimeFilterApplyBtn = !this.validateTimeFilterInput() || (!this.checkIfSortingChanged() && !this.checkIfTimeTooltipIsFiltered());
-        }
-        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) {
-        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) => u["startDate"]));
-                            let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
-                            item.disableTooltipIcon = (uniqStartDate.length > 1 || uniqEndDate.length > 1) ? false : true;
-                        }
-                        else {
-                            values = this.tableData.map((u) => u[key]);
-                            if (uniq(values).filter(n => n != null).length > 1) {
-                                item.disableTooltipIcon = false;
-                            }
-                        }
-                    });
-                }
-            });
-        });
-    }
-    ngAfterViewInit() {
-        // this.annaGenericTableService.virtualScrollSubject.subscribe((val) =>{
-        //   this.isScrolledLeft = document.getElementsByClassName("table-container")[0].scrollLeft > 0;
-        //   this.cdRef.detectChanges();
-        // });
-        // let container = document.getElementsByClassName("table-container")[0];
-        // fromEvent(container, 'scroll')
-        // .subscribe((event: Event) => 
-        // {
-        //   this.isScrolledLeft = (event.target as Element).scrollLeft > 0;
-        // });
-    }
-    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) {
-        this.rowClicked.emit(rowData);
-    }
-    radioButtonClicked(data, action, isDisabled) {
-        if (!isDisabled) {
-            this.radioButtonSelected.emit({ data, action });
-        }
-    }
-    bindTheValueToSellerGroupTooltip(sellerGroupHierarchy, tooltip) {
-        if (this.hierarchyTooltip && this.hierarchyTooltip.open) {
-            this.hierarchyTooltip.close();
-        }
-        this.sellerGroupHierarchy = sellerGroupHierarchy;
-        this.hierarchyTooltip = tooltip;
-        this.hierarchyTooltip.open();
-    }
-    iconClicked(rowData, iconClass) {
-        this.gtIconClicked.emit({ data: rowData, iconClass: iconClass });
-    }
-    svgIconClicked(data) {
-        this.gtSVGIconClicked.emit(data);
-    }
-    textActionClicked(rowData, id) {
-        this.gtTextActionClicked.emit({ data: rowData, id });
-    }
-    viewDetailsClicked(rowData) {
-        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) {
-        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) {
-        if (str) {
-            this.tooltipOptions = cloneDeep(this.clonedTooltipOptions.filter(item => item.value.toString().includes(str)));
-            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, find) {
-        var re = new RegExp(find, 'g');
-        return str.replace(re, '<b>' + find + '</b>');
-    }
-    removeBoldElementFromString(originalString) {
-        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) {
-        this.calendarSelection = event;
-        this.disableCalendarApplyButton();
-    }
-    disableCalendarApplyButton() {
-        if (this.showFilterComponent && this.showSortComponent) {
-            this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate) || (!this.checkIfSortingChanged() && !this.checkIfDateTooltipIsFiltered());
-        }
-        else if (this.showFilterComponent) {
-            this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate) || !this.checkIfDateTooltipIsFiltered();
-        }
-        else if (this.showSortComponent) {
-            this.disableCalendarApplyBtn = !this.checkIfSortingChanged();
-        }
-    }
-    setInitialValueMapForTimeFilter(key) {
-        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) {
-        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) {
-        if (val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12) {
-            this.startTimeHourErr = true;
-        }
-        else {
-            this.startTimeHourErr = false;
-        }
-        this.disableTimeFilterApplyButton();
-    }
-    startTimeMinChange(val) {
-        if (val.length != 2 || 0 > parseInt(val) || parseInt(val) > 59) {
-            this.startTimeMinErr = true;
-        }
-        else {
-            this.startTimeMinErr = false;
-        }
-        this.disableTimeFilterApplyButton();
-    }
-    endTimeHourChange(val) {
-        if (val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12) {
-            this.endTimeHourErr = true;
-        }
-        else {
-            this.endTimeHourErr = false;
-        }
-        this.disableTimeFilterApplyButton();
-    }
-    endTimeMinChange(val) {
-        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) => item == null);
-        if (blankIndex != -1) {
-            currentSelectedValue = sortBy(currentSelectedValue);
-        }
-        this.isFilterChanged = !isEqual(currentSelectedValue, previousSelectedValue);
-        return this.isFilterChanged;
-    }
-    checkIfTimeTooltipIsFiltered() {
-        let currentSelectedTimeFilter = {
-            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: 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: null, max: null };
-        let previousSliderData = { 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) {
-            this.disableCheckboxApply = selectedItems.length == 0 || (!this.checkIfSortingChanged() && !this.checkIfCheckboxTooltipIsFiltered());
-        }
-        else if (this.showFilterComponent) {
-            this.disableCheckboxApply = selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered();
-        }
-        else if (this.showSortComponent) {
-            this.disableCheckboxApply = !this.checkIfSortingChanged();
-        }
-    }
-    trackByTooltipModelId(index, item) {
-        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) {
-        this.isDifferenceLessThan25Percent = value;
-    }
-    spotDetailsDownloadClicked(parentChildOrTotalRow, rowdata) {
-        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) {
-        this.isScrolledLeft = event.target.scrollLeft > 0;
-    }
-}
-AnnaNonEditableGenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNonEditableGenericTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AnnaSortService }, { token: i1.AnnaDateTimeFormatService }, { token: i1.AnnaFilterService }, { token: i1.AnnaGenericTableService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaNonEditableGenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaNonEditableGenericTableComponent, selector: "anna-core-non-editable-generic-table-lib", inputs: { showSkeletonLoading: "showSkeletonLoading", tableHeaders: "tableHeaders", tableData: "tableData", clonedTableData: "clonedTableData", numberOfSkeletonRows: "numberOfSkeletonRows", numberOfSkeletonColumns: "numberOfSkeletonColumns", gtGeneralConfig: "gtGeneralConfig", totalRowInfo: "totalRowInfo", gtDimension: "gtDimension", tableClass: "tableClass", maximumRowsWhichCanBeRenderedWithoutScroll: "maximumRowsWhichCanBeRenderedWithoutScroll", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone" }, outputs: { toggleCheckbox: "toggleCheckbox", toggleRowCheckbox: "toggleRowCheckbox", toggleHeaderCheckbox: "toggleHeaderCheckbox", undoIconClicked: "undoIconClicked", filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", rowClicked: "rowClicked", radioButtonSelected: "radioButtonSelected", columnFilterOpened: "columnFilterOpened", columnFilterClosed: "columnFilterClosed", gtIconClicked: "gtIconClicked", gtSVGIconClicked: "gtSVGIconClicked", gtTextActionClicked: "gtTextActionClicked", gtViewDetailClicked: "gtViewDetailClicked", downloadSpotDetails: "downloadSpotDetails" }, viewQueries: [{ propertyName: "sortComponent", predicate: AnnaSortComponent, descendants: true }, { propertyName: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" (scroll)=\"tableContainerScrolled($event)\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\">\r\n    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + (includeBorderInTableHeight ? rowBorderWidth : 0)) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + ( includeBorderInTableHeight ? (2 * rowBorderWidth) : 0))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\" [ngClass]=\"tableClass\" mat-table [dataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length ) ||\r\n                    (showNoDataToDisplay) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': showNoDataToDisplay}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                [style.background-color]=\"rowData.backgroundColor\"\r\n                [style.border]=\"rowData.border\" (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    <strong>{{ column.data }}</strong>\r\n                    <ng-container *ngIf=\"column.lowerData\">\r\n                        <br>\r\n                        <span \r\n                            *ngIf=\"column.colName == 'total-potential-booked-unit' && gtGeneralConfig.component == 'RATING';\r\n                            else columnLowerData\"\r\n                            class=\"clickable-data\"\r\n                            (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                            [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                            >{{ column.lowerData }}\r\n                            <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                            <ng-container *ngIf=\"downloadInProgress \r\n                                    && selectedRowTypeForDownload == 'TOTALROW' \">\r\n                                <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                            </ng-container>\r\n                        </span>\r\n                        <ng-template #columnLowerData>\r\n                            <span>{{ column.lowerData }}</span>\r\n                        </ng-template>\r\n                      </ng-container>\r\n                    <ng-container *ngIf=\"column.tooltipMessage\">\r\n                      <i class=\"mi mdi-info-outline info-label\" container=\"body\"\r\n                      [ngbTooltip]=\"column.tooltipMessage\"\r\n                      tooltipClass=\"gt-total-row-tooltip\" placement=\"bottom\"></i>\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container [matColumnDef]=\"columnDef.headerInfo[0].objectKey\" *ngFor=\"let columnDef of tableHeaders;  trackBy: trackByFn\">\r\n                <th #tableHeader nowrap mat-header-cell *matHeaderCellDef [style.width]=\"columnDef.width\">\r\n                    <div class=\"row mx-0\" *ngFor=\"let header of columnDef.headerInfo; let j = index;\">    \r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            {{ header.name }}\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'impsInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'spotsColumnEquivalizationMessageTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <!-- Active tooltip Functionality -->\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],       \r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-checkbox-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'SLIDER'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-slider-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t1=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t1, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'DATE'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"bottom auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-datepicker-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t2=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t2, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'WEEK'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"weekPickerToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t3=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t3, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'TIME'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-time-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container\r\n                                *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <td\r\n                                    mat-cell\r\n                                    *ngIf=\"!ROW_DATA['hide' + subline.objectKey + 'Td']\"\r\n                                    [attr.rowspan]=\"ROW_DATA[subline.objectKey + 'Rowspan']\"\r\n                                >\r\n                                    <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                            <mat-radio-group\r\n                                                *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                                [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                                >\r\n                                                    <mat-radio-button\r\n                                                        value=\"{{ radioButton.value }}\"\r\n                                                        class=\"{{ radioButton.class }}\"\r\n                                                        (click)=\"\r\n                                                            radioButtonClicked(\r\n                                                                ROW_DATA,\r\n                                                                radioButton.value,\r\n                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                            )\r\n                                                        \"\r\n                                                        >{{ radioButton.label }}</mat-radio-button\r\n                                                    ><br *ngIf=\"!last\" />\r\n                                                </ng-container>\r\n                                            </mat-radio-group>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            {{ ROW_DATA[subline.objectKey] }}\r\n\r\n                                            <ng-container\r\n                                                *ngIf=\"\r\n                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                                \"\r\n                                            >\r\n                                                <i\r\n                                                    class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                    [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"remarks-info-tooltip\"\r\n                                                    #t=\"ngbTooltip\"\r\n                                                ></i>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\">\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && !showNoDataToDisplay\">\r\n                                <div showEllipsisTextOnHover *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                    <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                            <anna-core-anna-icon-column [componentName]=\"gtGeneralConfig.component\" [objectKey]=\"subline.objectKey\" [dataObject]=\"ROW_DATA\" (onColumnIconClicked)=\"svgIconClicked($event)\"></anna-core-anna-icon-column>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                            <button *ngFor=\"let text of ROW_DATA.textActions\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\" class=\"{{text.class}}\">{{text.name}}</button>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        false\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        true\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                            <span \r\n                                                *ngIf=\"subline.objectKey == 'displayBookedUnits' && gtGeneralConfig.component == 'RATING'\"\r\n                                                class=\"clickable-data\"\r\n                                                (click)=\"spotDetailsDownloadClicked('DATAROW', ROW_DATA)\"\r\n                                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                                >{{ ROW_DATA.displayBookedUnits}}\r\n                                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                                <ng-container *ngIf=\"downloadInProgress \r\n                                                        && ROW_DATA.inventoryCodeId == selectedInventoryIdForDownload \r\n                                                        && ROW_DATA.demographic == selectedDemographicForDownload \">\r\n                                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                                </ng-container>\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                                <span>{{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}</span>\r\n                                                <i\r\n                                                    *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    [ngbTooltip]=\"sellerHierarchyTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    triggers=\"manual\"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"hierarchy-tooltip\"\r\n                                                    (mouseenter)=\"bindTheValueToSellerGroupTooltip(ROW_DATA.sellerGroupHierarchy, info)\">\r\n                                                </i>\r\n\r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedRatingDifference\"\r\n                                                >\r\n                                                </i>\r\n                                            \r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedImpDifference\"\r\n                                                >\r\n                                                </i>\r\n\r\n                                            </ng-container>\r\n                                            <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                                <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                        {{ ROW_DATA.descriptionMessage }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                        Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                </p>\r\n                                                <a\r\n                                                    href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                    target=\"_blank\"\r\n                                                    *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                                >\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                </a>\r\n                                                <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                                    <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                      <button class=\"btn viewDetailsAndEmailBtn\">View details</button>\r\n                                                    </a>                \r\n                                                </ng-container>\r\n                                               \r\n                                                <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl\">\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                                </a>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n    \r\n                                    <ng-container\r\n                                        *ngIf=\"\r\n                                            gtGeneralConfig.page === 'SpotDetails' &&\r\n                                            columnDef.headerInfo[subLineIndex].objectKey === 'Status'\r\n                                        \"\r\n                                    >\r\n                                        <img\r\n                                            src=\"assets/images/Undo-Credit-Icon.svg\"\r\n                                            style=\"cursor: pointer\"\r\n                                            class=\"img-circle\"\r\n                                            alt=\"User Image\"\r\n                                            height=\"15px\"\r\n                                            width=\"15px\"\r\n                                            *ngIf=\"ROW_DATA.AllowUserToUndoMarkForCredit\"\r\n                                            (click)=\"undoCreditedSpot(ROW_DATA)\"\r\n                                        />\r\n                                        <img\r\n                                            src=\"assets/images/Undo-MG-Icon.svg\"\r\n                                            style=\"cursor: pointer\"\r\n                                            class=\"img-circle\"\r\n                                            alt=\"User Image\"\r\n                                            height=\"15px\"\r\n                                            width=\"15px\"\r\n                                            *ngIf=\"ROW_DATA.AllowUserToUndoMarkForMakeGood\"\r\n                                            (click)=\"undoMgSpot(ROW_DATA)\"\r\n                                        />\r\n                                    </ng-container>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"showNoDataToDisplay\">\r\n                                <div>\r\n                                    {{null}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </div>\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" [marginTop]=\"marginTop\" *ngIf=\"!showSkeletonLoading && showNoDataToDisplay\"> </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n        <anna-core-sort-lib  [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear All</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select All</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div class=\"dropdown-data-container\">\r\n            <!-- Track By func -->\r\n            <ng-container *ngFor=\"let option of tooltipOptions;trackBy: trackByTooltipModelId\">\r\n                <p class=\"input\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n            <span *ngIf=\"showFilterComponent\">({{ selectedCheckboxOptionsCount == tooltipOptions.length && tooltipOptions.length != 0 && !searchItem? 'All': selectedCheckboxOptionsCount }})</span>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>   \r\n        </div>\r\n    </div>\r\n    <!-- <button class=\"column-clear-all align-center\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n        Clear filter\r\n    </button> -->\r\n        \r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <section class=\"min-maxContainer\">\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMinValue\"\r\n                (ngModelChange)=\"minValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMinValueError}\"\r\n                placeholder=\"Min\"\r\n            />\r\n            <span>To</span>\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMaxValue\"\r\n                (ngModelChange)=\"maxValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMaxValueError}\"\r\n                placeholder=\"Max\"\r\n            />\r\n        </section>\r\n        <div class=\"sidebar-slider\">\r\n            <ngx-slider\r\n                class=\"filter-slider\"\r\n                [value]=\"sliderMinValue\"\r\n                [highValue]=\"sliderMaxValue\"\r\n                [options]=\"options\"\r\n            ></ngx-slider>\r\n        </div>\r\n    </ng-container>\r\n    \r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelSliderFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n            (click)=\"applySliderFilter()\"\r\n            [disabled]=\"disableSliderApplyButton\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template>\r\n\r\n<!-- Week Picker Template -->\r\n<ng-template #weekPickerToolTip>\r\n    <div class=\"weekpicker-container\">\r\n        <anna-core-week-calendar-filter-lib\r\n            [week-calendar-config]=\"gtGeneralConfig.multiWeekPickerConfig\"\r\n            (apply)=\"applyWeekFilter($event)\"\r\n            [from-date]=\"calendarMinEnabledDate\"\r\n            [to-date]=\"calendarMaxEnabledDate\"\r\n        >\r\n        </anna-core-week-calendar-filter-lib>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Time Filter Template -->\r\n<ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <!-- Multi time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Multi</p>\r\n            </div>\r\n            <!-- Zero time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Zero</p>\r\n            </div>\r\n            <!-- Enter time range option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n  <p style=\"padding: 0.5rem; color: black;white-space: nowrap;\">This preemption is rejected and not marked for credit.</p>\r\n</ng-template>\r\n\r\n<ng-template #ratingInfoTooltip>\r\n    <p class=\"first-row\">Shows 'Booked Rating' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\">Shows 'Projected Rating' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #impsInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked IMPS' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected IMPS' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #spotsColumnEquivalizationMessageTooltip>\r\n    <p class=\"spot-column-tooltip-message\" >This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.</p>\r\n</ng-template>\r\n\r\n<ng-template #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.inventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #circularProgressBar>\r\n    <circle-progress\r\n        [percent]=\"percentDone\"\r\n        [radius]=\"5\"\r\n        [showTitle]=\"false\"\r\n        [showUnits]=\"false\"\r\n        [showSubtitle]=\"false\"\r\n        [outerStrokeWidth]=\"3\"\r\n        [innerStrokeWidth]=\"3\"\r\n        [space]=\"-3\"\r\n        [outerStrokeColor]=\"'#268bff'\"\r\n        [innerStrokeColor]=\"'#d5d5d5'\"\r\n        [animationDuration]=\"10\"\r\n    ></circle-progress>\r\n</ng-template>\r\n", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:98%;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:85%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider{margin:5px 0 2px!important;width:100%!important}::ng-deep span.ngx-slider-bubble.ngx-slider-model-value{display:block!important;padding:2px!important;box-shadow:#00000059 0 3px 8px!important;height:20px!important}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}::ng-deep .ngx-slider-pointer:after{display:none!important}::ng-deep .ngx-slider-pointer:focus{outline:none!important}::ng-deep span.ngx-slider-bar{background:#ededed!important;height:3px!important}::ng-deep .filter-slider span.ngx-slider-bar.ngx-slider-selection{background:#bdbdbd!important;height:3px!important}::ng-deep .sidebar-slider{margin-bottom:35px!important;margin-left:.3125rem;margin-right:.3125rem}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-high{right:0!important}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-ceil{right:0!important}::ng-deep .ngx-slider.animate{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bubble{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bar{background:rgba(0,0,0,.26)!important;height:3px!important}::ng-deep .ngx-slider-bar.ngx-slider-selection{background:#42a5f5!important;height:3px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container button:last-of-type{background-color:#268bff;color:#fff}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 0 .188rem .5rem}.search-icon{margin:0 4px 0 0;font-size:1.125rem;color:#9b9b9b}.filter-icon{justify-content:right;margin-left:auto;color:#d4d4d4;color:#a1a1a1;font-size:16px;cursor:pointer}.data{margin:0 13px 0 8px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{margin:1px 0 1px 4px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}div.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}div.dropdown-data-container p.input{margin-left:0}div.dropdown-data-container p.input span.mi{padding-left:.4375rem}div.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}div.dropdown-data-container::-webkit-scrollbar{width:.188rem}div.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#cbcbcb;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.625rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:263px!important;overflow-y:initial!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}.upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a!important;margin-bottom:0!important}:host ::ng-deep .gt{table-layout:fixed;margin-bottom:0;width:100%}:host ::ng-deep .gt th,:host ::ng-deep .gt td{padding:2px 8px;line-height:normal}:host ::ng-deep .gt thead tr th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt thead tr th .lower-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt thead tr th{background-color:#ededed;position:sticky;position:-webkit-sticky;top:0;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}:host ::ng-deep .gt thead tr th br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt thead tr th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center}:host ::ng-deep .gt thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td .upper-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#000;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr td .lower-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#a7a7a7;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr:nth-of-type(1) td{border-top:none!important}:host ::ng-deep .gt .custom-column-checkbox-checked,:host ::ng-deep .gt .custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}:host ::ng-deep .gt .custom-column-checkbox-checked{color:#268bff}:host ::ng-deep .gt .custom-column-checkbox-unchecked{color:#4a4a4a}.table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}.table-container::-webkit-scrollbar{width:5px;height:5px}.table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.table-container{overflow-x:auto;overflow-y:auto}.rowSelectCheckbox,#selectAllRowsCheckbox{cursor:pointer}.disable-checkbox{color:#dedede!important;pointer-events:none!important}.mdi-warning{color:#f3c639;font-size:16px;line-height:28px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}.redcolor-status{color:#c62a2a}.redcolor-cell-border{outline:1px solid #ff5353!important;outline-offset:-1px!important}#no-filter-space{width:.875rem}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:1.875rem!important;width:2.625rem;padding:0 .625rem}input.numberInput{margin-right:-.8125rem;padding:0 0 0 .625rem;height:1.875rem}::ng-deep .mat-button-toggle-checked{background-color:#268bff!important;color:#fff!important}::ng-deep .mat-button-toggle-group-appearance-standard{border-radius:0}.hidden{display:none}.no-data-div{margin-top:2.5px}.no-data-div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:.3125rem 1.125rem;border-radius:.25rem}.column-values:nth-of-type(2){color:#a7a7a7!important}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#4a4a4a}.time-filter-checkboxes>div>p{color:#151b1e}.radio-button-dimension,::ng-deep .markForCredit .mat-radio-inner-circle,::ng-deep .markForCredit .mat-radio-outer-circle,::ng-deep .mark-for-credit .mat-radio-inner-circle,::ng-deep .mark-for-credit .mat-radio-outer-circle,::ng-deep .markForMakeGood .mat-radio-inner-circle,::ng-deep .markForMakeGood .mat-radio-outer-circle,::ng-deep .noAction .mat-radio-inner-circle,::ng-deep .noAction .mat-radio-outer-circle,::ng-deep .credit .mat-radio-inner-circle,::ng-deep .credit .mat-radio-outer-circle,::ng-deep .approve .mat-radio-inner-circle,::ng-deep .approve .mat-radio-outer-circle,::ng-deep .reject .mat-radio-inner-circle,::ng-deep .reject .mat-radio-outer-circle,::ng-deep .resubmit .mat-radio-inner-circle,::ng-deep .resubmit .mat-radio-outer-circle,::ng-deep .rejectCreditRequest .mat-radio-inner-circle,::ng-deep .rejectCreditRequest .mat-radio-outer-circle{height:18px!important;width:18px!important}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:red}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:red}::ng-deep .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle{border-color:#00000061!important}::ng-deep .mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-inner-circle{background-color:#00000061!important}::ng-deep tr.white-background-row{background:white}::ng-deep tr.gray-background-row{background:rgba(233,233,233,.5)}.remarks-tooltip,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{top:-1px;float:right}::ng-deep .remarks-info-tooltip .tooltip-inner{max-width:19.25rem!important}.rating-icon,.lur-violation-icon{color:#268bff;cursor:pointer;margin-left:2px;position:relative;left:-2px}::ng-deep .rating-info-tooltip .tooltip-inner{max-width:800px!important}.spots-info-icon{color:#268bff;cursor:pointer;margin-left:2px;margin-top:1px}::ng-deep .spot-info-tooltip .tooltip-inner{left:60px;position:relative;max-width:220px!important;background:#fff;word-break:break-word;display:flex}::ng-deep .spot-info-tooltip-for-orderlisting-table .tooltip-inner{max-width:220px!important;background:#fff;word-break:break-word;display:flex}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important}table.seller-hierarchy-table{table-layout:fixed;margin:.625rem .625rem .625rem .8125rem}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;box-shadow:none!important;border-top:1px solid #d4d4d4}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}.clickable-data{cursor:pointer;color:#268bff!important;display:flex!important;align-items:center}.clickable-data .spot-details-download-icons{font-size:12px}.disabled-clickable-data{pointer-events:none;color:#d4d4d4!important}.spot-column-tooltip-message{color:#000;padding:10px;width:max-content;text-align:left}\n"], components: [{ type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i1.AnnaIconColumnComponent, selector: "anna-core-anna-icon-column", inputs: ["componentName", "objectKey", "dataObject"], outputs: ["onColumnIconClicked"] }, { type: i1.AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { type: i6.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: i7.AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { type: i7.AnnaWeekCalendarComponent, selector: "anna-core-week-calendar-filter-lib", inputs: ["from-date", "to-date", "disabled-dates", "maxDate", "minDate", "week-calendar-config"], outputs: ["apply", "toggle-calendar"] }, { type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i9.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2.MatCellDef, selector: "[matCellDef]" }, { type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.showEllipsisTextOnHoverDirective, selector: "[showEllipsisTextOnHover]" }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNonEditableGenericTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'anna-core-non-editable-generic-table-lib', template: "<div class=\"table-container\" (scroll)=\"tableContainerScrolled($event)\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\">\r\n    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + (includeBorderInTableHeight ? rowBorderWidth : 0)) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + ( includeBorderInTableHeight ? (2 * rowBorderWidth) : 0))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\" [ngClass]=\"tableClass\" mat-table [dataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length ) ||\r\n                    (showNoDataToDisplay) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': showNoDataToDisplay}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                [style.background-color]=\"rowData.backgroundColor\"\r\n                [style.border]=\"rowData.border\" (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    <strong>{{ column.data }}</strong>\r\n                    <ng-container *ngIf=\"column.lowerData\">\r\n                        <br>\r\n                        <span \r\n                            *ngIf=\"column.colName == 'total-potential-booked-unit' && gtGeneralConfig.component == 'RATING';\r\n                            else columnLowerData\"\r\n                            class=\"clickable-data\"\r\n                            (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                            [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                            >{{ column.lowerData }}\r\n                            <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                            <ng-container *ngIf=\"downloadInProgress \r\n                                    && selectedRowTypeForDownload == 'TOTALROW' \">\r\n                                <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                            </ng-container>\r\n                        </span>\r\n                        <ng-template #columnLowerData>\r\n                            <span>{{ column.lowerData }}</span>\r\n                        </ng-template>\r\n                      </ng-container>\r\n                    <ng-container *ngIf=\"column.tooltipMessage\">\r\n                      <i class=\"mi mdi-info-outline info-label\" container=\"body\"\r\n                      [ngbTooltip]=\"column.tooltipMessage\"\r\n                      tooltipClass=\"gt-total-row-tooltip\" placement=\"bottom\"></i>\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container [matColumnDef]=\"columnDef.headerInfo[0].objectKey\" *ngFor=\"let columnDef of tableHeaders;  trackBy: trackByFn\">\r\n                <th #tableHeader nowrap mat-header-cell *matHeaderCellDef [style.width]=\"columnDef.width\">\r\n                    <div class=\"row mx-0\" *ngFor=\"let header of columnDef.headerInfo; let j = index;\">    \r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            {{ header.name }}\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'impsInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'spotsColumnEquivalizationMessageTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <!-- Active tooltip Functionality -->\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],       \r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-checkbox-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'SLIDER'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-slider-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t1=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t1, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'DATE'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"bottom auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-datepicker-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t2=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t2, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'WEEK'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"weekPickerToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t3=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t3, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'TIME'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-time-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container\r\n                                *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <td\r\n                                    mat-cell\r\n                                    *ngIf=\"!ROW_DATA['hide' + subline.objectKey + 'Td']\"\r\n                                    [attr.rowspan]=\"ROW_DATA[subline.objectKey + 'Rowspan']\"\r\n                                >\r\n                                    <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                            <mat-radio-group\r\n                                                *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                                [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                                >\r\n                                                    <mat-radio-button\r\n                                                        value=\"{{ radioButton.value }}\"\r\n                                                        class=\"{{ radioButton.class }}\"\r\n                                                        (click)=\"\r\n                                                            radioButtonClicked(\r\n                                                                ROW_DATA,\r\n                                                                radioButton.value,\r\n                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                            )\r\n                                                        \"\r\n                                                        >{{ radioButton.label }}</mat-radio-button\r\n                                                    ><br *ngIf=\"!last\" />\r\n                                                </ng-container>\r\n                                            </mat-radio-group>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            {{ ROW_DATA[subline.objectKey] }}\r\n\r\n                                            <ng-container\r\n                                                *ngIf=\"\r\n                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                                \"\r\n                                            >\r\n                                                <i\r\n                                                    class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                    [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"remarks-info-tooltip\"\r\n                                                    #t=\"ngbTooltip\"\r\n                                                ></i>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\">\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && !showNoDataToDisplay\">\r\n                                <div showEllipsisTextOnHover *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                    <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                            <anna-core-anna-icon-column [componentName]=\"gtGeneralConfig.component\" [objectKey]=\"subline.objectKey\" [dataObject]=\"ROW_DATA\" (onColumnIconClicked)=\"svgIconClicked($event)\"></anna-core-anna-icon-column>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                            <button *ngFor=\"let text of ROW_DATA.textActions\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\" class=\"{{text.class}}\">{{text.name}}</button>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        false\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        true\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                            <span \r\n                                                *ngIf=\"subline.objectKey == 'displayBookedUnits' && gtGeneralConfig.component == 'RATING'\"\r\n                                                class=\"clickable-data\"\r\n                                                (click)=\"spotDetailsDownloadClicked('DATAROW', ROW_DATA)\"\r\n                                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                                >{{ ROW_DATA.displayBookedUnits}}\r\n                                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                                <ng-container *ngIf=\"downloadInProgress \r\n                                                        && ROW_DATA.inventoryCodeId == selectedInventoryIdForDownload \r\n                                                        && ROW_DATA.demographic == selectedDemographicForDownload \">\r\n                                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                                </ng-container>\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                                <span>{{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}</span>\r\n                                                <i\r\n                                                    *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    [ngbTooltip]=\"sellerHierarchyTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    triggers=\"manual\"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"hierarchy-tooltip\"\r\n                                                    (mouseenter)=\"bindTheValueToSellerGroupTooltip(ROW_DATA.sellerGroupHierarchy, info)\">\r\n                                                </i>\r\n\r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedRatingDifference\"\r\n                                                >\r\n                                                </i>\r\n                                            \r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedImpDifference\"\r\n                                                >\r\n                                                </i>\r\n\r\n                                            </ng-container>\r\n                                            <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                                <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                        {{ ROW_DATA.descriptionMessage }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                        Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                </p>\r\n                                                <a\r\n                                                    href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                    target=\"_blank\"\r\n                                                    *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                                >\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                </a>\r\n                                                <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                                    <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                      <button class=\"btn viewDetailsAndEmailBtn\">View details</button>\r\n                                                    </a>                \r\n                                                </ng-container>\r\n                                               \r\n                                                <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl\">\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                                </a>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n    \r\n                                    <ng-container\r\n                                        *ngIf=\"\r\n                                            gtGeneralConfig.page === 'SpotDetails' &&\r\n                                            columnDef.headerInfo[subLineIndex].objectKey === 'Status'\r\n                                        \"\r\n                                    >\r\n                                        <img\r\n                                            src=\"assets/images/Undo-Credit-Icon.svg\"\r\n                                            style=\"cursor: pointer\"\r\n                                            class=\"img-circle\"\r\n                                            alt=\"User Image\"\r\n                                            height=\"15px\"\r\n                                            width=\"15px\"\r\n                                            *ngIf=\"ROW_DATA.AllowUserToUndoMarkForCredit\"\r\n                                            (click)=\"undoCreditedSpot(ROW_DATA)\"\r\n                                        />\r\n                                        <img\r\n                                            src=\"assets/images/Undo-MG-Icon.svg\"\r\n                                            style=\"cursor: pointer\"\r\n                                            class=\"img-circle\"\r\n                                            alt=\"User Image\"\r\n                                            height=\"15px\"\r\n                                            width=\"15px\"\r\n                                            *ngIf=\"ROW_DATA.AllowUserToUndoMarkForMakeGood\"\r\n                                            (click)=\"undoMgSpot(ROW_DATA)\"\r\n                                        />\r\n                                    </ng-container>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"showNoDataToDisplay\">\r\n                                <div>\r\n                                    {{null}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </div>\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" [marginTop]=\"marginTop\" *ngIf=\"!showSkeletonLoading && showNoDataToDisplay\"> </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n        <anna-core-sort-lib  [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear All</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select All</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div class=\"dropdown-data-container\">\r\n            <!-- Track By func -->\r\n            <ng-container *ngFor=\"let option of tooltipOptions;trackBy: trackByTooltipModelId\">\r\n                <p class=\"input\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n            <span *ngIf=\"showFilterComponent\">({{ selectedCheckboxOptionsCount == tooltipOptions.length && tooltipOptions.length != 0 && !searchItem? 'All': selectedCheckboxOptionsCount }})</span>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>   \r\n        </div>\r\n    </div>\r\n    <!-- <button class=\"column-clear-all align-center\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n        Clear filter\r\n    </button> -->\r\n        \r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <section class=\"min-maxContainer\">\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMinValue\"\r\n                (ngModelChange)=\"minValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMinValueError}\"\r\n                placeholder=\"Min\"\r\n            />\r\n            <span>To</span>\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMaxValue\"\r\n                (ngModelChange)=\"maxValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMaxValueError}\"\r\n                placeholder=\"Max\"\r\n            />\r\n        </section>\r\n        <div class=\"sidebar-slider\">\r\n            <ngx-slider\r\n                class=\"filter-slider\"\r\n                [value]=\"sliderMinValue\"\r\n                [highValue]=\"sliderMaxValue\"\r\n                [options]=\"options\"\r\n            ></ngx-slider>\r\n        </div>\r\n    </ng-container>\r\n    \r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelSliderFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n            (click)=\"applySliderFilter()\"\r\n            [disabled]=\"disableSliderApplyButton\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template>\r\n\r\n<!-- Week Picker Template -->\r\n<ng-template #weekPickerToolTip>\r\n    <div class=\"weekpicker-container\">\r\n        <anna-core-week-calendar-filter-lib\r\n            [week-calendar-config]=\"gtGeneralConfig.multiWeekPickerConfig\"\r\n            (apply)=\"applyWeekFilter($event)\"\r\n            [from-date]=\"calendarMinEnabledDate\"\r\n            [to-date]=\"calendarMaxEnabledDate\"\r\n        >\r\n        </anna-core-week-calendar-filter-lib>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Time Filter Template -->\r\n<ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <!-- Multi time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Multi</p>\r\n            </div>\r\n            <!-- Zero time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Zero</p>\r\n            </div>\r\n            <!-- Enter time range option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n  <p style=\"padding: 0.5rem; color: black;white-space: nowrap;\">This preemption is rejected and not marked for credit.</p>\r\n</ng-template>\r\n\r\n<ng-template #ratingInfoTooltip>\r\n    <p class=\"first-row\">Shows 'Booked Rating' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\">Shows 'Projected Rating' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #impsInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked IMPS' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected IMPS' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #spotsColumnEquivalizationMessageTooltip>\r\n    <p class=\"spot-column-tooltip-message\" >This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.</p>\r\n</ng-template>\r\n\r\n<ng-template #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.inventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #circularProgressBar>\r\n    <circle-progress\r\n        [percent]=\"percentDone\"\r\n        [radius]=\"5\"\r\n        [showTitle]=\"false\"\r\n        [showUnits]=\"false\"\r\n        [showSubtitle]=\"false\"\r\n        [outerStrokeWidth]=\"3\"\r\n        [innerStrokeWidth]=\"3\"\r\n        [space]=\"-3\"\r\n        [outerStrokeColor]=\"'#268bff'\"\r\n        [innerStrokeColor]=\"'#d5d5d5'\"\r\n        [animationDuration]=\"10\"\r\n    ></circle-progress>\r\n</ng-template>\r\n", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:98%;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:85%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider{margin:5px 0 2px!important;width:100%!important}::ng-deep span.ngx-slider-bubble.ngx-slider-model-value{display:block!important;padding:2px!important;box-shadow:#00000059 0 3px 8px!important;height:20px!important}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}::ng-deep .ngx-slider-pointer:after{display:none!important}::ng-deep .ngx-slider-pointer:focus{outline:none!important}::ng-deep span.ngx-slider-bar{background:#ededed!important;height:3px!important}::ng-deep .filter-slider span.ngx-slider-bar.ngx-slider-selection{background:#bdbdbd!important;height:3px!important}::ng-deep .sidebar-slider{margin-bottom:35px!important;margin-left:.3125rem;margin-right:.3125rem}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-high{right:0!important}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-ceil{right:0!important}::ng-deep .ngx-slider.animate{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bubble{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bar{background:rgba(0,0,0,.26)!important;height:3px!important}::ng-deep .ngx-slider-bar.ngx-slider-selection{background:#42a5f5!important;height:3px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container button:last-of-type{background-color:#268bff;color:#fff}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 0 .188rem .5rem}.search-icon{margin:0 4px 0 0;font-size:1.125rem;color:#9b9b9b}.filter-icon{justify-content:right;margin-left:auto;color:#d4d4d4;color:#a1a1a1;font-size:16px;cursor:pointer}.data{margin:0 13px 0 8px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{margin:1px 0 1px 4px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}div.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}div.dropdown-data-container p.input{margin-left:0}div.dropdown-data-container p.input span.mi{padding-left:.4375rem}div.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}div.dropdown-data-container::-webkit-scrollbar{width:.188rem}div.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#cbcbcb;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.625rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:263px!important;overflow-y:initial!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}.upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a!important;margin-bottom:0!important}:host ::ng-deep .gt{table-layout:fixed;margin-bottom:0;width:100%}:host ::ng-deep .gt th,:host ::ng-deep .gt td{padding:2px 8px;line-height:normal}:host ::ng-deep .gt thead tr th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt thead tr th .lower-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt thead tr th{background-color:#ededed;position:sticky;position:-webkit-sticky;top:0;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}:host ::ng-deep .gt thead tr th br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt thead tr th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center}:host ::ng-deep .gt thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td .upper-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#000;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr td .lower-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#a7a7a7;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr:nth-of-type(1) td{border-top:none!important}:host ::ng-deep .gt .custom-column-checkbox-checked,:host ::ng-deep .gt .custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}:host ::ng-deep .gt .custom-column-checkbox-checked{color:#268bff}:host ::ng-deep .gt .custom-column-checkbox-unchecked{color:#4a4a4a}.table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}.table-container::-webkit-scrollbar{width:5px;height:5px}.table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.table-container{overflow-x:auto;overflow-y:auto}.rowSelectCheckbox,#selectAllRowsCheckbox{cursor:pointer}.disable-checkbox{color:#dedede!important;pointer-events:none!important}.mdi-warning{color:#f3c639;font-size:16px;line-height:28px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}.redcolor-status{color:#c62a2a}.redcolor-cell-border{outline:1px solid #ff5353!important;outline-offset:-1px!important}#no-filter-space{width:.875rem}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:1.875rem!important;width:2.625rem;padding:0 .625rem}input.numberInput{margin-right:-.8125rem;padding:0 0 0 .625rem;height:1.875rem}::ng-deep .mat-button-toggle-checked{background-color:#268bff!important;color:#fff!important}::ng-deep .mat-button-toggle-group-appearance-standard{border-radius:0}.hidden{display:none}.no-data-div{margin-top:2.5px}.no-data-div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:.3125rem 1.125rem;border-radius:.25rem}.column-values:nth-of-type(2){color:#a7a7a7!important}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#4a4a4a}.time-filter-checkboxes>div>p{color:#151b1e}.radio-button-dimension,::ng-deep .markForCredit .mat-radio-inner-circle,::ng-deep .markForCredit .mat-radio-outer-circle,::ng-deep .mark-for-credit .mat-radio-inner-circle,::ng-deep .mark-for-credit .mat-radio-outer-circle,::ng-deep .markForMakeGood .mat-radio-inner-circle,::ng-deep .markForMakeGood .mat-radio-outer-circle,::ng-deep .noAction .mat-radio-inner-circle,::ng-deep .noAction .mat-radio-outer-circle,::ng-deep .credit .mat-radio-inner-circle,::ng-deep .credit .mat-radio-outer-circle,::ng-deep .approve .mat-radio-inner-circle,::ng-deep .approve .mat-radio-outer-circle,::ng-deep .reject .mat-radio-inner-circle,::ng-deep .reject .mat-radio-outer-circle,::ng-deep .resubmit .mat-radio-inner-circle,::ng-deep .resubmit .mat-radio-outer-circle,::ng-deep .rejectCreditRequest .mat-radio-inner-circle,::ng-deep .rejectCreditRequest .mat-radio-outer-circle{height:18px!important;width:18px!important}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:red}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:red}::ng-deep .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle{border-color:#00000061!important}::ng-deep .mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-inner-circle{background-color:#00000061!important}::ng-deep tr.white-background-row{background:white}::ng-deep tr.gray-background-row{background:rgba(233,233,233,.5)}.remarks-tooltip,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{top:-1px;float:right}::ng-deep .remarks-info-tooltip .tooltip-inner{max-width:19.25rem!important}.rating-icon,.lur-violation-icon{color:#268bff;cursor:pointer;margin-left:2px;position:relative;left:-2px}::ng-deep .rating-info-tooltip .tooltip-inner{max-width:800px!important}.spots-info-icon{color:#268bff;cursor:pointer;margin-left:2px;margin-top:1px}::ng-deep .spot-info-tooltip .tooltip-inner{left:60px;position:relative;max-width:220px!important;background:#fff;word-break:break-word;display:flex}::ng-deep .spot-info-tooltip-for-orderlisting-table .tooltip-inner{max-width:220px!important;background:#fff;word-break:break-word;display:flex}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important}table.seller-hierarchy-table{table-layout:fixed;margin:.625rem .625rem .625rem .8125rem}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;box-shadow:none!important;border-top:1px solid #d4d4d4}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}.clickable-data{cursor:pointer;color:#268bff!important;display:flex!important;align-items:center}.clickable-data .spot-details-download-icons{font-size:12px}.disabled-clickable-data{pointer-events:none;color:#d4d4d4!important}.spot-column-tooltip-message{color:#000;padding:10px;width:max-content;text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.AnnaSortService }, { type: i1.AnnaDateTimeFormatService }, { type: i1.AnnaFilterService }, { type: i1.AnnaGenericTableService }]; }, propDecorators: { showSkeletonLoading: [{
-                type: Input
-            }], tableHeaders: [{
-                type: Input
-            }], tableData: [{
-                type: Input
-            }], clonedTableData: [{
-                type: Input
-            }], numberOfSkeletonRows: [{
-                type: Input
-            }], numberOfSkeletonColumns: [{
-                type: Input
-            }], gtGeneralConfig: [{
-                type: Input
-            }], totalRowInfo: [{
-                type: Input
-            }], gtDimension: [{
-                type: Input
-            }], tableClass: [{
-                type: Input
-            }], maximumRowsWhichCanBeRenderedWithoutScroll: [{
-                type: Input
-            }], includeBorderInTableHeight: [{
-                type: Input
-            }], downloadInProgress: [{
-                type: Input
-            }], percentDone: [{
-                type: Input
-            }], toggleCheckbox: [{
-                type: Output
-            }], toggleRowCheckbox: [{
-                type: Output
-            }], toggleHeaderCheckbox: [{
-                type: Output
-            }], undoIconClicked: [{
-                type: Output
-            }], filterAppliedToTable: [{
-                type: Output
-            }], sortingAppliedToTable: [{
-                type: Output
-            }], rowClicked: [{
-                type: Output
-            }], radioButtonSelected: [{
-                type: Output
-            }], columnFilterOpened: [{
-                type: Output
-            }], columnFilterClosed: [{
-                type: Output
-            }], gtIconClicked: [{
-                type: Output
-            }], gtSVGIconClicked: [{
-                type: Output
-            }], gtTextActionClicked: [{
-                type: Output
-            }], gtViewDetailClicked: [{
-                type: Output
-            }], downloadSpotDetails: [{
-                type: Output
-            }], sortComponent: [{
-                type: ViewChildren,
-                args: [AnnaSortComponent]
-            }], viewChildTableHeaders: [{
-                type: ViewChildren,
-                args: ['tableHeader']
-            }] } });
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/** Checks if the given ranges are equal. */
-function rangesEqual(r1, r2) {
-    return r1.start == r2.start && r1.end == r2.end;
-}
-/**
- * Scheduler to be used for scroll events. Needs to fall back to
- * something that doesn't rely on requestAnimationFrame on environments
- * that don't support it (e.g. server-side rendering).
- */
-const SCROLL_SCHEDULER = typeof requestAnimationFrame !== "undefined"
-    ? animationFrameScheduler
-    : asapScheduler;
-/**
- * A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`.
- * Uses `top: #px` instead of `transform: translateY(#px)` like the cdk virtual scroll viewport does
- * which avoids flickering of elements in the transformed container with `position: sticky`.
- */
-class AnnaTableVirtualScrollViewportComponent extends CdkScrollable {
-    constructor(elementRef, _changeDetectorRef, ngZone, _scrollStrategy, dir, scrollDispatcher, viewportRuler, annaGtService) {
-        super(elementRef, scrollDispatcher, ngZone, dir);
-        this.elementRef = elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._scrollStrategy = _scrollStrategy;
-        this.annaGtService = annaGtService;
-        /** Emits when the viewport is detached from a CdkVirtualForOf. */
-        this._detachedSubject = new Subject();
-        /** Emits when the rendered range changes. */
-        this._renderedRangeSubject = new Subject();
-        this._orientation = "vertical";
-        // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll
-        // strategy lazily (i.e. only if the user is actually listening to the events). We do this because
-        // depending on how the strategy calculates the scrolled index, it may come at a cost to
-        // performance.
-        /** Emits when the index of the first element visible in the viewport changes. */
-        this.scrolledIndexChange = new Observable((observer) => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
-        /** A stream that emits whenever the rendered range changes. */
-        this.renderedRangeStream = this._renderedRangeSubject;
-        /**
-         * The total size of all content (in pixels), including content that is not currently rendered.
-         */
-        this._totalContentSize = 0;
-        /** A string representing the `style.width` property value to be used for the spacer element. */
-        this._totalContentWidth = "";
-        /** A string representing the `style.height` property value to be used for the spacer element. */
-        this._totalContentHeight = "";
-        /** The currently rendered range of indices. */
-        this._renderedRange = { start: 0, end: 0 };
-        /** The length of the data bound to this viewport (in number of items). */
-        this._dataLength = 0;
-        /** The size of the viewport (in pixels). */
-        this._viewportSize = 0;
-        /** The last rendered content offset that was set. */
-        this._renderedContentOffset = 0;
-        /**
-         * Whether the last rendered content offset was to the end of the content (and therefore needs to
-         * be rewritten as an offset to the start of the content).
-         */
-        this._renderedContentOffsetNeedsRewrite = false;
-        /** Whether there is a pending change detection cycle. */
-        this._isChangeDetectionPending = false;
-        /** A list of functions to run after the next change detection cycle. */
-        this._runAfterChangeDetection = [];
-        /** Subscription to changes in the viewport size. */
-        this._viewportChanges = Subscription.EMPTY;
-        if (!_scrollStrategy) {
-            throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
-        }
-        this._viewportChanges = viewportRuler.change().subscribe(() => {
-            this.checkViewportSize();
-        });
-    }
-    /** The direction the viewport scrolls. */
-    get orientation() {
-        return this._orientation;
-    }
-    set orientation(orientation) {
-        if (this._orientation !== orientation) {
-            this._orientation = orientation;
-            this._calculateSpacerSize();
-        }
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        // It's still too early to measure the viewport at this point. Deferring with a promise allows
-        // the Viewport to be rendered with the correct size before we measure. We run this outside the
-        // zone to avoid causing more change detection cycles. We handle the change detection loop
-        // ourselves instead.
-        this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
-            this._measureViewportSize();
-            this._scrollStrategy.attach(this);
-            this.elementScrolled()
-                .pipe(
-            // Start off with a fake scroll event so we properly detect our initial position.
-            startWith(null), 
-            // Collect multiple events into one until the next animation frame. This way if
-            // there are multiple scroll events in the same frame we only need to recheck
-            // our layout once.
-            auditTime(0, SCROLL_SCHEDULER))
-                .subscribe(() => { this._scrollStrategy.onContentScrolled(); this.annaGtService.virtualScrollSubject.next(true); });
-            this._markChangeDetectionNeeded();
-        }));
-    }
-    ngOnDestroy() {
-        this.detach();
-        this._scrollStrategy.detach();
-        // Complete all subjects
-        this._renderedRangeSubject.complete();
-        this._detachedSubject.complete();
-        this._viewportChanges.unsubscribe();
-        super.ngOnDestroy();
-    }
-    /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */
-    attach(forOf) {
-        if (this._forOf) {
-            throw Error("CdkVirtualScrollViewport is already attached.");
-        }
-        // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
-        // changes. Run outside the zone to avoid triggering change detection, since we're managing the
-        // change detection loop ourselves.
-        this.ngZone.runOutsideAngular(() => {
-            this._forOf = forOf;
-            this._forOf.dataStream
-                .pipe(takeUntil(this._detachedSubject))
-                .subscribe(data => {
-                const newLength = data.length;
-                if (newLength !== this._dataLength) {
-                    this._dataLength = newLength;
-                    this._scrollStrategy.onDataLengthChanged();
-                }
-                this._doChangeDetection();
-            });
-        });
-    }
-    /** Detaches the current `CdkVirtualForOf`. */
-    detach() {
-        this._forOf = null;
-        this._detachedSubject.next();
-    }
-    /** Gets the length of the data bound to this viewport (in number of items). */
-    getDataLength() {
-        return this._dataLength;
-    }
-    /** Gets the size of the viewport (in pixels). */
-    getViewportSize() {
-        return this._viewportSize;
-    }
-    // TODO(mmalerba): This is technically out of sync with what's really rendered until a render
-    // cycle happens. I'm being careful to only call it after the render cycle is complete and before
-    // setting it to something else, but its error prone and should probably be split into
-    // `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
-    /** Get the current rendered range of items. */
-    getRenderedRange() {
-        return this._renderedRange;
-    }
-    /**
-     * Sets the total size of all content (in pixels), including content that is not currently
-     * rendered.
-     */
-    setTotalContentSize(size) {
-        if (this._totalContentSize !== size) {
-            this._totalContentSize = size;
-            this._calculateSpacerSize();
-            this._markChangeDetectionNeeded();
-        }
-    }
-    /** Sets the currently rendered range of indices. */
-    setRenderedRange(range) {
-        if (!rangesEqual(this._renderedRange, range)) {
-            this._renderedRangeSubject.next((this._renderedRange = range));
-            this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());
-        }
-    }
-    /**
-     * Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
-     */
-    getOffsetToRenderedContentStart() {
-        return this._renderedContentOffsetNeedsRewrite
-            ? null
-            : this._renderedContentOffset;
-    }
-    /**
-     * Sets the offset from the start of the viewport to either the start or end of the rendered data
-     * (in pixels).
-     */
-    setRenderedContentOffset(offset) {
-        let top = `${Number(offset)}px`;
-        this._renderedContentOffset = offset;
-        if (this._renderedContentTransform != top) {
-            // We know this value is safe because we parse `offset` with `Number()` before passing it
-            // into the string.
-            this._renderedContentTransform = top;
-            this._markChangeDetectionNeeded(() => {
-                if (this._renderedContentOffsetNeedsRewrite) {
-                    this._renderedContentOffset -= this.measureRenderedContentSize();
-                    this._renderedContentOffsetNeedsRewrite = false;
-                    this.setRenderedContentOffset(this._renderedContentOffset);
-                }
-                else {
-                    this._scrollStrategy.onRenderedOffsetChanged();
-                }
-            });
-        }
-    }
-    /**
-     * Scrolls to the given offset from the start of the viewport. Please note that this is not always
-     * the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
-     * direction, this would be the equivalent of setting a fictional `scrollRight` property.
-     * @param offset The offset to scroll to.
-     * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
-     */
-    scrollToOffset(offset, behavior = "auto") {
-        const options = { behavior, top: offset };
-        this.scrollTo(options);
-    }
-    /**
-     * Scrolls to the offset for the given index.
-     * @param index The index of the element to scroll to.
-     * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
-     */
-    scrollToIndex(index, behavior = "auto") {
-        this._scrollStrategy.scrollToIndex(index, behavior);
-    }
-    /**
-     * Gets the current scroll offset from the start of the viewport (in pixels).
-     * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
-     *     in horizontal mode.
-     */
-    //  CHANGES@ANNALIB added override to functions
-    measureScrollOffset(from) {
-        return from
-            ? super.measureScrollOffset(from)
-            : super.measureScrollOffset("top");
-    }
-    /** Measure the combined size of all of the rendered items. */
-    measureRenderedContentSize() {
-        const contentEl = this._contentWrapper.nativeElement;
-        return contentEl.offsetHeight;
-    }
-    /**
-     * Measure the total combined size of the given range. Throws if the range includes items that are
-     * not rendered.
-     */
-    measureRangeSize(range) {
-        if (!this._forOf) {
-            return 0;
-        }
-        return this._forOf.measureRangeSize(range, this.orientation);
-    }
-    /** Update the viewport dimensions and re-render. */
-    checkViewportSize() {
-        // TODO: Cleanup later when add logic for handling content resize
-        this._measureViewportSize();
-        this._scrollStrategy.onDataLengthChanged();
-    }
-    /** Measure the viewport size. */
-    _measureViewportSize() {
-        const viewportEl = this.elementRef.nativeElement;
-        this._viewportSize = viewportEl.clientHeight;
-    }
-    /** Queue up change detection to run. */
-    _markChangeDetectionNeeded(runAfter) {
-        if (runAfter) {
-            this._runAfterChangeDetection.push(runAfter);
-        }
-        // Use a Promise to batch together calls to `_doChangeDetection`. This way if we set a bunch of
-        // properties sequentially we only have to run `_doChangeDetection` once at the end.
-        if (!this._isChangeDetectionPending) {
-            this._isChangeDetectionPending = true;
-            this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
-                this._doChangeDetection();
-            }));
-        }
-    }
-    /** Run change detection. */
-    _doChangeDetection() {
-        this._isChangeDetectionPending = false;
-        // Apply the content transform. The transform can't be set via an Angular binding because
-        // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
-        // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
-        // the `Number` function first to coerce it to a numeric value.
-        this._contentWrapper.nativeElement.style.top = this._renderedContentTransform;
-        // Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
-        // from the root, since the repeated items are content projected in. Calling `detectChanges`
-        // instead does not properly check the projected content.
-        this.ngZone.run(() => this._changeDetectorRef.markForCheck());
-        const runAfterChangeDetection = this._runAfterChangeDetection;
-        this._runAfterChangeDetection = [];
-        for (const fn of runAfterChangeDetection) {
-            fn();
-        }
-    }
-    /** Calculates the `style.width` and `style.height` for the spacer element. */
-    _calculateSpacerSize() {
-        this._totalContentHeight = `${this._totalContentSize}px`;
-        this._totalContentWidth = "";
-    }
-}
-AnnaTableVirtualScrollViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaTableVirtualScrollViewportComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: VIRTUAL_SCROLL_STRATEGY, optional: true }, { token: i1$1.Directionality, optional: true }, { token: i2$1.ScrollDispatcher }, { token: i2$1.ViewportRuler }, { token: i1.AnnaGenericTableService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaTableVirtualScrollViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaTableVirtualScrollViewportComponent, selector: "anna-table-virtual-scroll-viewport", inputs: { orientation: "orientation" }, outputs: { scrolledIndexChange: "scrolledIndexChange" }, host: { properties: { "class.anna-table-virtual-scroll-orientation-horizontal": "orientation === \"horizontal\"", "class.anna-table-virtual-scroll-orientation-vertical": "orientation !== \"horizontal\"" }, classAttribute: "anna-table-virtual-scroll-viewport" }, providers: [
-        {
-            provide: CdkScrollable,
-            useExisting: AnnaTableVirtualScrollViewportComponent
-        },
-        {
-            provide: CdkVirtualScrollViewport,
-            useExisting: AnnaTableVirtualScrollViewportComponent
-        }
-    ], viewQueries: [{ propertyName: "_contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Wrap the rendered content in an element that will be used to offset it based on the scroll\r\n  position.\r\n-->\r\n<div #contentWrapper class=\"anna-table-virtual-scroll-content-wrapper\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<!--\r\n  Spacer used to force the scrolling container to the correct size for the *total* number of items\r\n  so that the scrollbar captures the size of the entire data set.\r\n-->\r\n<div class=\"app-table-virtual-scroll-spacer\" [style.width]=\"_totalContentWidth\" [style.height]=\"_totalContentHeight\">\r\n</div>", styles: ["anna-table-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;will-change:scroll-position;-webkit-overflow-scrolling:touch}.anna-table-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .anna-table-virtual-scroll-content-wrapper{right:0;left:auto}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper{min-height:100%}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper{min-width:100%}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.app-table-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .app-table-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaTableVirtualScrollViewportComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "anna-table-virtual-scroll-viewport", host: {
-                        class: "anna-table-virtual-scroll-viewport",
-                        "[class.anna-table-virtual-scroll-orientation-horizontal]": 'orientation === "horizontal"',
-                        "[class.anna-table-virtual-scroll-orientation-vertical]": 'orientation !== "horizontal"'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: CdkScrollable,
-                            useExisting: AnnaTableVirtualScrollViewportComponent
-                        },
-                        {
-                            provide: CdkVirtualScrollViewport,
-                            useExisting: AnnaTableVirtualScrollViewportComponent
-                        }
-                    ], template: "<!--\r\n  Wrap the rendered content in an element that will be used to offset it based on the scroll\r\n  position.\r\n-->\r\n<div #contentWrapper class=\"anna-table-virtual-scroll-content-wrapper\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<!--\r\n  Spacer used to force the scrolling container to the correct size for the *total* number of items\r\n  so that the scrollbar captures the size of the entire data set.\r\n-->\r\n<div class=\"app-table-virtual-scroll-spacer\" [style.width]=\"_totalContentWidth\" [style.height]=\"_totalContentHeight\">\r\n</div>", styles: ["anna-table-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;will-change:scroll-position;-webkit-overflow-scrolling:touch}.anna-table-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .anna-table-virtual-scroll-content-wrapper{right:0;left:auto}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper{min-height:100%}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper{min-width:100%}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.app-table-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .app-table-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [VIRTUAL_SCROLL_STRATEGY]
-                }] }, { type: i1$1.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i2$1.ScrollDispatcher }, { type: i2$1.ViewportRuler }, { type: i1.AnnaGenericTableService }]; }, propDecorators: { orientation: [{
-                type: Input
-            }], scrolledIndexChange: [{
-                type: Output
-            }], _contentWrapper: [{
-                type: ViewChild,
-                args: ["contentWrapper", { static: true }]
-            }] } });
-
-/**
- * A custom scroll strategy that accepts a static row height, static header height,
- * and a buffer size. The strategy
- */
-class AnnaFixedRowSizeTableVirtualScrollStrategy {
-    constructor(rowHeight, buffer, headerHeight) {
-        this._scrolledIndexChange = new Subject();
-        this.scrolledIndexChange = this._scrolledIndexChange.pipe(distinctUntilChanged());
-        this.updateRowHeightAndBuffer(rowHeight, buffer, headerHeight);
-    }
-    /**
-     * Attaches this scroll strategy to a viewport.
-     * @param viewport The viewport to attach this strategy to.
-     */
-    attach(viewport) {
-        this.viewport = viewport;
-        this.updateTotalContentSize();
-        this.updateRenderedRange();
-    }
-    /**
-     * Detaches this scroll strategy from the currently attached viewport.
-     */
-    detach() {
-        this._scrolledIndexChange.complete();
-        this.viewport = null;
-    }
-    onContentScrolled() {
-        this.updateRenderedRange();
-    }
-    onDataLengthChanged() {
-        this.updateTotalContentSize();
-        this.updateRenderedRange();
-    }
-    onContentRendered() {
-        // This method is useful for virtual scroll strategies that measure the rendered
-        // content to determine its height. This scroll strategy assumes that rows have
-        // a static height, so there's no need to implement this method.
-    }
-    onRenderedOffsetChanged() {
-        // Similar to onContentRendered, this method is useful for virtual scroll strategies
-        // that need to track the offset as it changes. This scroll strategy is always able
-        // to calculate the correct offset from other values, so there's no need to implement
-        // this method.
-    }
-    scrollToIndex(index, behavior) {
-        this.viewport?.scrollToOffset(index * this.rowHeight, behavior);
-    }
-    /**
-     * Update the item size and buffer size.
-     * @param rowHeight The height of a row in the virtually scrolling table.
-     * @param buffer The number of rows to buffer outside the viewport.
-     * @param headerHeight The total height of the table header, including all header rows.
-     */
-    updateRowHeightAndBuffer(rowHeight, buffer, headerHeight) {
-        this.rowHeight = rowHeight;
-        this.buffer = buffer;
-        this.headerHeight = headerHeight;
-        this.updateTotalContentSize();
-        this.updateRenderedRange();
-    }
-    updateRenderedRange() {
-        if (!this.viewport) {
-            return;
-        }
-        const viewportSize = this.viewport.getViewportSize();
-        const dataLength = this.viewport.getDataLength();
-        const scrollOffset = this.viewport.measureScrollOffset();
-        // the index of the first item that would be at least partially visible in the viewport
-        let firstVisibleIndex = Math.floor((scrollOffset + this.headerHeight) / this.rowHeight);
-        // if the buffer size is 10 but the first visible item is at, say, index 7
-        // then the buffered items must be 7, because we don't have 10 items available to buffer.
-        const bufferedItems = Math.min(AnnaFilterService.bufferSize, firstVisibleIndex);
-        const itemsInViewport = Math.ceil(viewportSize / this.rowHeight);
-        const itemsToRender = itemsInViewport + this.buffer;
-        // Clamp the new range between 0 and dataLength
-        const newStart = Math.max(0, firstVisibleIndex - bufferedItems);
-        const newEnd = Math.min(dataLength, firstVisibleIndex + itemsToRender);
-        const newRange = {
-            start: newStart,
-            end: newEnd
-        };
-        const newOffset = this.rowHeight * (firstVisibleIndex - bufferedItems);
-        this.viewport.setRenderedContentOffset(newOffset);
-        this.viewport.setRenderedRange(newRange);
-        this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
-    }
-    updateTotalContentSize() {
-        this.viewport?.setTotalContentSize(this.viewport.getDataLength() * this.rowHeight);
-    }
-}
-/**
- * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created
- * `FixedSizeVirtualScrollStrategy` from the given directive.
- * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the
- *     `FixedSizeVirtualScrollStrategy` from.
- */
-function fixedSizeVirtualScrollStrategyFactory(fixedSizeDir) {
-    return fixedSizeDir.scrollStrategy;
-}
-class AnnaFixedRowSizeTableVirtualScrollStrategyDirective {
-    constructor() {
-        this._rowHeight = 30;
-        this._headerRowHeight = 30;
-        this._buffer = 20;
-        this._headerRows = null;
-        this.headerRowCount = 1;
-        /** The scroll strategy used by this directive. */
-        this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(this.rowHeight, this.buffer, this.headerRowHeight * this.headerRowCount);
-    }
-    /** The height of rows in the table (in pixels). Defaults to 30. */
-    set rowHeight(value) { this._rowHeight = coerceNumberProperty(value); }
-    get rowHeight() { return this._rowHeight; }
-    /**
-     * The height of header rows in the table (in pixels). Defaults to 30.
-     */
-    set headerRowHeight(value) { this._headerRowHeight = coerceNumberProperty(value); }
-    get headerRowHeight() { return this._headerRowHeight; }
-    /**
-     * The number of buffered rows rendered beyond the viewport.
-     * If the number of buffered rows dips below this number, more rows will be rendered. Defaults to 20.
-     */
-    set buffer(value) {
-        this._buffer = coerceNumberProperty(value);
-    }
-    get buffer() { return this._buffer; }
-    set headerRows(value) { this._headerRows = coerceNumberProperty(value, undefined); }
-    get headerRows() { return this._headerRows; }
-    ngOnChanges(change) {
-        if (this.headerRows != undefined || this.headerRowsQuery) {
-            this.handleChange();
-        }
-        if (change['buffer']?.previousValue != change['buffer']?.currentValue) {
-            AnnaFilterService.bufferSize = this.buffer;
-            this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(this.rowHeight, this.buffer, this.headerRowHeight * this.headerRowCount);
-        }
-    }
-    ngAfterContentInit() {
-        this.headerRowsQuery.changes.subscribe(() => {
-            this.handleChange();
-        });
-    }
-    handleChange() {
-        this.scrollStrategy.updateRowHeightAndBuffer(this.rowHeight, this.buffer, 
-        // Use the explicit headerRows input value if set.
-        // Otherwise, fall back to the QueryList length.
-        this.headerRowHeight * (this._headerRows ?? this.headerRowsQuery.length));
-    }
-}
-AnnaFixedRowSizeTableVirtualScrollStrategyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AnnaFixedRowSizeTableVirtualScrollStrategyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]", inputs: { rowHeight: "rowHeight", headerRowHeight: "headerRowHeight", buffer: "buffer", headerRows: "headerRows" }, providers: [
-        {
-            provide: VIRTUAL_SCROLL_STRATEGY,
-            useFactory: fixedSizeVirtualScrollStrategyFactory,
-            deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
-        }
-    ], queries: [{ propertyName: "headerRowsQuery", predicate: MatHeaderRowDef }], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]",
-                    providers: [
-                        {
-                            provide: VIRTUAL_SCROLL_STRATEGY,
-                            useFactory: fixedSizeVirtualScrollStrategyFactory,
-                            deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
-                        }
-                    ]
-                }]
-        }], propDecorators: { rowHeight: [{
-                type: Input
-            }], headerRowHeight: [{
-                type: Input
-            }], buffer: [{
-                type: Input
-            }], headerRows: [{
-                type: Input
-            }], headerRowsQuery: [{
-                type: ContentChildren,
-                args: [MatHeaderRowDef]
-            }] } });
-
-/**
- * Directive that wraps a given data source in a "virtual" data source that emits
- * the slice of the original data source that matches the range that should be rendered
- * in the containing virtual scroll viewport.
- */
-class AnnaVirtualTableDirective {
-    constructor(elementRef, viewport, table, ngZone, _coalescedStyleScheduler) {
-        this.viewport = viewport;
-        this.table = table;
-        this._coalescedStyleScheduler = _coalescedStyleScheduler;
-        this.virtualizedDataStream = new Subject();
-        this.dataSourceChanges = new Subject();
-        /** The raw, unvirtualized data stream. Emits whenever the data in the current DataSource changes. */
-        this.dataStream = this.dataSourceChanges
-            .pipe(
-        // Start off with null data source.
-        startWith(null), 
-        // Bundle up the previous and current data sources so we can work with both.
-        pairwise(), 
-        // Use `changeDataSource` to disconnect from the previous data source and connect to the
-        // new one, passing back a stream of data changes which we run through `switchMap` to give
-        // us a data stream that emits the latest data from whatever the current data source is.
-        switchMap(([prev, cur]) => this.changeDataSource(prev, cur)), 
-        // Replay the last emitted data when someone subscribes.
-        shareReplay(1));
-        this.viewChange = new Subject();
-        this.destroyed$ = new Subject();
-        this.renderedRange = { start: 0, end: 0 };
-        this.isNativeHtmlTable = false;
-        table.dataSource = this.virtualizedDataStream;
-        this.isNativeHtmlTable = elementRef.nativeElement.tagName === 'TABLE';
-        this.dataStream.subscribe(data => {
-            this.data = data;
-            this.onRenderedDataChange();
-        });
-        viewport.renderedRangeStream.pipe(takeUntil(this.destroyed$)).subscribe((range) => {
-            this.renderedRange = range;
-            ngZone.run(() => this.viewChange.next(range));
-            this.onRenderedDataChange();
-        });
-        viewport.attach(this);
-    }
-    set dataSource(value) {
-        this._dataSource = value;
-        if (isDataSource(value)) {
-            this.dataSourceChanges.next(value);
-        }
-        else {
-            this.dataSourceChanges.next(new ArrayDataSource(isObservable(value) ? value : Array.from(value || [])));
-        }
-    }
-    get dataSource() {
-        return this._dataSource;
-    }
-    ngOnInit() {
-        // This is just a proof of concept, but the AnnaTableVirtualScrollViewportComponent uses `position: absolute` and `top: #px` instead of `transform: translateY(#px)` to position the viewport.
-        // This removes the need to account for the translation in the `top` of the sticky header rows.
-        if (this.viewport instanceof AnnaTableVirtualScrollViewportComponent) {
-            return;
-        }
-        this.viewport.scrolledIndexChange
-            .pipe(map$1(() => this.viewport.getOffsetToRenderedContentStart()), takeUntil(this.destroyed$))
-            .subscribe((offset) => {
-            // We need to set the `style.top` property of the sticky header rows
-            // to the negative value of the virtual scroll viewport's offset, so
-            // make the offset negative.
-            offset = -offset;
-            const stickyStates = this.headerRowDefs.map(rowDef => rowDef.sticky);
-            // This logic is exactly the same as what's in the StickyStyler (literally copy + paste).
-            // The only difference is that the `stickyOffset` variable starts at the virtual scroll
-            // viewport container's offset instead of starting at zero.
-            const rows = this.table._getRenderedRows(this.table._headerRowOutlet);
-            const stickyOffsets = [];
-            const stickyCellHeights = [];
-            const elementsToStick = [];
-            for (let rowIndex = 0, stickyOffset = offset; rowIndex < rows.length; rowIndex++) {
-                stickyOffsets[rowIndex] = stickyOffset;
-                if (!stickyStates[rowIndex]) {
-                    continue;
-                }
-                const row = rows[rowIndex];
-                elementsToStick[rowIndex] = this.isNativeHtmlTable ? Array.from(row.children) : [row];
-                const height = row.getBoundingClientRect().height;
-                stickyOffset += height;
-                stickyCellHeights[rowIndex] = height;
-            }
-            // Using the CoalescedStyleScheduler here is optional. It'll work without it,
-            // and CoalescedStyleScheduler is not public (yet?), so feel free to remove it.
-            this._coalescedStyleScheduler.schedule(() => {
-                for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-                    if (!stickyStates[rowIndex]) {
-                        continue;
-                    }
-                    for (const element of elementsToStick[rowIndex]) {
-                        element.style.top = `${stickyOffsets[rowIndex]}px`;
-                    }
-                }
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.dataSourceChanges.complete();
-        this.virtualizedDataStream.complete();
-    }
-    /** React to scroll state changes in the viewport. */
-    onRenderedDataChange() {
-        if (!this.renderedRange) {
-            return;
-        }
-        this.renderedItems = this.data.slice(this.renderedRange.start, this.renderedRange.end + 1);
-        // delegate rendering to the table by emitting from the virtualizedDataStream
-        this.virtualizedDataStream.next(this.renderedItems);
-    }
-    /** Swap out one data source for another. */
-    changeDataSource(oldDataSource, newDs) {
-        oldDataSource?.disconnect(this);
-        return newDs ? newDs.connect(this) : of();
-    }
-    /**
-     * This method is only used by the experimental AutoSizeVirtualScrollStrategy.
-     * We're not using that strategy, but I've implemented it just to show how it oculd be done.
-     * I'm not actually sure if this works.
-     */
-    measureRangeSize(range, orientation) {
-        if (orientation === 'horizontal' || range.end < range.start) {
-            // virtual scrolling columns are not supported by this directive
-            return 0;
-        }
-        const renderedBodyRows = this.table._getRenderedRows(this.table._rowOutlet);
-        const firstRow = renderedBodyRows[range.start];
-        const lastRow = renderedBodyRows[range.end];
-        if (!firstRow || !lastRow) {
-            return 0;
-        }
-        // We need to include all header and footer rows in the sum, since they're always rendered
-        const renderedHeaderRows = this.table._getRenderedRows(this.table._headerRowOutlet);
-        const renderedFooterRows = this.table._getRenderedRows(this.table._footerRowOutlet);
-        // TODO (performance): Can we just measure the offset of the first and last items and do some math to avoid having to measure each row individually?
-        const headerHeight = renderedHeaderRows.reduce((sum, row) => {
-            return sum += row.getBoundingClientRect().height;
-        }, 0);
-        const footerHeight = renderedFooterRows.reduce((sum, row) => {
-            return sum += row.getBoundingClientRect().height;
-        }, 0);
-        const bodyHeight = lastRow.getBoundingClientRect().bottom - firstRow.getBoundingClientRect().top;
-        return headerHeight + footerHeight + bodyHeight;
-    }
-}
-AnnaVirtualTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaVirtualTableDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.CdkVirtualScrollViewport }, { token: i2$2.CdkTable }, { token: i0.NgZone }, { token: _COALESCED_STYLE_SCHEDULER }], target: i0.ɵɵFactoryTarget.Directive });
-AnnaVirtualTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: AnnaVirtualTableDirective, selector: "[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]", inputs: { dataSource: ["appVirtualDataSource", "dataSource"] }, providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }], queries: [{ propertyName: "headerRowDefs", predicate: CdkHeaderRowDef }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaVirtualTableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]',
-                    providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.CdkVirtualScrollViewport }, { type: i2$2.CdkTable }, { type: i0.NgZone }, { type: i2$2._CoalescedStyleScheduler, decorators: [{
-                    type: Inject,
-                    args: [_COALESCED_STYLE_SCHEDULER]
-                }] }]; }, propDecorators: { dataSource: [{
-                type: Input,
-                args: ['appVirtualDataSource']
-            }], headerRowDefs: [{
-                type: ContentChildren,
-                args: [CdkHeaderRowDef]
-            }] } });
-
-// Angular import statements
-class AnnaGenericTableLibModule {
-}
-AnnaGenericTableLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaGenericTableLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AnnaGenericTableLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaGenericTableLibModule, declarations: [AnnaNonEditableGenericTableComponent,
-        AnnaSortComponent,
-        AnnaTableVirtualScrollViewportComponent,
-        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
-        AnnaVirtualTableDirective], imports: [CommonModule,
-        NgbModule,
-        AnnaDropdownLibModule,
-        MatButtonToggleModule,
-        FormsModule,
-        NgxSliderModule,
-        NgxSkeletonLoaderModule,
-        MatTableModule,
-        MatRadioModule,
-        AnnaCoreSharedLibModule, i9.NgCircleProgressModule], exports: [AnnaNonEditableGenericTableComponent,
-        AnnaSortComponent,
-        AnnaTableVirtualScrollViewportComponent,
-        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
-        AnnaVirtualTableDirective] });
-AnnaGenericTableLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaGenericTableLibModule, imports: [[
-            CommonModule,
-            NgbModule,
-            AnnaDropdownLibModule,
-            MatButtonToggleModule,
-            FormsModule,
-            NgxSliderModule,
-            NgxSkeletonLoaderModule,
-            MatTableModule,
-            MatRadioModule,
-            AnnaCoreSharedLibModule,
-            NgCircleProgressModule.forRoot({
-                radius: 100,
-                outerStrokeWidth: 16,
-                innerStrokeWidth: 8,
-                outerStrokeColor: '#78C000',
-                innerStrokeColor: '#C7E596',
-                animationDuration: 300,
-            }),
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaGenericTableLibModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        AnnaNonEditableGenericTableComponent,
-                        AnnaSortComponent,
-                        AnnaTableVirtualScrollViewportComponent,
-                        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
-                        AnnaVirtualTableDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                        NgbModule,
-                        AnnaDropdownLibModule,
-                        MatButtonToggleModule,
-                        FormsModule,
-                        NgxSliderModule,
-                        NgxSkeletonLoaderModule,
-                        MatTableModule,
-                        MatRadioModule,
-                        AnnaCoreSharedLibModule,
-                        NgCircleProgressModule.forRoot({
-                            radius: 100,
-                            outerStrokeWidth: 16,
-                            innerStrokeWidth: 8,
-                            outerStrokeColor: '#78C000',
-                            innerStrokeColor: '#C7E596',
-                            animationDuration: 300,
-                        }),
-                    ],
-                    exports: [
-                        AnnaNonEditableGenericTableComponent,
-                        AnnaSortComponent,
-                        AnnaTableVirtualScrollViewportComponent,
-                        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
-                        AnnaVirtualTableDirective
-                    ]
-                }]
-        }] });
-
-//Modules
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AnnaFixedRowSizeTableVirtualScrollStrategy, AnnaFixedRowSizeTableVirtualScrollStrategyDirective, AnnaGenericTableLibModule, AnnaNonEditableGenericTableComponent, AnnaSortComponent, AnnaTableVirtualScrollViewportComponent, AnnaVirtualTableDirective, fixedSizeVirtualScrollStrategyFactory };
-//# sourceMappingURL=annalib-anna-core-src-lib-anna-generic-table-lib.mjs.map