@annalib/anna-core 4.3.8 → 4.4.0

package/fesm2020/annalib-anna-core.mjs

@@ -21,8 +21,10 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as i16 from 'ng-circle-progress';
 import { NgCircleProgressModule } from 'ng-circle-progress';
 import { memoize, min, max, uniq, cloneDeep, isEqual, map, sortBy } from 'lodash-es';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { Subject, BehaviorSubject, animationFrameScheduler, asapScheduler, Observable, Subscription, isObservable, of } from 'rxjs';
+import minMax from 'dayjs/plugin/minMax';
+import isBetween from 'dayjs/plugin/isBetween';
 import * as i1$1 from '@angular/cdk/bidi';
 import { startWith, auditTime, takeUntil, distinctUntilChanged, pairwise, switchMap, shareReplay, map as map$1 } from 'rxjs/operators';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
@@ -75,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 
 class AnnaNoDataComponent {
     constructor() {
-        this.width = "46%";
+        this.width = "48%";
         this.marginTop = "1.25rem";
     }
     ngOnInit() {
@@ -83,10 +85,10 @@ class AnnaNoDataComponent {
     }
 }
 AnnaNoDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaNoDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: { width: "width", marginTop: "marginTop" }, ngImport: i0, template: "<div [style.width]=\"width\" [style.marginTop]=\"marginTop\" class=\"no-data\">\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;width:46%;margin:20px;z-index:400}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AnnaNoDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: { width: "width", marginTop: "marginTop" }, ngImport: i0, template: "<div [style.marginRight]=\"width\" [style.marginTop]=\"marginTop\" class=\"no-data\">\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;margin:20px;z-index:400;transform:translate(50%)}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNoDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: "anna-core-no-data-lib", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.width]=\"width\" [style.marginTop]=\"marginTop\" class=\"no-data\">\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;width:46%;margin:20px;z-index:400}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px}\n"] }]
