@annalib/anna-core 1.0.0 → 1.2.1

package/fesm2020/annalib-anna-core.mjs

@@ -382,8 +382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 
 // Angular import statements
 class AnnaCalendarFilterComponent {
-    constructor(annaTimeService) {
+    constructor(annaTimeService, datePickerConfig) {
         this.annaTimeService = annaTimeService;
+        this.datePickerConfig = datePickerConfig;
         this.selectedDate = new EventEmitter();
         this.apply = new EventEmitter();
         this.cancel = new EventEmitter();
@@ -395,6 +396,11 @@ class AnnaCalendarFilterComponent {
         this.toDate = this.selectedToDate;
         console.log(this.minDate);
         console.log(this.maxDate);
+        console.log(this.fromDate);
+        console.log(this.toDate);
+        this.datePickerConfig.markDisabled = (date) => {
+            return false;
+        };
         this.setInputText();
     }
     onDateSelection(date) {
@@ -442,12 +448,12 @@ class AnnaCalendarFilterComponent {
         }
     }
 }
-AnnaCalendarFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaCalendarFilterComponent, deps: [{ token: i1$1.AnnaDateTimeFormatService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaCalendarFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: { maxDate: "maxDate", label: "label", minDate: "minDate", selectedFromDate: "selectedFromDate", selectedToDate: "selectedToDate" }, outputs: { selectedDate: "selectedDate", apply: "apply", cancel: "cancel" }, ngImport: i0, template: "<p class=\"calendar-label\">{{label}}</p>\r\n<form class=\"row row-cols-sm-auto\">\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}div{margin:0 .3125rem}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px;width:94%}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:10px}\n"], directives: [{ type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AnnaCalendarFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaCalendarFilterComponent, deps: [{ token: i1$1.AnnaDateTimeFormatService }, { token: i1.NgbDatepickerConfig }], target: i0.ɵɵFactoryTarget.Component });
+AnnaCalendarFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: { maxDate: "maxDate", label: "label", minDate: "minDate", selectedFromDate: "selectedFromDate", selectedToDate: "selectedToDate" }, outputs: { selectedDate: "selectedDate", apply: "apply", cancel: "cancel" }, ngImport: i0, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n                 \r\n<p class=\"calendar-label\">{{label}}</p>\r\n<form>\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px;width:94%}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:10px}\n"], directives: [{ type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaCalendarFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "anna-core-calendar-filter-lib", changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"calendar-label\">{{label}}</p>\r\n<form class=\"row row-cols-sm-auto\">\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}div{margin:0 .3125rem}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px;width:94%}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.AnnaDateTimeFormatService }]; }, propDecorators: { maxDate: [{
+            args: [{ selector: "anna-core-calendar-filter-lib", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n                 \r\n<p class=\"calendar-label\">{{label}}</p>\r\n<form>\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px;width:94%}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.AnnaDateTimeFormatService }, { type: i1.NgbDatepickerConfig }]; }, propDecorators: { maxDate: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -524,6 +530,15 @@ class AnnaSortComponent {
             },
         ];
     }
+    ngOnChanges(changes) {
+        console.log("sort component ngOnChanges");
+        console.log(this.sortObjectKey);
+        if (changes["sortObjectKey"] && changes["sortObjectKey"].currentValue) {
+            console.log("inside sort active func");
+            let sortType = this.annaSortService.columnSortState.get(this.sortObjectKey);
+            this.setSortType(sortType);
+        }
+    }
     sortOptionChanged(index, sortType) {
         this.sortOptions.forEach((item) => (item.isOptionActive = false));
         this.sortOptions[index].isOptionActive = true;
@@ -532,16 +547,21 @@ class AnnaSortComponent {
     ngOnInit() {
         console.log("sort component ngOnInit");
         console.log(this.annaSortService.columnSortState);
-        let sortType = this.annaSortService.columnSortState.get(this.sortObjectKey);
-        let sortTypeIndex = this.sortOptions.findIndex((item) => item.sortType == sortType);
-        this.sortOptions[sortTypeIndex].isOptionActive = true;
+        this.annaSortService.updateSortTypeSubject.subscribe((item) => {
+            this.setSortType(item);
+        });
+    }
+    setSortType(option) {
+        this.sortOptions.forEach(item => item.isOptionActive = false);
+        let index = this.sortOptions.findIndex(item => item.sortType == option);
+        this.sortOptions[index].isOptionActive = true;
     }
 }
 AnnaSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortComponent, deps: [{ token: i1$1.AnnaSortService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: { sortObjectKey: "sortObjectKey" }, outputs: { sortOptionClicked: "sortOptionClicked" }, ngImport: i0, template: "<p class=\"sort-container\">\r\n    <button\r\n        class=\"sort-btn\"\r\n        *ngFor=\"let option of sortOptions; let i = index\"\r\n        (click)=\"sortOptionChanged(i, option.sortType)\"\r\n        [ngClass]=\"{ active: option.isOptionActive }\"\r\n    >\r\n        {{option.text}}\r\n    </button>\r\n</p>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:13px;padding-bottom:15px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}\n"], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+AnnaSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: { sortObjectKey: "sortObjectKey" }, outputs: { sortOptionClicked: "sortOptionClicked" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"sort-container\">\r\n    <button\r\n        class=\"sort-btn\"\r\n        *ngFor=\"let option of sortOptions; let i = index\"\r\n        (click)=\"sortOptionChanged(i, option.sortType)\"\r\n        [ngClass]=\"{ active: option.isOptionActive }\"\r\n    >\r\n        {{option.text}}\r\n    </button>\r\n</p>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}\n"], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'anna-core-sort-lib', template: "<p class=\"sort-container\">\r\n    <button\r\n        class=\"sort-btn\"\r\n        *ngFor=\"let option of sortOptions; let i = index\"\r\n        (click)=\"sortOptionChanged(i, option.sortType)\"\r\n        [ngClass]=\"{ active: option.isOptionActive }\"\r\n    >\r\n        {{option.text}}\r\n    </button>\r\n</p>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:13px;padding-bottom:15px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}\n"] }]
+            args: [{ selector: 'anna-core-sort-lib', template: "<p class=\"sort-container\">\r\n    <button\r\n        class=\"sort-btn\"\r\n        *ngFor=\"let option of sortOptions; let i = index\"\r\n        (click)=\"sortOptionChanged(i, option.sortType)\"\r\n        [ngClass]=\"{ active: option.isOptionActive }\"\r\n    >\r\n        {{option.text}}\r\n    </button>\r\n</p>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.AnnaSortService }]; }, propDecorators: { sortObjectKey: [{
                 type: Input
             }], sortOptionClicked: [{
@@ -1302,7 +1322,6 @@ class AnnaNonEditableGenericTableComponent {
         }
         else {
             console.log("ng on change else condition");
-            console.log(JSON.stringify(this.tableData));
             // this.setInitialValueMapData();
             this.disableEnableEachColumnTooltipIcon();
             this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
@@ -1377,6 +1396,12 @@ class AnnaNonEditableGenericTableComponent {
         this.tooltipRadioTextMap.set("scheduledAdu", "Scheduled ADUs");
         this.tooltipRadioTextMap.set("audienceDeficit", "Audience Deficit");
         this.tooltipRadioTextMap.set("postedAudPercent", "Posted Audience %");
+        this.tooltipRadioTextMap.set("potentialUnitsValue", "POT Units");
+        this.tooltipRadioTextMap.set("bookedUnitsValue", "Booked Units");
+        this.tooltipRadioTextMap.set("bookedAmountWithZeroRatingValue", "Total $ Booked");
+        this.tooltipRadioTextMap.set("bookedAmountPercentageWithZeroRatingValue", "% of $ Booked");
+        this.tooltipRadioTextMap.set("bookedAmountWithoutZeroRatingValue", "$Booked With Imps(’000)");
+        this.tooltipRadioTextMap.set("bookedAmountPercentageWithoutZeroRatingValue", "% OF $ Booked");
     }
     generateTableDataWrapper() {
         this.showSkeletonLoading = true;
@@ -1577,33 +1602,39 @@ class AnnaNonEditableGenericTableComponent {
         // if same tooltip opened close it
         //need to change this
         //THe tooltip should not close
+        // if (tooltip == this.tooltip) {
+        //   this.bindValueFuncCalled = false;
+        //   this.closeTooltip();
+        // }
+        // else {
         if (tooltip == this.tooltip) {
+            console.log("inside if");
             this.bindValueFuncCalled = false;
-            this.closeTooltip();
-        }
-        else {
-            this.searchItem = '';
-            let enabledHeaders = [];
-            header.filterSortObjectKeys.forEach((item) => {
-                if (item == "period") {
-                    let uniqStartDate = uniq(this.tableData.map((u) => u["startDate"]));
-                    let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
-                    if (uniqStartDate.length > 1 || uniqEndDate.length > 1 || this.isTooltipActive([item])) {
-                        enabledHeaders.push(item);
-                    }
-                }
-                else if (uniq(this.tableData.map((u) => u[item])).length > 1 || this.isTooltipActive([item])) {
+            this.sameTooltipClicked = true;
+        }
+        this.searchItem = this.sameTooltipClicked ? this.searchItem : "";
+        let enabledHeaders = [];
+        header.filterSortObjectKeys.forEach((item) => {
+            if (item == "period") {
+                let uniqStartDate = uniq(this.tableData.map((u) => u["startDate"]));
+                let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
+                if (uniqStartDate.length > 1 || uniqEndDate.length > 1 || this.isTooltipActive([item])) {
                     enabledHeaders.push(item);
                 }
-            });
-            this.openTooltip(tooltip, enabledHeaders, header);
-            if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header.filterSortObjectKeys[0])) {
-                this.columnFilterOpened.emit();
             }
-            this.showCheckboxFilterRadioButtons = header.filterSortObjectKeys.length > 1;
-            this.populateTooltipDataBasedOnSelectedRadio(this.radioButtons[0]);
-            this.bindValueFuncCalled = false;
+            else if (uniq(this.tableData.map((u) => u[item])).length > 1 || this.isTooltipActive([item])) {
+                enabledHeaders.push(item);
+            }
+        });
+        this.openTooltip(tooltip, enabledHeaders, header);
+        if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header.filterSortObjectKeys[0])) {
+            this.columnFilterOpened.emit();
         }
+        this.showCheckboxFilterRadioButtons = header.filterSortObjectKeys.length > 1;
+        let radioButtonData = this.sameTooltipClicked ? this.radioButtons.filter(item => item.key == this.annaFilterService.selectedRadio)[0] : this.radioButtons[0];
+        this.populateTooltipDataBasedOnSelectedRadio(radioButtonData);
+        this.bindValueFuncCalled = false;
+        // }
     }
     openTooltip(tooltip, header, columnHeader) {
         this.closeTooltip();
@@ -1631,32 +1662,41 @@ class AnnaNonEditableGenericTableComponent {
         this.selectedLabel = radioButtonData.label;
         this.showSortComponent = false;
         this.showFilterComponent = false;
-        this.searchItem = "";
-        this.tempSortOrder = null;
-        setTimeout(() => {
-            this.showSortComponent = radioButtonData.isSortRequired;
-            this.showFilterComponent = radioButtonData.isFilterRequired;
-        }, 0);
-        this.disableSliderApplyButton = false;
-        this.disableCheckboxApply = false;
+        this.searchItem = this.sameTooltipClicked ? this.searchItem : null;
+        // setTimeout(() => {
+        this.showSortComponent = radioButtonData.isSortRequired;
+        this.showFilterComponent = radioButtonData.isFilterRequired;
+        // }, 0);
+        this.tempSortOrder = this.sameTooltipClicked ? this.tempSortOrder : null;
+        if (this.sameTooltipClicked && this.tempSortOrder) {
+            setTimeout(() => {
+                this.annaSortService.updateSortTypeSubject.next(this.tempSortOrder);
+            }, 0);
+        }
         if (this.toolTipdata) {
             this.revert();
         }
         this.annaFilterService.selectedRadio = header;
         let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
-        this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) ? false : true;
-        if (this.annaFilterService.calendarSet.has(header)) {
-            this.getCalendarData();
-        }
-        else if (this.annaFilterService.sliderSet.has(header)) {
-            this.getSliderData(header);
-        }
-        else if (this.annaFilterService.timeSet.has(header)) {
-            this.getTimeFilterData(header);
-        }
-        else {
-            this.getCheckboxData(header);
+        let isSortPresent = (this.annaSortService.columnSortState.size > 0 && this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio) != "DEFAULT");
+        this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
+        if (radioButtonData.isFilterRequired && !this.sameTooltipClicked) {
+            this.disableSliderApplyButton = false;
+            this.disableCheckboxApply = false;
+            if (this.annaFilterService.calendarSet.has(header)) {
+                this.getCalendarData();
+            }
+            else if (this.annaFilterService.sliderSet.has(header)) {
+                this.getSliderData(header);
+            }
+            else if (this.annaFilterService.timeSet.has(header)) {
+                this.getTimeFilterData(header);
+            }
+            else {
+                this.getCheckboxData(header);
+            }
         }
+        this.sameTooltipClicked = false;
     }
     getSliderData(header) {
         let translateFunc;
@@ -1711,13 +1751,13 @@ class AnnaNonEditableGenericTableComponent {
         else {
             tooltipOptions.forEach(item => item.isSelected = true);
         }
+        let index = tooltipOptions.findIndex(item => item.data == null);
+        if (index != -1) {
+            tooltipOptions[index].data = "(Blank)";
+        }
         let selectedItems = sortBy(tooltipOptions.filter(item => item.isSelected), "data");
         let unselectedItems = sortBy(tooltipOptions.filter(item => !item.isSelected), "data");
         this.clonedTooltipOptions = [...selectedItems, ...unselectedItems];
-        let index = this.clonedTooltipOptions.findIndex(item => item.data == null);
-        if (index != -1) {
-            this.clonedTooltipOptions[index].data = "(Blank)";
-        }
         this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
         this.disableSelectAll = unselectedItems.length == 0;
         this.disableClearAll = selectedItems.length == 0;
@@ -1762,6 +1802,7 @@ class AnnaNonEditableGenericTableComponent {
         console.log(this.selectedMaxDate);
     }
     getTimeFilterData(header) {
+        this.startTimeHourErr = this.startTimeMinErr = this.endTimeHourErr = this.endTimeMinErr = false;
         if (this.annaFilterService.tooltipSelectedMap.has(header)) {
             this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
             this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
@@ -1981,9 +2022,13 @@ class AnnaNonEditableGenericTableComponent {
                     currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
                 }
             }
+            if (this.searchItem) {
+                currentSelectedValue = currentSelectedValue.map((item) => this.removeBoldElementFromString(item));
+            }
             let blankIndex = currentSelectedValue.findIndex((item) => item == "(Blank)");
             if (blankIndex != -1) {
                 currentSelectedValue[blankIndex] = null;
+                currentSelectedValue = sortBy(currentSelectedValue);
             }
             console.log(currentSelectedValue);
             console.log(previousSelectedValue);
@@ -2218,15 +2263,23 @@ class AnnaNonEditableGenericTableComponent {
         else if (parseInt(arr[1]) == 0) {
             arr[1] = "00";
         }
+        else if (parseInt(arr[1]) > 60) {
+            let res = parseInt(arr[1]) - 60;
+            arr[1] = res < 10 ? `0${res}` : res.toString();
+        }
     }
     decrementMinute(arr) {
         arr[1] = parseInt(arr[1]) - 15;
-        if (parseInt(arr[1]) == -15) {
-            arr[1] = "45";
+        if (parseInt(arr[1]) < 0) {
+            let res = 60 + parseInt(arr[1]);
+            arr[1] = res;
         }
         else if (parseInt(arr[1]) == 0) {
             arr[1] = "00";
         }
+        else if (arr[1] < 10) {
+            arr[1] = `0${arr[1]}`;
+        }
     }
     changeStartTimeHour(increment) {
         if (increment) {
@@ -2235,7 +2288,8 @@ class AnnaNonEditableGenericTableComponent {
         else {
             this.decrementHour(this.selectedFromTime);
         }
-        this.disableTimeFilterApplyButton();
+        this.startTimeHourChange(this.selectedFromTime[0].toString());
+        // this.disableTimeFilterApplyButton();
     }
     changeEndTimeHour(increment) {
         if (increment) {
@@ -2244,7 +2298,8 @@ class AnnaNonEditableGenericTableComponent {
         else {
             this.decrementHour(this.selectedToTime);
         }
-        this.disableTimeFilterApplyButton();
+        this.endTimeHourChange(this.selectedToTime[0].toString());
+        // this.disableTimeFilterApplyButton();
     }
     changeEndTimeMinute(increment) {
         if (increment) {
@@ -2253,7 +2308,8 @@ class AnnaNonEditableGenericTableComponent {
         else {
             this.decrementMinute(this.selectedToTime);
         }
-        this.disableTimeFilterApplyButton();
+        this.endTimeMinChange(this.selectedToTime[1].toString());
+        // this.disableTimeFilterApplyButton();
     }
     changeStartTimeMinute(increment) {
         if (increment) {
@@ -2262,7 +2318,8 @@ class AnnaNonEditableGenericTableComponent {
         else {
             this.decrementMinute(this.selectedFromTime);
         }
-        this.disableTimeFilterApplyButton();
+        this.startTimeMinChange(this.selectedFromTime[1].toString());
+        // this.disableTimeFilterApplyButton();
     }
     applyTimeFilters() {
         let isFilterChanged = false;
@@ -2464,6 +2521,9 @@ class AnnaNonEditableGenericTableComponent {
     searchForTheItem(str) {
         if (str) {
             this.tooltipOptions = cloneDeep(this.clonedTooltipOptions.filter(item => item.data.toLowerCase().includes(str.toLowerCase())));
+            this.tooltipOptions.forEach(element => {
+                element.data = this.boldString(element.data, str);
+            });
             if (this.tooltipOptions.length > 0) {
                 this.tooltipOptions.forEach(item => item.isSelected = true);
                 this.disableSelectAll = true;
@@ -2484,6 +2544,18 @@ class AnnaNonEditableGenericTableComponent {
             this.disableClearAll = selectedItems.length == 0;
         }
     }
+    boldString(str, find) {
+        var re = new RegExp(find, 'g');
+        return str.replace(re, '<b>' + find + '</b>');
+    }
+    removeBoldElementFromString(originalString) {
+        let firstRegExp = new RegExp('<b>', 'g');
+        let secondRegExp = new RegExp('</b>', 'g');
+        let ret = originalString.replace(firstRegExp, '');
+        console.log(ret);
+        console.log(ret.replace(secondRegExp, ''));
+        return ret.replace(secondRegExp, '');
+    }
     clearSearchedItem() {
         this.searchItem = "";
         this.searchForTheItem("");
@@ -2552,12 +2624,48 @@ class AnnaNonEditableGenericTableComponent {
         };
         this.annaFilterService.initialValueMap.set(key, obj);
     }
+    startTimeHourChange(val) {
+        if (val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12) {
+            this.startTimeHourErr = true;
+        }
+        else {
+            this.startTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+    startTimeMinChange(val) {
+        if (val.length != 2 || 0 > parseInt(val) || parseInt(val) > 59) {
+            this.startTimeMinErr = true;
+        }
+        else {
+            this.startTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+    endTimeHourChange(val) {
+        if (val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12) {
+            this.endTimeHourErr = true;
+        }
+        else {
+            this.endTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+    endTimeMinChange(val) {
+        if (val.length != 2 || 0 > parseInt(val) || parseInt(val) > 59) {
+            this.endTimeMinErr = true;
+        }
+        else {
+            this.endTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
 }
 AnnaNonEditableGenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNonEditableGenericTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AnnaSortService }, { token: i1$1.AnnaDateTimeFormatService }, { token: i1$1.AnnaFilterService }, { token: i1$1.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" }, 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" }, viewQueries: [{ propertyName: "sortComponent", predicate: AnnaSortComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\">\r\n    <anna-table-virtual-scroll-viewport\r\n        [buffer]=\"gtGeneralConfig.bufferSize\"\r\n        [rowHeight]=\"gtDimension.rowHeight\"\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + rowBorderWidth) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + (2 * rowBorderWidth))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\"  [ngClass]=\"tableClass\" mat-table [appVirtualDataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length) ||\r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                [style.background-color]=\"rowData.backgroundColor\"\r\n                [style.border]=\"rowData.border\" (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    <strong>{{ column.data }}</strong>\r\n                    <ng-container *ngIf=\"column.lowerData\">\r\n                        <br>\r\n                        <span>{{column.lowerData}}</span>\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 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 == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: isTooltipActive(header.filterSortObjectKeys),       \r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"left-top 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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container\r\n                                *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <td\r\n                                    mat-cell\r\n                                    *ngIf=\"!ROW_DATA['hide' + subline.objectKey + 'Td']\"\r\n                                    [attr.rowspan]=\"ROW_DATA[subline.objectKey + 'Rowspan']\"\r\n                                >\r\n                                    <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                            <mat-radio-group\r\n                                                *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                                [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                                >\r\n                                                    <mat-radio-button\r\n                                                        value=\"{{ radioButton.value }}\"\r\n                                                        class=\"{{ radioButton.class }}\"\r\n                                                        (click)=\"\r\n                                                            radioButtonClicked(\r\n                                                                ROW_DATA,\r\n                                                                radioButton.value,\r\n                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                            )\r\n                                                        \"\r\n                                                        >{{ radioButton.label }}</mat-radio-button\r\n                                                    ><br *ngIf=\"!last\" />\r\n                                                </ng-container>\r\n                                            </mat-radio-group>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            {{ ROW_DATA[subline.objectKey] }}\r\n\r\n                                            <ng-container\r\n                                                *ngIf=\"\r\n                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                                \"\r\n                                            >\r\n                                                <i\r\n                                                    class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                    [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"remarks-info-tooltip\"\r\n                                                    #t=\"ngbTooltip\"\r\n                                                ></i>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\">\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <div *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_INFLIGHT'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                class=\"cursor-not-allowed\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.orderStatus != 'LIVE' && !ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                (click)=\"svgIconClicked(ROW_DATA,'payForPerformance')\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconDisableColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n\r\n                                            <anna-live-icon-template *ngIf=\"ROW_DATA.orderStatus == 'LIVE' && subline.objectKey == 'orderStatus' \"></anna-live-icon-template>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_COMPLETED'\">\r\n                                            <span *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\" (click)=\"$event.stopPropagation()\">\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'20px'\"\r\n                                                    [height]=\"'20px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'bizRuleStatus'\">\r\n                                            <anna-rejected-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'REJECTED'\"></anna-rejected-icon-template>\r\n                                            <anna-notify-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'NOTIFY'\"></anna-notify-icon-template>\r\n                                            <anna-buyer-approval-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'AWAITING_APPROVAL'\"></anna-buyer-approval-icon-template>\r\n                                        </ng-container>\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 *ngSwitchDefault>\r\n                                        <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                            <i\r\n                                                *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                class=\"mdi mdi-alert-circle-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                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                            <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                    {{ ROW_DATA.descriptionMessage }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                            </p>\r\n                                            <a\r\n                                                href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                target=\"_blank\"\r\n                                                *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                            >\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                            </a>\r\n                                            <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                              <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View details</button>\r\n                                              </a>\r\n                                            </ng-container>\r\n                                           \r\n                                            <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                            </a>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <ng-container\r\n                                    *ngIf=\"\r\n                                        gtGeneralConfig.page === 'SpotDetails' &&\r\n                                        columnDef.headerInfo[subLineIndex].objectKey === 'Status'\r\n                                    \"\r\n                                >\r\n                                    <img\r\n                                        src=\"assets/images/Undo-Credit-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForCredit\"\r\n                                        (click)=\"undoCreditedSpot(ROW_DATA)\"\r\n                                    />\r\n                                    <img\r\n                                        src=\"assets/images/Undo-MG-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForMakeGood\"\r\n                                        (click)=\"undoMgSpot(ROW_DATA)\"\r\n                                    />\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </anna-table-virtual-scroll-viewport>\r\n\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" *ngIf=\"!showSkeletonLoading && tableData.length == 0\"> </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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  (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\" *ngIf=\"searchItem && searchItem.length > 0\" (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div class=\"dropdown-data-container\">\r\n            <ng-container *ngFor=\"let option of tooltipOptions\">\r\n                <p class=\"input\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.data }}\">{{ option.data }}</span>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n        </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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\" (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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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 align-center\" [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()\" [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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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\" [(ngModel)]=\"selectedFromTime[0]\" disabled type=\"text\" />\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\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" disabled />\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]\" disabled 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\" [(ngModel)]=\"selectedToTime[1]\" disabled 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 #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.inventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>", 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:13px;padding-bottom:15px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:98%;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:85%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider{margin:5px 0 2px!important;width:100%!important}::ng-deep span.ngx-slider-bubble.ngx-slider-model-value{display:block!important;padding:2px!important;box-shadow:#00000059 0 3px 8px!important;height:20px!important}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}::ng-deep .ngx-slider-pointer:after{display:none!important}::ng-deep .ngx-slider-pointer:focus{outline:none!important}::ng-deep span.ngx-slider-bar{background:#ededed!important;height:3px!important}::ng-deep .filter-slider span.ngx-slider-bar.ngx-slider-selection{background:#bdbdbd!important;height:3px!important}::ng-deep .sidebar-slider{margin-bottom:35px!important;margin-left:.3125rem;margin-right:.3125rem}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-high{right:0!important}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-ceil{right:0!important}::ng-deep .ngx-slider.animate{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bubble{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bar{background:rgba(0,0,0,.26)!important;height:3px!important}::ng-deep .ngx-slider-bar.ngx-slider-selection{background:#42a5f5!important;height:3px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container button:last-of-type{background-color:#268bff;color:#fff}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 0 .188rem .5rem}.search-icon{margin:0 4px 0 0;font-size:1.125rem;color:#9b9b9b}.filter-icon{justify-content:right;margin-left:auto;color:#d4d4d4;color:#a1a1a1;font-size:16px;cursor:pointer}.data{margin:0 13px 0 8px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{margin:1px 0 1px 4px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}div.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}div.dropdown-data-container p.input{margin-left:0}div.dropdown-data-container p.input span.mi{padding-left:.4375rem}div.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}div.dropdown-data-container::-webkit-scrollbar{width:.188rem}div.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#cbcbcb;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.625rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;cursor:pointer}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:263px!important}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:6px!important;padding-bottom:6px!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;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}anna-table-virtual-scroll-viewport::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}anna-table-virtual-scroll-viewport::-webkit-scrollbar{width:5px;height:5px}anna-table-virtual-scroll-viewport::-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{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}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important}table.seller-hierarchy-table{table-layout:fixed;margin:.625rem .625rem .625rem .8125rem}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;box-shadow:none!important;border-top:1px solid #d4d4d4}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}\n"], components: [{ type: AnnaTableVirtualScrollViewportComponent, selector: "anna-table-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }, { type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i4.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i1$1.AnnaPayForPerformanceIconTemplateComponent, selector: "anna-pay-for-performance-icon-template", inputs: ["color", "width", "height"] }, { type: i1$1.AnnaLiveIconTemplateComponent, selector: "anna-live-icon-template" }, { type: i1$1.AnnaRejectedIconTemplateComponent, selector: "anna-rejected-icon-template" }, { type: i1$1.AnnaNotifyIconTemplateComponent, selector: "anna-notify-icon-template" }, { type: i1$1.AnnaBuyerApprovalIconTemplateComponent, selector: "anna-buyer-approval-icon-template" }, { type: i1$1.AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { type: i7.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: i8.AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { type: i8.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: i9.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]", inputs: ["rowHeight", "headerRowHeight", "buffer", "headerRows"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: AnnaVirtualTableDirective, selector: "[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]", inputs: ["appVirtualDataSource"] }, { type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3.MatCellDef, selector: "[matCellDef]" }, { type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i14.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: i14.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i9.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
+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" }, 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" }, viewQueries: [{ propertyName: "sortComponent", predicate: AnnaSortComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\">\r\n    <anna-table-virtual-scroll-viewport\r\n        [buffer]=\"gtGeneralConfig.bufferSize\"\r\n        [rowHeight]=\"gtDimension.rowHeight\"\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + rowBorderWidth) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + (2 * rowBorderWidth))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\"  [ngClass]=\"tableClass\" mat-table [appVirtualDataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length) ||\r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                [style.background-color]=\"rowData.backgroundColor\"\r\n                [style.border]=\"rowData.border\" (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    <strong>{{ column.data }}</strong>\r\n                    <ng-container *ngIf=\"column.lowerData\">\r\n                        <br>\r\n                        <span>{{column.lowerData}}</span>\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 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 == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: isTooltipActive(header.filterSortObjectKeys),       \r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container\r\n                                *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <td\r\n                                    mat-cell\r\n                                    *ngIf=\"!ROW_DATA['hide' + subline.objectKey + 'Td']\"\r\n                                    [attr.rowspan]=\"ROW_DATA[subline.objectKey + 'Rowspan']\"\r\n                                >\r\n                                    <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                            <mat-radio-group\r\n                                                *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                                [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                                >\r\n                                                    <mat-radio-button\r\n                                                        value=\"{{ radioButton.value }}\"\r\n                                                        class=\"{{ radioButton.class }}\"\r\n                                                        (click)=\"\r\n                                                            radioButtonClicked(\r\n                                                                ROW_DATA,\r\n                                                                radioButton.value,\r\n                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                            )\r\n                                                        \"\r\n                                                        >{{ radioButton.label }}</mat-radio-button\r\n                                                    ><br *ngIf=\"!last\" />\r\n                                                </ng-container>\r\n                                            </mat-radio-group>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            {{ ROW_DATA[subline.objectKey] }}\r\n\r\n                                            <ng-container\r\n                                                *ngIf=\"\r\n                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                                \"\r\n                                            >\r\n                                                <i\r\n                                                    class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                    [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"remarks-info-tooltip\"\r\n                                                    #t=\"ngbTooltip\"\r\n                                                ></i>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\">\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <div *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_INFLIGHT'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                class=\"cursor-not-allowed\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.orderStatus != 'LIVE' && !ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                (click)=\"svgIconClicked(ROW_DATA,'payForPerformance')\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconDisableColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n\r\n                                            <anna-live-icon-template *ngIf=\"ROW_DATA.orderStatus == 'LIVE' && subline.objectKey == 'orderStatus' \"></anna-live-icon-template>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_COMPLETED'\">\r\n                                            <span *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\" (click)=\"$event.stopPropagation()\">\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'20px'\"\r\n                                                    [height]=\"'20px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'bizRuleStatus'\">\r\n                                            <anna-rejected-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'REJECTED'\"></anna-rejected-icon-template>\r\n                                            <anna-notify-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'NOTIFY'\"></anna-notify-icon-template>\r\n                                            <anna-buyer-approval-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'AWAITING_APPROVAL'\"></anna-buyer-approval-icon-template>\r\n                                        </ng-container>\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 *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=\"mdi mdi-alert-circle-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                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                            <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                    {{ ROW_DATA.descriptionMessage }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                            </p>\r\n                                            <a\r\n                                                href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                target=\"_blank\"\r\n                                                *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                            >\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                            </a>\r\n                                            <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                              <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View details</button>\r\n                                              </a>\r\n                                            </ng-container>\r\n                                           \r\n                                            <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                            </a>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <ng-container\r\n                                    *ngIf=\"\r\n                                        gtGeneralConfig.page === 'SpotDetails' &&\r\n                                        columnDef.headerInfo[subLineIndex].objectKey === 'Status'\r\n                                    \"\r\n                                >\r\n                                    <img\r\n                                        src=\"assets/images/Undo-Credit-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForCredit\"\r\n                                        (click)=\"undoCreditedSpot(ROW_DATA)\"\r\n                                    />\r\n                                    <img\r\n                                        src=\"assets/images/Undo-MG-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForMakeGood\"\r\n                                        (click)=\"undoMgSpot(ROW_DATA)\"\r\n                                    />\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </anna-table-virtual-scroll-viewport>\r\n\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" *ngIf=\"!showSkeletonLoading && tableData.length == 0\"> </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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  (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear All</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select All</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div class=\"dropdown-data-container\">\r\n            <ng-container *ngFor=\"let option of tooltipOptions\">\r\n                <p class=\"input\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.data }}\" [innerHTML]=\"option.data\"></span>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n        </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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\" (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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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()\" [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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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 #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.inventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:98%;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:85%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider{margin:5px 0 2px!important;width:100%!important}::ng-deep span.ngx-slider-bubble.ngx-slider-model-value{display:block!important;padding:2px!important;box-shadow:#00000059 0 3px 8px!important;height:20px!important}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}::ng-deep .ngx-slider-pointer:after{display:none!important}::ng-deep .ngx-slider-pointer:focus{outline:none!important}::ng-deep span.ngx-slider-bar{background:#ededed!important;height:3px!important}::ng-deep .filter-slider span.ngx-slider-bar.ngx-slider-selection{background:#bdbdbd!important;height:3px!important}::ng-deep .sidebar-slider{margin-bottom:35px!important;margin-left:.3125rem;margin-right:.3125rem}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-high{right:0!important}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-ceil{right:0!important}::ng-deep .ngx-slider.animate{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bubble{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bar{background:rgba(0,0,0,.26)!important;height:3px!important}::ng-deep .ngx-slider-bar.ngx-slider-selection{background:#42a5f5!important;height:3px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container button:last-of-type{background-color:#268bff;color:#fff}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 0 .188rem .5rem}.search-icon{margin:0 4px 0 0;font-size:1.125rem;color:#9b9b9b}.filter-icon{justify-content:right;margin-left:auto;color:#d4d4d4;color:#a1a1a1;font-size:16px;cursor:pointer}.data{margin:0 13px 0 8px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{margin:1px 0 1px 4px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}div.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}div.dropdown-data-container p.input{margin-left:0}div.dropdown-data-container p.input span.mi{padding-left:.4375rem}div.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}div.dropdown-data-container::-webkit-scrollbar{width:.188rem}div.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#cbcbcb;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.625rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:263px!important;overflow-y:initial!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}.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;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}anna-table-virtual-scroll-viewport::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}anna-table-virtual-scroll-viewport::-webkit-scrollbar{width:5px;height:5px}anna-table-virtual-scroll-viewport::-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{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}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important}table.seller-hierarchy-table{table-layout:fixed;margin:.625rem .625rem .625rem .8125rem}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;box-shadow:none!important;border-top:1px solid #d4d4d4}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}\n"], components: [{ type: AnnaTableVirtualScrollViewportComponent, selector: "anna-table-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }, { type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i4.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i1$1.AnnaPayForPerformanceIconTemplateComponent, selector: "anna-pay-for-performance-icon-template", inputs: ["color", "width", "height"] }, { type: i1$1.AnnaLiveIconTemplateComponent, selector: "anna-live-icon-template" }, { type: i1$1.AnnaRejectedIconTemplateComponent, selector: "anna-rejected-icon-template" }, { type: i1$1.AnnaNotifyIconTemplateComponent, selector: "anna-notify-icon-template" }, { type: i1$1.AnnaBuyerApprovalIconTemplateComponent, selector: "anna-buyer-approval-icon-template" }, { type: i1$1.AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { type: i7.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: i8.AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { type: i8.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: i9.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]", inputs: ["rowHeight", "headerRowHeight", "buffer", "headerRows"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: AnnaVirtualTableDirective, selector: "[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]", inputs: ["appVirtualDataSource"] }, { type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3.MatCellDef, selector: "[matCellDef]" }, { type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i14.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: i14.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i9.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNonEditableGenericTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'anna-core-non-editable-generic-table-lib', template: "<div class=\"table-container\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\">\r\n    <anna-table-virtual-scroll-viewport\r\n        [buffer]=\"gtGeneralConfig.bufferSize\"\r\n        [rowHeight]=\"gtDimension.rowHeight\"\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + rowBorderWidth) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + (2 * rowBorderWidth))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\"  [ngClass]=\"tableClass\" mat-table [appVirtualDataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length) ||\r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                [style.background-color]=\"rowData.backgroundColor\"\r\n                [style.border]=\"rowData.border\" (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    <strong>{{ column.data }}</strong>\r\n                    <ng-container *ngIf=\"column.lowerData\">\r\n                        <br>\r\n                        <span>{{column.lowerData}}</span>\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 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 == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: isTooltipActive(header.filterSortObjectKeys),       \r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"left-top 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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container\r\n                                *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <td\r\n                                    mat-cell\r\n                                    *ngIf=\"!ROW_DATA['hide' + subline.objectKey + 'Td']\"\r\n                                    [attr.rowspan]=\"ROW_DATA[subline.objectKey + 'Rowspan']\"\r\n                                >\r\n                                    <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                            <mat-radio-group\r\n                                                *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                                [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                                >\r\n                                                    <mat-radio-button\r\n                                                        value=\"{{ radioButton.value }}\"\r\n                                                        class=\"{{ radioButton.class }}\"\r\n                                                        (click)=\"\r\n                                                            radioButtonClicked(\r\n                                                                ROW_DATA,\r\n                                                                radioButton.value,\r\n                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                            )\r\n                                                        \"\r\n                                                        >{{ radioButton.label }}</mat-radio-button\r\n                                                    ><br *ngIf=\"!last\" />\r\n                                                </ng-container>\r\n                                            </mat-radio-group>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            {{ ROW_DATA[subline.objectKey] }}\r\n\r\n                                            <ng-container\r\n                                                *ngIf=\"\r\n                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                                \"\r\n                                            >\r\n                                                <i\r\n                                                    class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                    [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"remarks-info-tooltip\"\r\n                                                    #t=\"ngbTooltip\"\r\n                                                ></i>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\">\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <div *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_INFLIGHT'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                class=\"cursor-not-allowed\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.orderStatus != 'LIVE' && !ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                (click)=\"svgIconClicked(ROW_DATA,'payForPerformance')\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconDisableColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n\r\n                                            <anna-live-icon-template *ngIf=\"ROW_DATA.orderStatus == 'LIVE' && subline.objectKey == 'orderStatus' \"></anna-live-icon-template>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_COMPLETED'\">\r\n                                            <span *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\" (click)=\"$event.stopPropagation()\">\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'20px'\"\r\n                                                    [height]=\"'20px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'bizRuleStatus'\">\r\n                                            <anna-rejected-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'REJECTED'\"></anna-rejected-icon-template>\r\n                                            <anna-notify-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'NOTIFY'\"></anna-notify-icon-template>\r\n                                            <anna-buyer-approval-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'AWAITING_APPROVAL'\"></anna-buyer-approval-icon-template>\r\n                                        </ng-container>\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 *ngSwitchDefault>\r\n                                        <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                            <i\r\n                                                *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                class=\"mdi mdi-alert-circle-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                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                            <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                    {{ ROW_DATA.descriptionMessage }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                            </p>\r\n                                            <a\r\n                                                href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                target=\"_blank\"\r\n                                                *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                            >\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                            </a>\r\n                                            <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                              <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View details</button>\r\n                                              </a>\r\n                                            </ng-container>\r\n                                           \r\n                                            <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                            </a>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <ng-container\r\n                                    *ngIf=\"\r\n                                        gtGeneralConfig.page === 'SpotDetails' &&\r\n                                        columnDef.headerInfo[subLineIndex].objectKey === 'Status'\r\n                                    \"\r\n                                >\r\n                                    <img\r\n                                        src=\"assets/images/Undo-Credit-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForCredit\"\r\n                                        (click)=\"undoCreditedSpot(ROW_DATA)\"\r\n                                    />\r\n                                    <img\r\n                                        src=\"assets/images/Undo-MG-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForMakeGood\"\r\n                                        (click)=\"undoMgSpot(ROW_DATA)\"\r\n                                    />\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </anna-table-virtual-scroll-viewport>\r\n\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" *ngIf=\"!showSkeletonLoading && tableData.length == 0\"> </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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  (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\" *ngIf=\"searchItem && searchItem.length > 0\" (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div class=\"dropdown-data-container\">\r\n            <ng-container *ngFor=\"let option of tooltipOptions\">\r\n                <p class=\"input\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.data }}\">{{ option.data }}</span>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n        </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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\" (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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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 align-center\" [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()\" [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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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\" [(ngModel)]=\"selectedFromTime[0]\" disabled type=\"text\" />\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\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" disabled />\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]\" disabled 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\" [(ngModel)]=\"selectedToTime[1]\" disabled 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 #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.inventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>", 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:13px;padding-bottom:15px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:98%;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:85%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider{margin:5px 0 2px!important;width:100%!important}::ng-deep span.ngx-slider-bubble.ngx-slider-model-value{display:block!important;padding:2px!important;box-shadow:#00000059 0 3px 8px!important;height:20px!important}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}::ng-deep .ngx-slider-pointer:after{display:none!important}::ng-deep .ngx-slider-pointer:focus{outline:none!important}::ng-deep span.ngx-slider-bar{background:#ededed!important;height:3px!important}::ng-deep .filter-slider span.ngx-slider-bar.ngx-slider-selection{background:#bdbdbd!important;height:3px!important}::ng-deep .sidebar-slider{margin-bottom:35px!important;margin-left:.3125rem;margin-right:.3125rem}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-high{right:0!important}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-ceil{right:0!important}::ng-deep .ngx-slider.animate{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bubble{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bar{background:rgba(0,0,0,.26)!important;height:3px!important}::ng-deep .ngx-slider-bar.ngx-slider-selection{background:#42a5f5!important;height:3px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container button:last-of-type{background-color:#268bff;color:#fff}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 0 .188rem .5rem}.search-icon{margin:0 4px 0 0;font-size:1.125rem;color:#9b9b9b}.filter-icon{justify-content:right;margin-left:auto;color:#d4d4d4;color:#a1a1a1;font-size:16px;cursor:pointer}.data{margin:0 13px 0 8px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{margin:1px 0 1px 4px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}div.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}div.dropdown-data-container p.input{margin-left:0}div.dropdown-data-container p.input span.mi{padding-left:.4375rem}div.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}div.dropdown-data-container::-webkit-scrollbar{width:.188rem}div.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#cbcbcb;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.625rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;cursor:pointer}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:263px!important}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:6px!important;padding-bottom:6px!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;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}anna-table-virtual-scroll-viewport::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}anna-table-virtual-scroll-viewport::-webkit-scrollbar{width:5px;height:5px}anna-table-virtual-scroll-viewport::-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{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}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important}table.seller-hierarchy-table{table-layout:fixed;margin:.625rem .625rem .625rem .8125rem}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;box-shadow:none!important;border-top:1px solid #d4d4d4}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}\n"] }]
+            args: [{ selector: 'anna-core-non-editable-generic-table-lib', template: "<div class=\"table-container\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft }\">\r\n    <anna-table-virtual-scroll-viewport\r\n        [buffer]=\"gtGeneralConfig.bufferSize\"\r\n        [rowHeight]=\"gtDimension.rowHeight\"\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + rowBorderWidth) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + (2 * rowBorderWidth))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\"  [ngClass]=\"tableClass\" mat-table [appVirtualDataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length) ||\r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                [style.background-color]=\"rowData.backgroundColor\"\r\n                [style.border]=\"rowData.border\" (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    <strong>{{ column.data }}</strong>\r\n                    <ng-container *ngIf=\"column.lowerData\">\r\n                        <br>\r\n                        <span>{{column.lowerData}}</span>\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 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 == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: isTooltipActive(header.filterSortObjectKeys),       \r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\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: isTooltipActive(header.filterSortObjectKeys),\r\n                                            disabled: header.disableTooltipIcon && !isTooltipActive(header.filterSortObjectKeys)\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container\r\n                                *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <td\r\n                                    mat-cell\r\n                                    *ngIf=\"!ROW_DATA['hide' + subline.objectKey + 'Td']\"\r\n                                    [attr.rowspan]=\"ROW_DATA[subline.objectKey + 'Rowspan']\"\r\n                                >\r\n                                    <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                                (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                            <mat-radio-group\r\n                                                *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                                [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                                >\r\n                                                    <mat-radio-button\r\n                                                        value=\"{{ radioButton.value }}\"\r\n                                                        class=\"{{ radioButton.class }}\"\r\n                                                        (click)=\"\r\n                                                            radioButtonClicked(\r\n                                                                ROW_DATA,\r\n                                                                radioButton.value,\r\n                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                            )\r\n                                                        \"\r\n                                                        >{{ radioButton.label }}</mat-radio-button\r\n                                                    ><br *ngIf=\"!last\" />\r\n                                                </ng-container>\r\n                                            </mat-radio-group>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            {{ ROW_DATA[subline.objectKey] }}\r\n\r\n                                            <ng-container\r\n                                                *ngIf=\"\r\n                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                                \"\r\n                                            >\r\n                                                <i\r\n                                                    class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                    [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"remarks-info-tooltip\"\r\n                                                    #t=\"ngbTooltip\"\r\n                                                ></i>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\">\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <div *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"></i>\r\n                                    </ng-container>\r\n\r\n                                    <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_INFLIGHT'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                class=\"cursor-not-allowed\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA.orderStatus != 'LIVE' && !ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\"\r\n                                                (click)=\"svgIconClicked(ROW_DATA,'payForPerformance')\"\r\n                                            >\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconDisableColor\"\r\n                                                    [width]=\"'15px'\"\r\n                                                    [height]=\"'15px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n\r\n                                            <anna-live-icon-template *ngIf=\"ROW_DATA.orderStatus == 'LIVE' && subline.objectKey == 'orderStatus' \"></anna-live-icon-template>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"gtGeneralConfig.component == 'ORDER_LISTING_COMPLETED'\">\r\n                                            <span *ngIf=\"ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'\" (click)=\"$event.stopPropagation()\">\r\n                                                <anna-pay-for-performance-icon-template\r\n                                                    [color]=\"PfpIconActiveColor\"\r\n                                                    [width]=\"'20px'\"\r\n                                                    [height]=\"'20px'\"\r\n                                                >\r\n                                                </anna-pay-for-performance-icon-template>\r\n                                            </span>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'bizRuleStatus'\">\r\n                                            <anna-rejected-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'REJECTED'\"></anna-rejected-icon-template>\r\n                                            <anna-notify-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'NOTIFY'\"></anna-notify-icon-template>\r\n                                            <anna-buyer-approval-icon-template *ngIf=\"ROW_DATA.bizRuleStatus == 'AWAITING_APPROVAL'\"></anna-buyer-approval-icon-template>\r\n                                        </ng-container>\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 *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=\"mdi mdi-alert-circle-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                                        </ng-container>\r\n                                        <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                            <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                    {{ ROW_DATA.descriptionMessage }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                    <br />\r\n                                                </ng-container>\r\n                                            </p>\r\n                                            <a\r\n                                                href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                target=\"_blank\"\r\n                                                *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                            >\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                            </a>\r\n                                            <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                              <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View details</button>\r\n                                              </a>\r\n                                            </ng-container>\r\n                                           \r\n                                            <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl\">\r\n                                                <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                            </a>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n\r\n                                <ng-container\r\n                                    *ngIf=\"\r\n                                        gtGeneralConfig.page === 'SpotDetails' &&\r\n                                        columnDef.headerInfo[subLineIndex].objectKey === 'Status'\r\n                                    \"\r\n                                >\r\n                                    <img\r\n                                        src=\"assets/images/Undo-Credit-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForCredit\"\r\n                                        (click)=\"undoCreditedSpot(ROW_DATA)\"\r\n                                    />\r\n                                    <img\r\n                                        src=\"assets/images/Undo-MG-Icon.svg\"\r\n                                        style=\"cursor: pointer\"\r\n                                        class=\"img-circle\"\r\n                                        alt=\"User Image\"\r\n                                        height=\"15px\"\r\n                                        width=\"15px\"\r\n                                        *ngIf=\"ROW_DATA.AllowUserToUndoMarkForMakeGood\"\r\n                                        (click)=\"undoMgSpot(ROW_DATA)\"\r\n                                    />\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </anna-table-virtual-scroll-viewport>\r\n\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" *ngIf=\"!showSkeletonLoading && tableData.length == 0\"> </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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  (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear All</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select All</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div class=\"dropdown-data-container\">\r\n            <ng-container *ngFor=\"let option of tooltipOptions\">\r\n                <p class=\"input\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.data }}\" [innerHTML]=\"option.data\"></span>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n        </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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.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\" (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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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()\" [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=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <p class=\"filter-tab\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"radioButtons.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" (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 #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.inventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:98%;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:85%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider{margin:5px 0 2px!important;width:100%!important}::ng-deep span.ngx-slider-bubble.ngx-slider-model-value{display:block!important;padding:2px!important;box-shadow:#00000059 0 3px 8px!important;height:20px!important}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}::ng-deep .ngx-slider-pointer:after{display:none!important}::ng-deep .ngx-slider-pointer:focus{outline:none!important}::ng-deep span.ngx-slider-bar{background:#ededed!important;height:3px!important}::ng-deep .filter-slider span.ngx-slider-bar.ngx-slider-selection{background:#bdbdbd!important;height:3px!important}::ng-deep .sidebar-slider{margin-bottom:35px!important;margin-left:.3125rem;margin-right:.3125rem}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-high{right:0!important}::ng-deep .ngx-slider-span.ngx-slider-bubble.ngx-slider-model-ceil{right:0!important}::ng-deep .ngx-slider.animate{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bubble{top:10px!important;bottom:0!important;padding:1px 0!important;font-size:12px!important}::ng-deep .ngx-slider-bar{background:rgba(0,0,0,.26)!important;height:3px!important}::ng-deep .ngx-slider-bar.ngx-slider-selection{background:#42a5f5!important;height:3px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container button:last-of-type{background-color:#268bff;color:#fff}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 0 .188rem .5rem}.search-icon{margin:0 4px 0 0;font-size:1.125rem;color:#9b9b9b}.filter-icon{justify-content:right;margin-left:auto;color:#d4d4d4;color:#a1a1a1;font-size:16px;cursor:pointer}.data{margin:0 13px 0 8px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{margin:1px 0 1px 4px;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}div.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}div.dropdown-data-container p.input{margin-left:0}div.dropdown-data-container p.input span.mi{padding-left:.4375rem}div.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}div.dropdown-data-container::-webkit-scrollbar{width:.188rem}div.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#cbcbcb;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.625rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:263px!important;overflow-y:initial!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}.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;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}anna-table-virtual-scroll-viewport::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}anna-table-virtual-scroll-viewport::-webkit-scrollbar{width:5px;height:5px}anna-table-virtual-scroll-viewport::-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{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}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important}table.seller-hierarchy-table{table-layout:fixed;margin:.625rem .625rem .625rem .8125rem}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;box-shadow:none!important;border-top:1px solid #d4d4d4}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.AnnaSortService }, { type: i1$1.AnnaDateTimeFormatService }, { type: i1$1.AnnaFilterService }, { type: i1$1.AnnaGenericTableService }]; }, propDecorators: { showSkeletonLoading: [{
                 type: Input
             }], tableHeaders: [{
@@ -3177,9 +3285,152 @@ var AllSelectedStatus;
     AllSelectedStatus[AllSelectedStatus["fewSelected"] = 2] = "fewSelected";
 })(AllSelectedStatus || (AllSelectedStatus = {}));
 
+// Angular import statements
+// Third party import statements
+// User defined import statements
+class AnnaSortService {
+    constructor(annaDateTimeFormatService) {
+        this.annaDateTimeFormatService = annaDateTimeFormatService;
+        this.updateSortTypeSubject = new Subject();
+        this.dateSet = new Set([
+            'endDate',
+            'startDate',
+            'end_date',
+            'start_date',
+            'flightStartDate',
+            'flightEndDate',
+        ]);
+        console.log('AnnaTableColumnSortService sevice created.');
+    }
+    sortDataForComponentOtherThanLurAndCsrPage(isAsc, data, key) {
+        let param1;
+        let param2;
+        if (this.dateSet.has(key)) {
+            data.sort((a, b) => {
+                return this.annaDateTimeFormatService.compareDate(a[key], b[key], isAsc);
+            });
+        }
+        else if (key === 'AirDateAndTime') {
+            data.sort((a, b) => {
+                let first, second;
+                if (a[key] == '-') {
+                    return 1;
+                }
+                if (b[key] == '-') {
+                    return -1;
+                }
+                else {
+                    first =
+                        this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(a[key]);
+                    second =
+                        this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(b[key]);
+                    let compareDate = this.annaDateTimeFormatService.compareDate(first, second, isAsc);
+                    return compareDate;
+                }
+            });
+        }
+        else if (key == 'startEndTime' || key == 'TimeBand') {
+            data.sort((a, b) => {
+                if (isAsc) {
+                    param1 = a[key][1];
+                    param2 = b[key][1];
+                }
+                else {
+                    param1 = a[key][2];
+                    param2 = b[key][2];
+                }
+                let val = isAsc
+                    ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
+                    : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
+                return val;
+            });
+        }
+        else {
+            data.sort((a, b) => {
+                param1 = a[key];
+                param2 = b[key];
+                if (param1 !== param2) {
+                    return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+                }
+                return 0;
+            });
+        }
+        return data;
+    }
+    sortEnterEditLurAndCsrPage(isAsc, data, key) {
+        let param1;
+        let param2;
+        if (key.includes('_')) {
+            let keys = key.split('_');
+            let weekNumber = keys[0];
+            let sortKey = keys[1];
+            if (keys.length > 2) {
+                sortKey =
+                    keys[2] == true
+                        ? 'BookedAurIncludingNoChargeSpots'
+                        : 'BookedAurExcludingNoChargeSpots';
+            }
+            data.sort((a, b) => {
+                let aInventoryCodeWeekWiseKey = Object.keys(a.WeekWiseInventoryCodeData).filter((key) => key.split('_')[1] == weekNumber);
+                let bInventoryCodeWeekWiseKey = Object.keys(b.WeekWiseInventoryCodeData).filter((key) => key.split('_')[1] == weekNumber);
+                param1 = null;
+                param2 = null;
+                if (aInventoryCodeWeekWiseKey.length > 0) {
+                    param1 =
+                        a.WeekWiseInventoryCodeData[aInventoryCodeWeekWiseKey[0]][sortKey][1];
+                }
+                if (bInventoryCodeWeekWiseKey.length > 0) {
+                    param2 =
+                        b.WeekWiseInventoryCodeData[bInventoryCodeWeekWiseKey[0]][sortKey][1];
+                }
+                if (param1 !== param2) {
+                    return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+                }
+                return 0;
+            });
+        }
+        else if (key == 'TimeBand') {
+            data.sort((a, b) => {
+                if (isAsc) {
+                    param1 = a[key][1];
+                    param2 = b[key][1];
+                }
+                else {
+                    param1 = a[key][2];
+                    param2 = b[key][2];
+                }
+                let val = isAsc
+                    ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
+                    : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
+                return val;
+            });
+        }
+        else {
+            data.sort((a, b) => {
+                param1 = a[key];
+                param2 = b[key];
+                if (param1 !== param2) {
+                    return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
+                }
+                return 0;
+            });
+        }
+        return data;
+    }
+}
+AnnaSortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortService, deps: [{ token: AnnaDateTimeFormatService }], target: i0.ɵɵFactoryTarget.Injectable });
+AnnaSortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: AnnaDateTimeFormatService }]; } });
+
 class AnnaFilterService {
-    constructor(dateTimeFormatService) {
+    constructor(dateTimeFormatService, annaSortService) {
         this.dateTimeFormatService = dateTimeFormatService;
+        this.annaSortService = annaSortService;
         this.tooltipMap = new Map();
         this.tooltipSelectedMap = new Map();
         this.appliedFiltersArray = [];
@@ -3266,10 +3517,15 @@ class AnnaFilterService {
         return ((sortMap.size > 0 && sortMap.get(header[0]) != "DEFAULT") || (sortMap.size > 0 && sortMap.get(header[1]) != "DEFAULT") || set.has(header[0]) || set.has(header[1]));
     }
     clearColumnFilter() {
-        this.tooltipSelectedMap.delete(this.selectedRadio);
-        let appliedFilterSet = new Set(this.appliedFiltersArray);
-        appliedFilterSet.delete(this.selectedRadio);
-        this.appliedFiltersArray = [...appliedFilterSet];
+        if (this.tooltipSelectedMap.has(this.selectedRadio)) {
+            this.tooltipSelectedMap.delete(this.selectedRadio);
+            let appliedFilterSet = new Set(this.appliedFiltersArray);
+            appliedFilterSet.delete(this.selectedRadio);
+            this.appliedFiltersArray = [...appliedFilterSet];
+        }
+        if (this.annaSortService.columnSortState.has(this.selectedRadio)) {
+            this.annaSortService.columnSortState.set(this.selectedRadio, "DEFAULT");
+        }
     }
     populateSliderTooltip(completeData, filteredData) {
         let minValue;
@@ -3747,155 +4003,14 @@ class AnnaFilterService {
     }
 }
 AnnaFilterService.bufferSize = 20;
-AnnaFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFilterService, deps: [{ token: AnnaDateTimeFormatService }], target: i0.ɵɵFactoryTarget.Injectable });
+AnnaFilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFilterService, deps: [{ token: AnnaDateTimeFormatService }, { token: AnnaSortService }], target: i0.ɵɵFactoryTarget.Injectable });
 AnnaFilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFilterService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFilterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: AnnaDateTimeFormatService }]; } });
-
-// Angular import statements
-// Third party import statements
-// User defined import statements
-class AnnaSortService {
-    constructor(annaDateTimeFormatService) {
-        this.annaDateTimeFormatService = annaDateTimeFormatService;
-        this.dateSet = new Set([
-            'endDate',
-            'startDate',
-            'end_date',
-            'start_date',
-            'flightStartDate',
-            'flightEndDate',
-        ]);
-        console.log('AnnaTableColumnSortService sevice created.');
-    }
-    sortDataForComponentOtherThanLurAndCsrPage(isAsc, data, key) {
-        let param1;
-        let param2;
-        if (this.dateSet.has(key)) {
-            data.sort((a, b) => {
-                return this.annaDateTimeFormatService.compareDate(a[key], b[key], isAsc);
-            });
-        }
-        else if (key === 'AirDateAndTime') {
-            data.sort((a, b) => {
-                let first, second;
-                if (a[key] == '-') {
-                    return 1;
-                }
-                if (b[key] == '-') {
-                    return -1;
-                }
-                else {
-                    first =
-                        this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(a[key]);
-                    second =
-                        this.annaDateTimeFormatService.formatDateAndHHMMATimeToStandardFormat(b[key]);
-                    let compareDate = this.annaDateTimeFormatService.compareDate(first, second, isAsc);
-                    return compareDate;
-                }
-            });
-        }
-        else if (key == 'startEndTime' || key == 'TimeBand') {
-            data.sort((a, b) => {
-                if (isAsc) {
-                    param1 = a[key][1];
-                    param2 = b[key][1];
-                }
-                else {
-                    param1 = a[key][2];
-                    param2 = b[key][2];
-                }
-                let val = isAsc
-                    ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
-                    : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
-                return val;
-            });
-        }
-        else {
-            data.sort((a, b) => {
-                param1 = a[key];
-                param2 = b[key];
-                if (param1 !== param2) {
-                    return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
-                }
-                return 0;
-            });
-        }
-        return data;
-    }
-    sortEnterEditLurAndCsrPage(isAsc, data, key) {
-        let param1;
-        let param2;
-        if (key.includes('_')) {
-            let keys = key.split('_');
-            let weekNumber = keys[0];
-            let sortKey = keys[1];
-            if (keys.length > 2) {
-                sortKey =
-                    keys[2] == true
-                        ? 'BookedAurIncludingNoChargeSpots'
-                        : 'BookedAurExcludingNoChargeSpots';
-            }
-            data.sort((a, b) => {
-                let aInventoryCodeWeekWiseKey = Object.keys(a.WeekWiseInventoryCodeData).filter((key) => key.split('_')[1] == weekNumber);
-                let bInventoryCodeWeekWiseKey = Object.keys(b.WeekWiseInventoryCodeData).filter((key) => key.split('_')[1] == weekNumber);
-                param1 = null;
-                param2 = null;
-                if (aInventoryCodeWeekWiseKey.length > 0) {
-                    param1 =
-                        a.WeekWiseInventoryCodeData[aInventoryCodeWeekWiseKey[0]][sortKey][1];
-                }
-                if (bInventoryCodeWeekWiseKey.length > 0) {
-                    param2 =
-                        b.WeekWiseInventoryCodeData[bInventoryCodeWeekWiseKey[0]][sortKey][1];
-                }
-                if (param1 !== param2) {
-                    return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
-                }
-                return 0;
-            });
-        }
-        else if (key == 'TimeBand') {
-            data.sort((a, b) => {
-                if (isAsc) {
-                    param1 = a[key][1];
-                    param2 = b[key][1];
-                }
-                else {
-                    param1 = a[key][2];
-                    param2 = b[key][2];
-                }
-                let val = isAsc
-                    ? this.annaDateTimeFormatService.sortByTimeAscending(param1, param2)
-                    : this.annaDateTimeFormatService.sortByTimeDescending(param1, param2);
-                return val;
-            });
-        }
-        else {
-            data.sort((a, b) => {
-                param1 = a[key];
-                param2 = b[key];
-                if (param1 !== param2) {
-                    return this.annaDateTimeFormatService.compare(param1, param2, isAsc);
-                }
-                return 0;
-            });
-        }
-        return data;
-    }
-}
-AnnaSortService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortService, deps: [{ token: AnnaDateTimeFormatService }], target: i0.ɵɵFactoryTarget.Injectable });
-AnnaSortService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaSortService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: AnnaDateTimeFormatService }]; } });
+        }], ctorParameters: function () { return [{ type: AnnaDateTimeFormatService }, { type: AnnaSortService }]; } });
 
 // Angular import statements
 class AnnaGenericTableService {