+            args: [{ selector: "anna-core-no-data-lib", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.marginRight]=\"width\" [style.marginTop]=\"marginTop\" class=\"no-data\">\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;margin:20px;z-index:400;transform:translate(50%)}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { width: [{
                 type: Input
             }], marginTop: [{
@@ -241,16 +243,16 @@ class AnnaDateTimeFormatService {
     }
     convertToNgbDateStandardFormat(date) {
         return {
-            year: parseInt(moment(date, "MM/DD/YYYY").format("YYYY")),
-            month: parseInt(moment(date, "MM/DD/YYYY").format("M")),
-            day: parseInt(moment(date, "MM/DD/YYYY").format("D")),
+            year: parseInt(dayjs(date, "MM/DD/YYYY").format("YYYY")),
+            month: parseInt(dayjs(date, "MM/DD/YYYY").format("M")),
+            day: parseInt(dayjs(date, "MM/DD/YYYY").format("D")),
         };
     }
     convertToNgbDate(date, parseFormat) {
         return {
-            year: parseInt(moment(date, parseFormat).format("YYYY")),
-            month: parseInt(moment(date, parseFormat).format("M")),
-            day: parseInt(moment(date, parseFormat).format("D")),
+            year: parseInt(dayjs(date, parseFormat).format("YYYY")),
+            month: parseInt(dayjs(date, parseFormat).format("M")),
+            day: parseInt(dayjs(date, parseFormat).format("D")),
         };
     }
     formatToTwelveHrs(time, callRemoveZero) {
@@ -341,8 +343,8 @@ class AnnaDateTimeFormatService {
     }
     sortByTimeAscending(a, b) {
         let format = "HH:mm:ss";
-        a = moment(a, format);
-        b = moment(b, format);
+        a = dayjs(a, format);
+        b = dayjs(b, format);
         let results;
         results = a.hours() > b.hours() ? 1 : a.hours() < b.hours() ? -1 : 0;
         if (results === 0)
@@ -353,8 +355,8 @@ class AnnaDateTimeFormatService {
     }
     sortByTimeDescending(a, b) {
         let format = "HH:mm:ss";
-        a = moment(a, format);
-        b = moment(b, format);
+        a = dayjs(a, format);
+        b = dayjs(b, format);
         let results;
         results = a.hours() < b.hours() ? 1 : a.hours() > b.hours() ? -1 : 0;
         if (results === 0)
@@ -364,26 +366,26 @@ class AnnaDateTimeFormatService {
         return results;
     }
     convertNgbDateToMoment(ngbDate) {
-        let converted = moment();
+        let converted = dayjs();
         converted.month(ngbDate.month - 1);
         converted.date(ngbDate.day);
         converted.year(ngbDate.year);
         return converted.format("MM/DD/YYYY");
     }
     compareDate(a, b, isAsc) {
-        return isAsc ? moment(a).diff(b) : moment(b).diff(a);
+        return isAsc ? dayjs(a).diff(b) : dayjs(b).diff(a);
     }
-    static formatTwentyFourHourTimeToHHMMAFormat(value) {
-        value = moment(value, ["HH:mm:ss"]).format("HH:mm:ss");
+    static formatTwentyFourHourTimeToHHMMAFormat(value, date) {
+        value = dayjs(date ? date : '01/01/2000 ' + value).format("DD/MM/YYYY HH:mm:ss");
         return value[3] == "0" && value[4] == "0"
-            ? moment(value, ["HH:mm:ss"]).format("hA").slice(0, -1)
-            : moment(value, ["HH:mm:ss"]).format("h:mmA").slice(0, -1);
+            ? dayjs(value, ["HH:mm:ss"]).format("hA").slice(0, -1)
+            : dayjs(value, ["HH:mm:ss"]).format("h:mmA").slice(0, -1);
     }
-    static formatTwelveHourTimeToHHMMAFormat(value) {
-        value = moment(value, ["HH:mm:A"]).format("HH:mm:ss");
-        return value[3] == "0" && value[4] == "0"
-            ? moment(value, ["HH:mm:ss"]).format("hA").slice(0, -1)
-            : moment(value, ["HH:mm:ss"]).format("h:mmA").slice(0, -1);
+    static formatTwelveHourTimeToHHMMAFormat(timeValue, date) {
+        timeValue = dayjs(date ? date : '01/01/2000 ' + timeValue).format("DD/MM/YYYY HH:mm:ss");
+        return timeValue[3] == "0" && timeValue[4] == "0"
+            ? dayjs(timeValue).format("hA").slice(0, -1)
+            : dayjs(timeValue).format("h:mmA").slice(0, -1);
     }
     formatDateAndHHMMATimeToStandardFormat(dateAndTime) {
         let standardFormat, date, time;
@@ -397,7 +399,7 @@ class AnnaDateTimeFormatService {
         else {
             standardFormat = dateAndTime + " 00:00 AM";
         }
-        return moment(standardFormat).format("MM/DD/YYYY hh:mm A");
+        return dayjs(standardFormat).format("MM/DD/YYYY hh:mm A");
     }
     compare(a, b, isAsc) {
         if (typeof a == 'string' && typeof b == 'string') {
@@ -408,11 +410,11 @@ class AnnaDateTimeFormatService {
     }
     sortDataByBroadcastTimeAsc(firstParamTime, secondParamTime, broadcastTime) {
         let format = "HH:mm:ss";
-        let a = moment(firstParamTime, format);
-        let b = moment(secondParamTime, format);
-        let broadcastMomentDateTime = moment(broadcastTime, "HH:mm:ss");
-        a = a.isBefore(broadcastMomentDateTime) ? a.add(1, "d") : a;
-        b = b.isBefore(broadcastMomentDateTime) ? b.add(1, "d") : b;
+        let a = dayjs(firstParamTime, format);
+        let b = dayjs(secondParamTime, format);
+        let broadcastdayjsDateTime = dayjs(broadcastTime, "HH:mm:ss");
+        a = a.isBefore(broadcastdayjsDateTime) ? a.add(1, "d") : a;
+        b = b.isBefore(broadcastdayjsDateTime) ? b.add(1, "d") : b;
         let result = a.isBefore(b) ? -1 : a.isAfter(b) ? 1 : 0;
         return result;
     }
@@ -599,13 +601,13 @@ class AnnaWeekCalendarComponent {
         }
     }
     getWeekNumber(week, firstDayOfWeek) {
-        const weekStartDate = moment(convertNgbDateToMoment(week[0]), "MM/DD/YYYY");
+        const weekStartDate = dayjs(convertNgbDateToMoment(week[0]), "MM/DD/YYYY");
         const weekYear = weekStartDate.year();
-        const yearStartDate = moment(`01/01/${weekYear}`, "MM/DD/YYYY");
+        const yearStartDate = dayjs(`01/01/${weekYear}`, "MM/DD/YYYY");
         const weekDay = yearStartDate.day();
         const noOfDays = weekStartDate.diff(yearStartDate, "d") + 1;
         function convertNgbDateToMoment(ngbDate) {
-            let converted = moment();
+            let converted = dayjs();
             converted.month(ngbDate.month - 1);
             converted.date(ngbDate.day);
             converted.year(ngbDate.year);
@@ -684,15 +686,15 @@ class AnnaWeekCalendarComponent {
                 this.toDate = this.constructEndDate(dateObject)(constructDate);
             }
             if (this.disabledDates.length > 0) {
-                let momentStartDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.fromDate), "MM/DD/YYYY");
-                let momentEndDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.toDate), "MM/DD/YYYY");
+                let dayjsStartDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(this.fromDate), "MM/DD/YYYY");
+                let dayjsEndDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(this.toDate), "MM/DD/YYYY");
                 let ngbDate;
-                while (!momentStartDate.isSame(momentEndDate)) {
-                    ngbDate = this.annaDateTimeFormatService.convertToNgbDate(momentStartDate, "MM/DD/YYYY");
+                while (!dayjsStartDate.isSame(dayjsEndDate)) {
+                    ngbDate = this.annaDateTimeFormatService.convertToNgbDate(dayjsStartDate, "MM/DD/YYYY");
                     if (this.checkIfDateIsDisabled(ngbDate)) {
                         break;
                     }
-                    momentStartDate.add(1, "d");
+                    dayjsStartDate.add(1, "d");
                 }
                 let newDateObject = new Date(ngbDate.year, ngbDate.month - 1, ngbDate.day - 1);
                 let constructDate = this.buildDate(newDateObject);
@@ -1229,6 +1231,8 @@ class AnnaFilterService {
             }
             return data.toString();
         };
+        dayjs.extend(minMax);
+        dayjs.extend(isBetween);
         console.log("AnnaFilterService service created.");
         const sliderArr = [
             "rcvPreempt",
@@ -1257,6 +1261,15 @@ class AnnaFilterService {
             "udDeficitValue",
             "bookedValue",
             "bookedSpots",
+            "userChanges",
+            "UDGrp",
+            "UDImps",
+            "ODGrp",
+            "ODImps",
+            "udImpsPercent",
+            "udGrpPercent",
+            "odImpsPercent",
+            "odGrpPercent",
             "userADUs",
             "buyerChanges",
             "userChanges",
@@ -1277,9 +1290,9 @@ class AnnaFilterService {
     }
     returnMinAndMaxDate(data, key) {
         data = data.filter((obj) => !["", "-", null].includes(obj[key]));
-        let DateArr = data.map((obj) => moment(obj[key]));
-        let minDate = moment.min(DateArr);
-        let maxDate = moment.max(DateArr);
+        let DateArr = data.map((obj) => dayjs(obj[key]));
+        let minDate = dayjs.min(DateArr);
+        let maxDate = dayjs.max(DateArr);
         return [minDate, maxDate];
     }
     isTooltipActive(header, sortMap) {
@@ -1313,7 +1326,7 @@ class AnnaFilterService {
         let uniqueDates = uniq(data.map((u) => u["date"]));
         let uniqueDatesInNgbDateFormat = [];
         uniqueDates.forEach((date) => {
-            uniqueDatesInNgbDateFormat.push(this.dateTimeFormatService.convertToNgbDateStandardFormat(moment(date, "MM/DD/YY").format("MM/DD/YYYY")));
+            uniqueDatesInNgbDateFormat.push(this.dateTimeFormatService.convertToNgbDateStandardFormat(dayjs(date, "MM/DD/YY").format("MM/DD/YYYY")));
         });
         return uniqueDatesInNgbDateFormat;
     }
@@ -1406,17 +1419,17 @@ class AnnaFilterService {
         return filteredData;
     }
     returnOrdersInTheRange(order, range, key) {
-        let isDateBetweenTheSelectedRange = moment(order[key]).isBetween(range.minSelectedDate, range.maxSelectedDate);
-        let isDateSameAsTheMinSelectedDate = moment(order[key]).isSame(range.minSelectedDate);
-        let isDateSameAsTheMaxSelectedDate = moment(order[key]).isSame(range.maxSelectedDate);
+        let isDateBetweenTheSelectedRange = dayjs(order[key]).isBetween(range.minSelectedDate, range.maxSelectedDate);
+        let isDateSameAsTheMinSelectedDate = dayjs(order[key]).isSame(range.minSelectedDate);
+        let isDateSameAsTheMaxSelectedDate = dayjs(order[key]).isSame(range.maxSelectedDate);
         return isDateBetweenTheSelectedRange || isDateSameAsTheMinSelectedDate || isDateSameAsTheMaxSelectedDate;
     }
     returnDataForTimeRange(obj, selectedData) {
         let format = "HH:mm:ss";
-        let selectedStartDate = moment(selectedData.startTime, format);
-        let selectedEndDate = moment(selectedData.endTime, format);
-        let startTime = moment(obj.startTime, format);
-        let endTime = moment(obj.endTime, format);
+        let selectedStartDate = dayjs(selectedData.startTime, format);
+        let selectedEndDate = dayjs(selectedData.endTime, format);
+        let startTime = dayjs(obj.startTime, format);
+        let endTime = dayjs(obj.endTime, format);
         let isStartTimeSameAsSelectedStartTime = startTime.isSame(selectedStartDate);
         let isStartTimeBetweenSelectedStartAndEndTime = startTime.isBetween(selectedStartDate, selectedEndDate);
         let isEndTimeSameAsSelectedEndTime = endTime.isSame(selectedEndDate);
@@ -1428,8 +1441,8 @@ class AnnaFilterService {
     }
     returnDataForFromAndToTimeRange(obj, selectedData, key) {
         let format = "HH:mm:ss";
-        let selectedFromTime = moment(selectedData.fromTime, format);
-        let selectedToTime = moment(selectedData.toTime, format);
+        let selectedFromTime = dayjs(selectedData.fromTime, format);
+        let selectedToTime = dayjs(selectedData.toTime, format);
         let objTime = obj[key];
         if (["", "-", null].includes(objTime)) {
             return false;
@@ -1449,18 +1462,18 @@ class AnnaFilterService {
         if (!selectedData.includeTimeRange) {
             return false;
         }
-        let momentTime = moment(objTime, format);
-        let isObjTimeSameAsSelectedFromTime = momentTime.isSame(selectedFromTime);
-        let isObjTimeSameAsSelectedToTime = momentTime.isSame(selectedToTime);
-        let isObjTimeBetweenSelectedFromTimeAndToTime = momentTime.isBetween(selectedFromTime, selectedToTime);
+        let dayjsTime = dayjs(objTime, format);
+        let isObjTimeSameAsSelectedFromTime = dayjsTime.isSame(selectedFromTime);
+        let isObjTimeSameAsSelectedToTime = dayjsTime.isSame(selectedToTime);
+        let isObjTimeBetweenSelectedFromTimeAndToTime = dayjsTime.isBetween(selectedFromTime, selectedToTime);
         return (isObjTimeSameAsSelectedFromTime ||
             isObjTimeSameAsSelectedToTime ||
             isObjTimeBetweenSelectedFromTimeAndToTime);
     }
     returnDataForStartAndEndTimeRange(obj, selectedData, key) {
         let format = "HH:mm:ss";
-        let selectedFromTime = moment(selectedData.fromTime, format);
-        let selectedToTime = moment(selectedData.toTime, format);
+        let selectedFromTime = dayjs(selectedData.fromTime, format);
+        let selectedToTime = dayjs(selectedData.toTime, format);
         if (selectedData.includeMulti && obj[key][0] == "<multi>") {
             return true;
         }
@@ -1476,8 +1489,8 @@ class AnnaFilterService {
         if (!selectedData.includeTimeRange) {
             return false;
         }
-        let startTime = moment(obj[key][1], format);
-        let endTime = moment(obj[key][2], format);
+        let startTime = dayjs(obj[key][1], format);
+        let endTime = dayjs(obj[key][2], format);
         let isStartTimeSameAsSelectedStartTime = startTime.isSame(selectedFromTime);
         let isStartTimeBetweenSelectedStartAndEndTime = startTime.isBetween(selectedFromTime, selectedToTime);
         let isEndTimeSameAsSelectedEndTime = endTime.isSame(selectedToTime);
@@ -1491,20 +1504,20 @@ class AnnaFilterService {
         let parsingFormat;
         if (key === "period") {
             parsingFormat = "YYYY-MM-DD";
-            let momentStartDate = moment(obj.startDate);
-            let momentEndDate = moment(obj.endDate);
-            let startDateIsBetweenSelDate = momentStartDate.isBetween(value.fromDate, value.toDate);
-            let endDateIsBetweenSelDate = momentEndDate.isBetween(value.fromDate, value.toDate);
-            let startDateIsSameAsSelStartDate = value.fromDate.isSame(momentStartDate);
-            let endDateIsSameAsSelEndDate = value.toDate.isSame(momentEndDate);
+            let dayjsStartDate = dayjs(obj.startDate);
+            let dayjsEndDate = dayjs(obj.endDate);
+            let startDateIsBetweenSelDate = dayjsStartDate.isBetween(value.fromDate, value.toDate);
+            let endDateIsBetweenSelDate = dayjsEndDate.isBetween(value.fromDate, value.toDate);
+            let startDateIsSameAsSelStartDate = value.fromDate.isSame(dayjsStartDate);
+            let endDateIsSameAsSelEndDate = value.toDate.isSame(dayjsEndDate);
             return ((startDateIsBetweenSelDate || startDateIsSameAsSelStartDate) &&
                 (endDateIsBetweenSelDate || endDateIsSameAsSelEndDate));
         }
         else if (key === "AirDate" || key === "flightStartDate" || key === "flightEndDate") {
             parsingFormat = "MM/DD/YYYY";
-            let dateIsBetweenSelDate = moment(obj[key], parsingFormat).isBetween(value.minSelectedDate, value.maxSelectedDate);
-            let dateIsSameAsSelStartDate = moment(obj[key], parsingFormat).isSame(value.minSelectedDate);
-            let dateIsSameAsSelEndDate = moment(obj[key], parsingFormat).isSame(value.maxSelectedDate);
+            let dateIsBetweenSelDate = dayjs(obj[key], parsingFormat).isBetween(value.minSelectedDate, value.maxSelectedDate);
+            let dateIsSameAsSelStartDate = dayjs(obj[key], parsingFormat).isSame(value.minSelectedDate);
+            let dateIsSameAsSelEndDate = dayjs(obj[key], parsingFormat).isSame(value.maxSelectedDate);
             return dateIsBetweenSelDate || dateIsSameAsSelStartDate || dateIsSameAsSelEndDate;
         }
     }
@@ -1531,11 +1544,10 @@ class AnnaFilterService {
         }
         return uniq(data.map((u) => u[headerName])).length > 1 ? false : true;
     }
-    getFilterOptionsData(data, clonedData, key) {
+    getFilterOptionsData(data, clonedData) {
         let appliedFilterSet = new Set(this.appliedFiltersArray);
-        key = key ? key : this.selectedRadio;
-        if (appliedFilterSet.has(key)) {
-            return this.filterData(clonedData, key);
+        if (appliedFilterSet.has(this.selectedRadio)) {
+            return this.filterData(clonedData, this.selectedRadio);
         }
         else {
             return data;
@@ -1578,10 +1590,10 @@ class AnnaFilterService {
     }
     isObjectInTheRange(obj, value, key) {
         let objVal = obj[key];
-        let momentDate = moment(objVal);
+        let dayjsDate = dayjs(objVal);
         let isDateSameAsStartOfTheRange = value.fromDate.isSame(objVal);
         let isDateSameAsEndOfTheRange = value.toDate.isSame(objVal);
-        let isDateBetweenTheStartAndEndOfRange = momentDate.isBetween(value.fromDate, value.toDate);
+        let isDateBetweenTheStartAndEndOfRange = dayjsDate.isBetween(value.fromDate, value.toDate);
         return isDateSameAsStartOfTheRange || isDateSameAsEndOfTheRange || isDateBetweenTheStartAndEndOfRange;
     }
     updateStateOfTheCurrentFilterTab(sortMap) {
@@ -1738,7 +1750,7 @@ class AnnaNonEditableGenericTableComponent {
         this.gtTextActionClicked = new EventEmitter();
         this.gtViewDetailClicked = new EventEmitter();
         this.downloadSpotDetails = new EventEmitter();
-        this.noDataWidth = "55%";
+        this.noDataWidth = "50%";
         this.disableClearAllBtn = true;
         this.disableColumnClearAllBtn = true;
         this.allSelected = 0;
@@ -1894,9 +1906,17 @@ class AnnaNonEditableGenericTableComponent {
         this.tooltipRadioTextMap.set("bookedCpmValue", "Booked CPM");
         this.tooltipRadioTextMap.set("bookedEffectiveCpmValue", "Effective CPM");
         this.tooltipRadioTextMap.set("orderSource", "Order Source");
-        this.tooltipRadioTextMap.set("orderCategory", "Category");
+        this.tooltipRadioTextMap.set("orderCategory", "Rev Category");
         this.tooltipRadioTextMap.set("cashOrTrade", "C/T");
         this.tooltipRadioTextMap.set("revisionStartDate", "Revision Start Date");
+        this.tooltipRadioTextMap.set("ODImps", "OD IMPS");
+        this.tooltipRadioTextMap.set("UDImps", "UD IMPS");
+        this.tooltipRadioTextMap.set("ODGrp", "OD GRP");
+        this.tooltipRadioTextMap.set("UDGrp", "UD GRP");
+        this.tooltipRadioTextMap.set("udImpsPercent", "UD IMPS %");
+        this.tooltipRadioTextMap.set("udGrpPercent", "UD GRP %");
+        this.tooltipRadioTextMap.set("odImpsPercent", "OD IMPS %");
+        this.tooltipRadioTextMap.set("odGrpPercent", "OD GRP %");
     }
     generateTableDataWrapper() {
         this.showSkeletonLoading = true;
@@ -2015,20 +2035,26 @@ class AnnaNonEditableGenericTableComponent {
     }
     checkIfUniqueValuePresentForTheHeader(header, enabledHeaders) {
         header.filterSortObjectKeys.forEach((item) => {
-            let dataToCheck = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData, item);
+            console.log(uniq(this.tableData.map((u) => u[item])));
             if (item == "period") {
-                let uniqStartDate = uniq(dataToCheck.map((u) => u["startDate"]));
-                let uniqEndDate = uniq(dataToCheck.map((u) => u["endDate"]));
+                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 {
-                let values = dataToCheck.map((u) => u[item]);
-                if (header.filter == "CHECKBOX" && uniq(values).filter(n => n != null).length > 1) {
+                let values = this.tableData.map((u) => u[item]);
+                // if last applied filter is this header, push it alos as enabledHeader
+                let activeAndLastlyAppliedHeader = false;
+                if (this.annaFilterService.appliedFiltersArray.length > 0 &&
+                    this.annaFilterService.appliedFiltersArray[this.annaFilterService.appliedFiltersArray.length - 1] == item) {
+                    activeAndLastlyAppliedHeader = true;
+                }
+                if (header.filter == "CHECKBOX" && (uniq(values).filter(n => n != null).length > 1 || activeAndLastlyAppliedHeader)) {
                     enabledHeaders.push(item);
                 }
-                else if (header.filter != "CHECKBOX" && uniq(values).filter(n => n != null && n != "-").length > 1) {
+                else if (header.filter != "CHECKBOX" && (uniq(values).filter(n => n != null && n != "-").length > 1 || activeAndLastlyAppliedHeader)) {
                     enabledHeaders.push(item);
                 }
             }
@@ -2389,8 +2415,10 @@ class AnnaNonEditableGenericTableComponent {
                 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;
@@ -2447,6 +2475,7 @@ class AnnaNonEditableGenericTableComponent {
             this.sliderEnteredMaxValue = this.options.ceil;
             this.isMaxTextBoxEmpty = true;
             this.showSliderMaxValueError = false;
+            console.log(this.sliderEnteredMaxValue);
         }
         this.showErrorForMinAndMaxValue();
     }
@@ -2623,8 +2652,8 @@ class AnnaNonEditableGenericTableComponent {
                 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));
+                currentSelectedDate.fromDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+                currentSelectedDate.toDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
             }
             this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData, currentSelectedDate);
             this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedDate);
@@ -2782,7 +2811,7 @@ class AnnaNonEditableGenericTableComponent {
         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)));
+        return !(dayjs(startTime24HrFormat, timeFormat).isAfter(dayjs(endTime24HrFormat, timeFormat)));
     }
     sortedData(event) {
         if (event.type == "none") {
@@ -2810,21 +2839,18 @@ class AnnaNonEditableGenericTableComponent {
                     let values = [];
                     item.disableTooltipIcon = true;
                     item.filterSortObjectKeys.forEach(key => {
-                        let latestFilters = this.annaFilterService.appliedFiltersArray;
-                        if (latestFilters.length > 0 && item.disableTooltipIcon && latestFilters[latestFilters.length - 1] == key) {
-                            item.disableTooltipIcon = false;
+                        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;
                         }
-                        if (item.disableTooltipIcon) {
-                            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 (item.filter == "CHECKBOX" && uniq(values).filter(n => n != null).length > 1) {
+                                item.disableTooltipIcon = false;
                             }
-                            else {
-                                values = this.tableData.map((u) => u[key]);
-                                if ((item.filter == "CHECKBOX" && uniq(values).filter(n => n != null).length > 1) || (item.filter != "CHECKBOX" && uniq(values).filter(n => n != null && n != "-").length > 1)) {
-                                    item.disableTooltipIcon = false;
-                                }
+                            else if (item.filter != "CHECKBOX" && uniq(values).filter(n => n != null && n != "-").length > 1) {
+                                item.disableTooltipIcon = false;
                             }
                         }
                     });
@@ -3184,8 +3210,8 @@ class AnnaNonEditableGenericTableComponent {
                 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));
+                currentSelectedDate.fromDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+                currentSelectedDate.toDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
             }
             this.isFilterChanged = !isEqual(previousSelectedDate, currentSelectedDate);
         }
@@ -3247,6 +3273,7 @@ class AnnaNonEditableGenericTableComponent {
     checkIfSortingChanged() {
         this.isSortChanged = this.tempSortOrder != null && this.tempSortOrder != this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio);
         ;
+        console.log(this.isSortChanged);
         return this.isSortChanged;
     }
     disableApplyButtonOfSelectedFilter() {
@@ -3351,10 +3378,10 @@ class AnnaNonEditableGenericTableComponent {
     }
 }
 AnnaNonEditableGenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNonEditableGenericTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AnnaSortService }, { token: AnnaDateTimeFormatService }, { token: AnnaFilterService }, { token: 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", limit: "limit", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone", starredInProgress: "starredInProgress" }, 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: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\" (scroll)=\"onTableContainerScroll($event)\">\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]=\"renderedData\">\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                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(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                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\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 == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\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\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\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\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\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\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                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\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                                    <div *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                                    </div>\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\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\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 && !(isNoDataToDisplaySubject$ | async)\">\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 *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                                <!-- <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container> -->\r\n                                            </ng-container>\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 order-onboarded\">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                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\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=\"(isNoDataToDisplaySubject$ | async)\"> </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 [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (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 style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (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            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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        <section class = \"hierarchy-table-container\">\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    </section>\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 #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</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:230px;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:100%;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;width:50%}div.radio-container div.full-width{width:100%}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}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}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:#000;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;overflow:hidden;text-overflow:ellipsis}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;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}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;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0px;z-index:1}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}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!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}div.spinner-for-button-directive{position:relative;left:-1px}\n"], components: [{ type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: AnnaIconColumnComponent, selector: "anna-core-anna-icon-column", inputs: ["componentName", "objectKey", "dataObject"], outputs: ["onColumnIconClicked"] }, { type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i12.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { type: 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: i15.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i16.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: i17.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i17.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i17.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i17.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i17.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: showEllipsisTextOnHoverDirective, selector: "[showEllipsisTextOnHover]" }, { type: i19.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: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i19.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i15.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], pipes: { "async": i17.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", limit: "limit", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone", starredInProgress: "starredInProgress" }, 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: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\" (scroll)=\"onTableContainerScroll($event)\">\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]=\"renderedData\">\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                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(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                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\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 == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\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                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\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                                    <div *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                                    </div>\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\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\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 && !(isNoDataToDisplaySubject$ | async)\">\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 *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                                <!-- <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container> -->\r\n                                            </ng-container>\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 order-onboarded\">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                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\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=\"(isNoDataToDisplaySubject$ | async)\"> </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 [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (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 style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (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            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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        <section class = \"hierarchy-table-container\">\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    </section>\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 #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</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:230px;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:100%;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;width:50%}div.radio-container div.full-width{width:100%}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}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}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:#000;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;overflow:hidden;text-overflow:ellipsis}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;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}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;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0;z-index:1}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}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!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}div.spinner-for-button-directive{position:relative;left:-1px}\n"], components: [{ type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: AnnaIconColumnComponent, selector: "anna-core-anna-icon-column", inputs: ["componentName", "objectKey", "dataObject"], outputs: ["onColumnIconClicked"] }, { type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i12.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { type: 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: i15.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i16.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: i17.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i17.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i17.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i17.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i17.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: showEllipsisTextOnHoverDirective, selector: "[showEllipsisTextOnHover]" }, { type: i19.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: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i19.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i15.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], pipes: { "async": i17.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\" (scroll)=\"onTableContainerScroll($event)\">\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]=\"renderedData\">\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                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(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                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\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 == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\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\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\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\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\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\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                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\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                                    <div *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                                    </div>\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\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\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 && !(isNoDataToDisplaySubject$ | async)\">\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 *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                                <!-- <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container> -->\r\n                                            </ng-container>\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 order-onboarded\">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                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\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=\"(isNoDataToDisplaySubject$ | async)\"> </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 [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (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 style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (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            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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        <section class = \"hierarchy-table-container\">\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    </section>\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 #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</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:230px;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:100%;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;width:50%}div.radio-container div.full-width{width:100%}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}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}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:#000;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;overflow:hidden;text-overflow:ellipsis}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;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}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;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0px;z-index:1}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}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!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}div.spinner-for-button-directive{position:relative;left:-1px}\n"] }]
+            args: [{ selector: 'anna-core-non-editable-generic-table-lib', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\" (scroll)=\"onTableContainerScroll($event)\">\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]=\"renderedData\">\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                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(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                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\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 == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\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                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\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                                    <div *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                                    </div>\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\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\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 && !(isNoDataToDisplaySubject$ | async)\">\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 *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                                <!-- <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container> -->\r\n                                            </ng-container>\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 order-onboarded\">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                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\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=\"(isNoDataToDisplaySubject$ | async)\"> </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 [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (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 style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (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            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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\" [title]=\"data.label\" (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        <section class = \"hierarchy-table-container\">\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    </section>\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 #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</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:230px;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:100%;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;width:50%}div.radio-container div.full-width{width:100%}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}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}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:#000;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;overflow:hidden;text-overflow:ellipsis}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;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}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;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0;z-index:1}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}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!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}div.spinner-for-button-directive{position:relative;left:-1px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AnnaSortService }, { type: AnnaDateTimeFormatService }, { type: AnnaFilterService }, { type: AnnaGenericTableService }]; }, propDecorators: { showSkeletonLoading: [{
                 type: Input
             }], tableHeaders: [{
@@ -4154,6 +4181,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
+class DigitOnlyDirective {
+    constructor(el) {
+        this.el = el;
+        this.hasDecimalPoint = false;
+        this.hasNegativeSign = false;
+        this.navigationKeys = [
+            'Backspace',
+            'Delete',
+            'Tab',
+            'Escape',
+            'Enter',
+            'Home',
+            'End',
+            'ArrowLeft',
+            'ArrowRight',
+            'Clear',
+            'Copy',
+            'Paste',
+        ];
+        this.decimal = false;
+        this.decimalSeparator = '.';
+        this.allowNegatives = false;
+        this.allowPaste = true;
+        this.negativeSign = '-';
+        this.min = -Infinity;
+        this.max = Infinity;
+        this.regex = null;
+        this.inputElement = el.nativeElement;
+    }
+    ngOnChanges(changes) {
+        if (changes['pattern']) {
+            this.regex = this.pattern ? RegExp(this.pattern) : null;
+        }
+        if (changes['min']) {
+            const maybeMin = Number(this.min);
+            this.min = isNaN(maybeMin) ? -Infinity : maybeMin;
+        }
+        if (changes['max']) {
+            const maybeMax = Number(this.max);
+            this.max = isNaN(maybeMax) ? Infinity : maybeMax;
+        }
+    }
+    onBeforeInput(e) {
+        if (isNaN(Number(e.data))) {
+            if (e.data === this.decimalSeparator ||
+                (e.data === this.negativeSign && this.allowNegatives)) {
+                return; // go on
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    onKeyDown(e) {
+        console.log("called");
+        if (this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
+            ((e.key === 'a' || e.code === 'KeyA') && e.ctrlKey === true) || // Allow: Ctrl+A
+            ((e.key === 'c' || e.code === 'KeyC') && e.ctrlKey === true) || // Allow: Ctrl+C
+            ((e.key === 'v' || e.code === 'KeyV') && e.ctrlKey === true) || // Allow: Ctrl+V
+            ((e.key === 'x' || e.code === 'KeyX') && e.ctrlKey === true) || // Allow: Ctrl+X
+            ((e.key === 'a' || e.code === 'KeyA') && e.metaKey === true) || // Allow: Cmd+A (Mac)
+            ((e.key === 'c' || e.code === 'KeyC') && e.metaKey === true) || // Allow: Cmd+C (Mac)
+            ((e.key === 'v' || e.code === 'KeyV') && e.metaKey === true) || // Allow: Cmd+V (Mac)
+            ((e.key === 'x' || e.code === 'KeyX') && e.metaKey === true) // Allow: Cmd+X (Mac)
+        ) {
+            // let it happen, don't do anything
+            return;
+        }
+        let newValue = '';
+        if (this.decimal && e.key === this.decimalSeparator) {
+            newValue = this.forecastValue(e.key);
+            if (newValue.split(this.decimalSeparator).length > 2) {
+                // has two or more decimal points
+                e.preventDefault();
+                return;
+            }
+            else {
+                this.hasDecimalPoint = newValue.indexOf(this.decimalSeparator) > -1;
+                return; // Allow: only one decimal point
+            }
+        }
+        if (e.key === this.negativeSign && this.allowNegatives) {
+            newValue = this.forecastValue(e.key);
+            if (newValue.charAt(0) !== this.negativeSign ||
+                newValue.split(this.negativeSign).length > 2) {
+                e.preventDefault();
+                return;
+            }
+            else {
+                this.hasNegativeSign = newValue.split(this.negativeSign).length > -1;
+                return;
+            }
+        }
+        // Ensure that it is a number and stop the keypress
+        if (e.key === ' ' || isNaN(Number(e.key))) {
+            e.preventDefault();
+            return;
+        }
+        newValue = newValue || this.forecastValue(e.key);
+        // check the input pattern RegExp
+        if (this.regex) {
+            if (!this.regex.test(newValue)) {
+                e.preventDefault();
+                return;
+            }
+        }
+        const newNumber = Number(newValue);
+        if (newNumber > this.max || newNumber < this.min) {
+            e.preventDefault();
+        }
+    }
+    onPaste(event) {
+        if (this.allowPaste === true) {
+            let pastedInput = '';
+            if (window['clipboardData']) {
+                // Browser is IE
+                pastedInput = window['clipboardData'].getData('text');
+            }
+            else if (event.clipboardData && event.clipboardData.getData) {
+                // Other browsers
+                pastedInput = event.clipboardData.getData('text/plain');
+            }
+            this.pasteData(pastedInput);
+            event.preventDefault();
+        }
+        else {
+            // this prevents the paste
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    onDrop(event) {
+        const textData = event.dataTransfer?.getData('text') ?? '';
+        this.inputElement.focus();
+        this.pasteData(textData);
+        event.preventDefault();
+    }
+    pasteData(pastedContent) {
+        const sanitizedContent = this.sanitizeInput(pastedContent);
+        if (sanitizedContent.includes(this.negativeSign) &&
+            this.hasNegativeSign &&
+            !this.getSelection().includes(this.negativeSign)) {
+            return;
+        }
+        const pasted = document.execCommand('insertText', false, sanitizedContent);
+        if (!pasted) {
+            if (this.inputElement.setRangeText) {
+                const { selectionStart: start, selectionEnd: end } = this.inputElement;
+                this.inputElement.setRangeText(sanitizedContent, start ?? 0, end ?? 0, 'end');
+                // Angular's Reactive Form relies on "input" event, but on Firefox, the setRangeText method doesn't trigger it
+                // so we have to trigger it ourself.
+                if (typeof window['InstallTrigger'] !==
+                    'undefined') {
+                    this.inputElement.dispatchEvent(new Event('input', { cancelable: true }));
+                }
+            }
+            else {
+                // Browser does not support setRangeText, e.g. IE
+                this.insertAtCursor(this.inputElement, sanitizedContent);
+            }
+        }
+        if (this.decimal) {
+            this.hasDecimalPoint =
+                this.inputElement.value.indexOf(this.decimalSeparator) > -1;
+        }
+        this.hasNegativeSign =
+            this.inputElement.value.indexOf(this.negativeSign) > -1;
+    }
+    // The following 2 methods were added from the below article for browsers that do not support setRangeText
+    // https://stackoverflow.com/questions/11076975/how-to-insert-text-into-the-textarea-at-the-current-cursor-position
+    insertAtCursor(myField, myValue) {
+        const startPos = myField.selectionStart ?? 0;
+        const endPos = myField.selectionEnd ?? 0;
+        myField.value =
+            myField.value.substring(0, startPos) +
+                myValue +
+                myField.value.substring(endPos, myField.value.length);
+        const pos = startPos + myValue.length;
+        myField.focus();
+        myField.setSelectionRange(pos, pos);
+        this.triggerEvent(myField, 'input');
+    }
+    triggerEvent(el, type) {
+        if ('createEvent' in document) {
+            // modern browsers, IE9+
+            const e = document.createEvent('HTMLEvents');
+            e.initEvent(type, false, true);
+            el.dispatchEvent(e);
+        }
+    }
+    // end stack overflow code
+    sanitizeInput(input) {
+        let result = '';
+        let regex;
+        if (this.decimal && this.isValidDecimal(input)) {
+            regex = new RegExp(`${this.getNegativeSignRegExp()}[^0-9${this.decimalSeparator}]`, 'g');
+        }
+        else {
+            regex = new RegExp(`${this.getNegativeSignRegExp()}[^0-9]`, 'g');
+        }
+        result = input.replace(regex, '');
+        const maxLength = this.inputElement.maxLength;
+        if (maxLength > 0) {
+            // the input element has maxLength limit
+            const allowedLength = maxLength -
+                this.inputElement.value.length +
+                (result.includes(`${this.negativeSign}`) ? 1 : 0);
+            result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
+        }
+        return result;
+    }
+    getNegativeSignRegExp() {
+        return this.allowNegatives &&
+            (!this.hasNegativeSign || this.getSelection().includes(this.negativeSign))
+            ? `(?!^${this.negativeSign})`
+            : '';
+    }
+    isValidDecimal(string) {
+        if (!this.hasDecimalPoint) {
+            return string.split(this.decimalSeparator).length <= 2;
+        }
+        else {
+            // the input element already has a decimal separator
+            const selectedText = this.getSelection();
+            if (selectedText && selectedText.indexOf(this.decimalSeparator) > -1) {
+                return string.split(this.decimalSeparator).length <= 2;
+            }
+            else {
+                return string.indexOf(this.decimalSeparator) < 0;
+            }
+        }
+    }
+    getSelection() {
+        return this.inputElement.value.substring(this.inputElement.selectionStart ?? 0, this.inputElement.selectionEnd ?? 0);
+    }
+    forecastValue(key) {
+        const selectionStart = this.inputElement.selectionStart ?? 0;
+        const selectionEnd = this.inputElement.selectionEnd ?? 0;
+        const oldValue = this.inputElement.value;
+        return (oldValue.substring(0, selectionStart) +
+            key +
+            oldValue.substring(selectionEnd));
+    }
+}
+DigitOnlyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DigitOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DigitOnlyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: DigitOnlyDirective, selector: "[digitOnly]", inputs: { decimal: "decimal", decimalSeparator: "decimalSeparator", allowNegatives: "allowNegatives", allowPaste: "allowPaste", negativeSign: "negativeSign", min: "min", max: "max", pattern: "pattern" }, host: { listeners: { "beforeinput": "onBeforeInput($event)", "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DigitOnlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[digitOnly]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { decimal: [{
+                type: Input
+            }], decimalSeparator: [{
+                type: Input
+            }], allowNegatives: [{
+                type: Input
+            }], allowPaste: [{
+                type: Input
+            }], negativeSign: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], onBeforeInput: [{
+                type: HostListener,
+                args: ['beforeinput', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
 // Angular import statements
 class AnnaCoreModule {
 }
@@ -4177,7 +4484,8 @@ AnnaCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AnnaVirtualTableDirective,
         AnnaNonEditableGenericTableComponent,
         AnnaTableVirtualScrollViewportComponent,
-        AnnaFixedRowSizeTableVirtualScrollStrategyDirective], imports: [CommonModule,
+        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
+        DigitOnlyDirective], imports: [CommonModule,
         NgbModule,
         FormsModule,
         MatRadioModule,
@@ -4204,7 +4512,8 @@ AnnaCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AnnaVirtualTableDirective,
         AnnaNonEditableGenericTableComponent,
         AnnaTableVirtualScrollViewportComponent,
-        AnnaFixedRowSizeTableVirtualScrollStrategyDirective] });
+        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
+        DigitOnlyDirective] });
 AnnaCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaCoreModule, imports: [[
             CommonModule,
             NgbModule,
@@ -4248,6 +4557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         AnnaNonEditableGenericTableComponent,
                         AnnaTableVirtualScrollViewportComponent,
                         AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
+                        DigitOnlyDirective
                     ],
                     imports: [
                         CommonModule,
@@ -4288,11 +4598,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         AnnaVirtualTableDirective,
                         AnnaNonEditableGenericTableComponent,
                         AnnaTableVirtualScrollViewportComponent,
-                        AnnaFixedRowSizeTableVirtualScrollStrategyDirective
+                        AnnaFixedRowSizeTableVirtualScrollStrategyDirective,
+                        DigitOnlyDirective
                     ]
                 }]
         }] });
 
+class AnnaNumberFormatService {
+    static GetRoundedValueWithUnits(inputValue, digitsToRoundDecimalPoint = 2) {
+        let [value, unit] = AnnaNumberFormatService.GetValueInUnits(Math.abs(inputValue));
+        value = +((+value).toFixed(digitsToRoundDecimalPoint));
+        if (inputValue < 0) {
+            value = value * -1;
+        }
+        return value.toString() + unit;
+        //   return (Math.Round(value, digitsToRoundDecimalPoint, MidpointRounding.AwayFromZero) + unit);
+    }
+    static GetValueInUnits(inputValue) {
+        let unit = "";
+        let thousand = 1000;
+        let million = 1000000;
+        let billion = 1000000000;
+        if (inputValue >= thousand && inputValue < million) {
+            inputValue = inputValue / thousand;
+            unit = "K";
+        }
+        else if (inputValue >= million && inputValue < billion) {
+            inputValue = inputValue / million;
+            unit = "M";
+        }
+        else if (inputValue >= billion) {
+            inputValue = inputValue / billion;
+            unit = "B";
+        }
+        return [inputValue, unit];
+    }
+}
+AnnaNumberFormatService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNumberFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AnnaNumberFormatService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNumberFormatService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNumberFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
 ;
 
 class Constants {
@@ -4337,5 +4687,5 @@ var Days;
  * Generated bundle index. Do not edit.
  */
 
-export { AllSelectedStatus, AnnaBuyerApprovalIconTemplateComponent, AnnaCalendarFilterComponent, AnnaConvertZeroOrNullOrUndefinedPipe, AnnaCoreModule, AnnaDateTimeFormatService, AnnaFilterSearchedTextPipe, AnnaFilterService, AnnaFixedRowSizeTableVirtualScrollStrategy, AnnaFixedRowSizeTableVirtualScrollStrategyDirective, AnnaGenericTableService, AnnaGlobalConfigService, AnnaIconColumnComponent, AnnaLiveIconTemplateComponent, AnnaNoDataComponent, AnnaNonEditableGenericTableComponent, AnnaNotifyIconTemplateComponent, AnnaPayForPerformanceIconTemplateComponent, AnnaRejectedIconTemplateComponent, AnnaReplaceCharPipe, AnnaSortComponent, AnnaSortService, AnnaTableVirtualScrollViewportComponent, AnnaTypeofDataPipe, AnnaVirtualTableDirective, AnnaWeekCalendarComponent, Constants, Days, ErrorCodes, TooltipModel, fixedSizeVirtualScrollStrategyFactory, radioButtonModel, showEllipsisTextOnHoverDirective, tooltipModelForColumnLevelFiltering };
+export { AllSelectedStatus, AnnaBuyerApprovalIconTemplateComponent, AnnaCalendarFilterComponent, AnnaConvertZeroOrNullOrUndefinedPipe, AnnaCoreModule, AnnaDateTimeFormatService, AnnaFilterSearchedTextPipe, AnnaFilterService, AnnaFixedRowSizeTableVirtualScrollStrategy, AnnaFixedRowSizeTableVirtualScrollStrategyDirective, AnnaGenericTableService, AnnaGlobalConfigService, AnnaIconColumnComponent, AnnaLiveIconTemplateComponent, AnnaNoDataComponent, AnnaNonEditableGenericTableComponent, AnnaNotifyIconTemplateComponent, AnnaNumberFormatService, AnnaPayForPerformanceIconTemplateComponent, AnnaRejectedIconTemplateComponent, AnnaReplaceCharPipe, AnnaSortComponent, AnnaSortService, AnnaTableVirtualScrollViewportComponent, AnnaTypeofDataPipe, AnnaVirtualTableDirective, AnnaWeekCalendarComponent, Constants, Days, DigitOnlyDirective, ErrorCodes, TooltipModel, fixedSizeVirtualScrollStrategyFactory, radioButtonModel, showEllipsisTextOnHoverDirective, tooltipModelForColumnLevelFiltering };
 //# sourceMappingURL=annalib-anna-core.mjs.map