@annalib/anna-core 0.0.4 → 0.0.7

package/fesm2015/annalib-anna-core.mjs

@@ -1,35 +1,35 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, NgModule, ViewEncapsulation, Optional, Inject, ViewChild, forwardRef, Directive, ContentChildren, ViewChildren, Pipe, Injectable } from '@angular/core';
-import * as i10 from '@angular/common';
+import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, NgModule, ViewChildren, ViewEncapsulation, Optional, Inject, ViewChild, forwardRef, Directive, ContentChildren, Pipe, Injectable } from '@angular/core';
+import * as i9 from '@angular/common';
 import { DatePipe, CommonModule } from '@angular/common';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDate, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import moment from 'moment';
 import * as i1$1 from '@annalib/anna-core/src/lib/anna-core-shared-lib';
-import { AnnaCoreSharedLibModule as AnnaCoreSharedLibModule$1, AnnaFilterService as AnnaFilterService$1, radioButtonModel as radioButtonModel$1 } from '@annalib/anna-core/src/lib/anna-core-shared-lib';
-import * as i14 from '@angular/forms';
+import { AnnaCoreSharedLibModule as AnnaCoreSharedLibModule$1, radioButtonModel as radioButtonModel$1, AnnaFilterService as AnnaFilterService$1 } from '@annalib/anna-core/src/lib/anna-core-shared-lib';
+import * as i11 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i6 from '@angular/material/radio';
+import * as i5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i9 from '@angular/material/button-toggle';
+import * as i8 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i3 from '@angular/material/table';
+import * as i2 from '@angular/material/table';
 import { MatHeaderRowDef, MatTableModule } from '@angular/material/table';
-import * as i7 from '@angular-slider/ngx-slider';
+import * as i6 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
-import * as i5 from 'ngx-skeleton-loader';
+import * as i4 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { cloneDeep, map as map$1, uniq, isEqual, memoize, min, max, sortBy } from 'lodash-es';
-import { animationFrameScheduler, asapScheduler, Subject, Observable, Subscription, isObservable, of } from 'rxjs';
-import { startWith, auditTime, takeUntil, distinctUntilChanged, pairwise, switchMap, shareReplay, map } from 'rxjs/operators';
-import * as i2 from '@angular/cdk/scrolling';
+import { cloneDeep, map, uniq, isEqual, memoize, min, max, sortBy } from 'lodash-es';
+import { fromEvent, animationFrameScheduler, asapScheduler, Subject, Observable, Subscription, isObservable, of } from 'rxjs';
+import * as i7 from '@annalib/anna-core/src/lib/anna-dropdown-lib';
+import { AnnaDropdownLibModule as AnnaDropdownLibModule$1 } from '@annalib/anna-core/src/lib/anna-dropdown-lib';
+import { startWith, auditTime, takeUntil, distinctUntilChanged, pairwise, switchMap, shareReplay, map as map$1 } from 'rxjs/operators';
+import * as i2$1 from '@angular/cdk/scrolling';
 import { CdkScrollable, VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i1$2 from '@angular/cdk/bidi';
-import * as i8 from '@annalib/anna-core/src/lib/anna-dropdown-lib';
-import { AnnaDropdownLibModule as AnnaDropdownLibModule$1 } from '@annalib/anna-core/src/lib/anna-dropdown-lib';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { isDataSource, ArrayDataSource } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/cdk/table';
+import * as i2$2 from '@angular/cdk/table';
 import { _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER, CdkHeaderRowDef } from '@angular/cdk/table';
 
 // Angular import statements
@@ -354,7 +354,7 @@ class AnnaWeekCalendarComponent {
     }
 }
 AnnaWeekCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaWeekCalendarComponent, deps: [{ token: i1.NgbCalendar }, { token: i1.NgbDatepickerConfig }, { token: i1$1.AnnaDateTimeFormatService }, { token: i1$1.AnnaGlobalConfigService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaWeekCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaWeekCalendarComponent, selector: "anna-core-week-calendar-filter-lib", inputs: { selectedFromDate: ["from-date", "selectedFromDate"], selectedEndDate: ["to-date", "selectedEndDate"], disabledDates: ["disabled-dates", "disabledDates"], maxDate: "maxDate", minDate: "minDate", config: ["week-calendar-config", "config"] }, outputs: { applyWeekCalendarChanges: "apply", calendarToggled: "toggle-calendar" }, usesOnChanges: true, ngImport: i0, template: "<form class=\"form-inline\" *ngIf=\"config.showAsDropdown\">\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker\"\r\n                class=\"form-control\"\r\n                ngbDatepicker\r\n                #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"false\"\r\n                (dateSelect)=\"selectWeek($event)\"\r\n                (closed)=\"isFocused(false)\"\r\n                [displayMonths]=\"1\"\r\n                [dayTemplate]=\"t\"\r\n                [startDate]=\"fromDate!\"\r\n                [firstDayOfWeek]=\"config.firstDayOfWeek\"\r\n                [showWeekNumbers]=\"config.showWeekNumbers\"\r\n                tabindex=\"-1\"\r\n                style=\"display: none\"\r\n                [footerTemplate]=\"footerTemplate\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <!--Single week select-->\r\n    <div *ngIf=\"!config.selectMultipleWeeks\">\r\n        <span style=\"position: relative; left: 30px; font-size: 12px\"> &nbsp;{{ weekNumbers }} </span>\r\n        <div class=\"form-group\">\r\n            <div class=\"input-group\">\r\n                <div class=\"single-week\">\r\n                    <div class=\"left\">\r\n                        <span class=\"material-icons next-round-btn\" (click)=\"previousWeek()\"> navigate_next </span>\r\n                    </div>\r\n                    <input\r\n                        #dpFromDate\r\n                        class=\"form-control\"\r\n                        placeholder=\"Select Weeks\"\r\n                        [ngClass]=\"[config.customClass == '' ? '' : config.customClass]\"\r\n                        name=\"dpFromDate\"\r\n                        [value]=\"dateToDisplay\"\r\n                        [readonly]=\"true\"\r\n                        (click)=\"isFocused(true); isDropdownOpenedForCalendar(datepicker)\"\r\n                    />\r\n                    <i class=\"mdi mdi-menu-down\" *ngIf='!datepicker.isOpen()' (click)=\"datepicker.open()\"></i>\r\n                    <i class='mdi mdi-menu-up' *ngIf=\"datepicker.isOpen()\" (click)=\"isDropdownOpenedForCalendar(datepicker)\"></i>\r\n                    <div class=\"right\">\r\n                        <span class=\"material-icons round-btn\" (click)=\"nextWeek()\"> navigate_next </span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!--Multiple week select-->\r\n    <div class=\"form-group\" *ngIf=\"config.selectMultipleWeeks\">\r\n        <div class=\"input-group\">\r\n            <div class=\"multiple-weeks\">\r\n                <input\r\n                    #dpFromDate\r\n                    class=\"form-control\"\r\n                    placeholder=\"Select Weeks\"\r\n                    [ngClass]=\"[config.customClass == '' ? '' : config.customClass]\"\r\n                    name=\"dpFromDate\"\r\n                    [readonly]=\"true\"\r\n                    [value]=\"weekNumbers\"\r\n                    (click)=\"isFocused(true); isDropdownOpenedForCalendar(datepicker)\"\r\n                />\r\n                <i *ngIf=\"!multiSelectDropdownOpen\" class=\"mdi mdi-menu-down multiselect-input-arrow\"></i>\r\n                <i *ngIf=\"multiSelectDropdownOpen\" class=\"mdi mdi-menu-up multiselect-input-arrow\"></i>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ngb-datepicker\r\n    #weekPicker\r\n    *ngIf=\"!config.showAsDropdown\"\r\n    [displayMonths]=\"1\"\r\n    [startDate]=\"fromDate!\"\r\n    [firstDayOfWeek]=\"config.firstDayOfWeek\"\r\n    [showWeekNumbers]=\"config.showWeekNumbers\"\r\n    [dayTemplate]=\"t\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    (dateSelect)=\"selectWeek($event)\"\r\n    [markDisabled]=\"disabledFunc\"\r\n>\r\n</ngb-datepicker>\r\n\r\n<ng-template #footerTemplate>\r\n    <hr class=\"my-0\" />\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n        style=\"background-color: #268bff; color: #ffffff\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n        style=\"background-color: rgba(38, 139, 255, 0.12); color: #268bff\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #t let-date let-focused=\"focused\" let-disabled=\"disabled\">\r\n    <span\r\n        class=\"custom-day\"\r\n        [class.focused]=\"focused\"\r\n        [class.range]=\"isRange(date)\"\r\n        [class.faded]=\"isHovered(date) || isInside(date)\"\r\n        [class.disabled]=\"disabled\"\r\n        (mouseenter)=\"hoveredDate = date\"\r\n        (mouseleave)=\"hoveredDate = null\"\r\n    >\r\n        {{ date.day }}\r\n    </span>\r\n</ng-template>\r\n\r\n<!--\r\n\r\n<hr>\r\n\r\n<pre>From: {{ fromDate | json }} </pre>\r\n<pre>To: {{ toDate | json }} </pre>\r\n<pre>weekNumbers: {{ weekNumbers | json }} </pre>\r\n\r\n-->\r\n", styles: [":host::ng-deep .right{width:unset!important;background-color:#fff!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday{width:3rem!important;font-style:unset!important;color:#8bac2a;outline:none}:host::ng-deep .ngb-dp-day:first-child{border:1px solid black}:host::ng-deep .ngb-dp-day.disabled{color:#d4d4d4;cursor:not-allowed}:host::ng-deep .ngb-dp-showweek:before{content:\"Weeks\";margin-right:5px}:host::ng-deep .ngb-dp-week-number{font-style:unset!important;width:4rem!important;margin-right:5px;font-weight:700;color:#000!important;border-right:1px solid rgba(0,0,0,.125)}:host::ng-deep .ngb-dp-week-number:before{font-style:unset!important;content:\"Week \"}:host::ng-deep .ngb-dp-weekday.ngb-dp-showweek{margin-right:5px;width:4rem!important;border-right:1px solid rgba(0,0,0,.125)}:host::ng-deep .dropdown-menu{box-shadow:none}:host::ng-deep .dropdown-menu.show{top:15px!important}:host::ng-deep .bg-light{background-color:#fff!important}:host::ng-deep .ngb-dp-weekdays{border-top:1px solid rgba(0,0,0,.125)}:host::ng-deep .ngb-dp-arrow-btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:1.75rem;font-weight:700;color:#222b45;width:3rem!important}.custom-day.focused{background-color:#fff}.custom-day.faded{background-color:#0275d880!important}.custom-day.faded:focus{outline:none!important}.custom-day:hover{background-color:#268bff1f!important;color:#4a4a4a!important}.custom-day:focus{outline:none!important}.custom-day.range{background-color:#268bff1f!important;color:#4a4a4a!important}.custom-day.range:focus{outline:none!important}.custom-day.disabled{color:#d3d3d3}.input-group>.single-week,.input-group .multiple-weeks{display:inline-flex!important}.input-group>.single-week>.form-control,.input-group .multiple-weeks>.form-control{width:212px;border-radius:2px;border:solid 1px #b3b3b3;height:1.875rem;cursor:pointer}.input-group>.form-control{width:212px;border-radius:2px;border:solid 1px #b3b3b3;height:1.875rem;cursor:pointer}.form-control[readonly]{background-color:#fff!important}.next-round-btn{transform:rotate(180deg);margin-left:.125rem;line-height:1.3;border-radius:50%;cursor:pointer}.round-btn{line-height:1.3;border-radius:50%;cursor:pointer;margin-left:.25rem}:host::ng-deep select.custom-select{background:none;-webkit-appearance:auto;appearance:auto}.left,.right{width:1.875rem!important;height:1.875rem;background:#d8d8d8!important;border-radius:50%}.left{margin-right:.3125rem}.right{margin-left:.3125rem}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#268bff}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;line-height:1.9;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#268bff;color:#fff;font-weight:600}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}.mdi-menu-up,.mdi-menu-down{position:absolute;right:2.438rem;top:1px;font-size:1.375rem;cursor:pointer}.multiselect-input-arrow{position:absolute;right:.75rem;top:3px;font-size:1.25rem;cursor:pointer;pointer-events:none}button:focus{outline:none;box-shadow:none;border-color:transparent}::ng-deep .ngb-dp-header,::ng-deep .ngb-dp-week{background:white!important}\n"], components: [{ type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekdays", "showWeekNumbers", "startDate"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+AnnaWeekCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaWeekCalendarComponent, selector: "anna-core-week-calendar-filter-lib", inputs: { selectedFromDate: ["from-date", "selectedFromDate"], selectedEndDate: ["to-date", "selectedEndDate"], disabledDates: ["disabled-dates", "disabledDates"], maxDate: "maxDate", minDate: "minDate", config: ["week-calendar-config", "config"] }, outputs: { applyWeekCalendarChanges: "apply", calendarToggled: "toggle-calendar" }, usesOnChanges: true, ngImport: i0, template: "<form class=\"form-inline\" *ngIf=\"config.showAsDropdown\">\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker\"\r\n                class=\"form-control\"\r\n                ngbDatepicker\r\n                #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"false\"\r\n                (dateSelect)=\"selectWeek($event)\"\r\n                (closed)=\"isFocused(false)\"\r\n                [displayMonths]=\"1\"\r\n                [dayTemplate]=\"t\"\r\n                [startDate]=\"fromDate!\"\r\n                [firstDayOfWeek]=\"config.firstDayOfWeek\"\r\n                [showWeekNumbers]=\"config.showWeekNumbers\"\r\n                tabindex=\"-1\"\r\n                style=\"display: none\"\r\n                [footerTemplate]=\"footerTemplate\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <!--Single week select-->\r\n    <div *ngIf=\"!config.selectMultipleWeeks\">\r\n        <span style=\"position: relative; left: 30px; font-size: 12px\"> &nbsp;{{ weekNumbers }} </span>\r\n        <div class=\"form-group\">\r\n            <div class=\"input-group\">\r\n                <div class=\"single-week\">\r\n                    <div class=\"left\">\r\n                        <span class=\"material-icons next-round-btn\" (click)=\"previousWeek()\"> navigate_next </span>\r\n                    </div>\r\n                    <input\r\n                        #dpFromDate\r\n                        class=\"form-control\"\r\n                        placeholder=\"Select Weeks\"\r\n                        [ngClass]=\"[config.customClass == '' ? '' : config.customClass]\"\r\n                        name=\"dpFromDate\"\r\n                        [value]=\"dateToDisplay\"\r\n                        [readonly]=\"true\"\r\n                        (click)=\"isFocused(true); isDropdownOpenedForCalendar(datepicker)\"\r\n                    />\r\n                    <i class=\"mdi mdi-menu-down\" *ngIf='!datepicker.isOpen()' (click)=\"datepicker.open()\"></i>\r\n                    <i class='mdi mdi-menu-up' *ngIf=\"datepicker.isOpen()\" (click)=\"isDropdownOpenedForCalendar(datepicker)\"></i>\r\n                    <div class=\"right\">\r\n                        <span class=\"material-icons round-btn\" (click)=\"nextWeek()\"> navigate_next </span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!--Multiple week select-->\r\n    <div class=\"form-group\" *ngIf=\"config.selectMultipleWeeks\">\r\n        <div class=\"input-group\">\r\n            <div class=\"multiple-weeks\">\r\n                <input\r\n                    #dpFromDate\r\n                    class=\"form-control\"\r\n                    placeholder=\"Select Weeks\"\r\n                    [ngClass]=\"[config.customClass == '' ? '' : config.customClass]\"\r\n                    name=\"dpFromDate\"\r\n                    [readonly]=\"true\"\r\n                    [value]=\"weekNumbers\"\r\n                    (click)=\"isFocused(true); isDropdownOpenedForCalendar(datepicker)\"\r\n                />\r\n                <i *ngIf=\"!multiSelectDropdownOpen\" class=\"mdi mdi-menu-down multiselect-input-arrow\"></i>\r\n                <i *ngIf=\"multiSelectDropdownOpen\" class=\"mdi mdi-menu-up multiselect-input-arrow\"></i>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ngb-datepicker\r\n    #weekPicker\r\n    *ngIf=\"!config.showAsDropdown\"\r\n    [displayMonths]=\"1\"\r\n    [startDate]=\"fromDate!\"\r\n    [firstDayOfWeek]=\"config.firstDayOfWeek\"\r\n    [showWeekNumbers]=\"config.showWeekNumbers\"\r\n    [dayTemplate]=\"t\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    (dateSelect)=\"selectWeek($event)\"\r\n    [markDisabled]=\"disabledFunc\"\r\n>\r\n</ngb-datepicker>\r\n\r\n<ng-template #footerTemplate>\r\n    <hr class=\"my-0\" />\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n        style=\"background-color: #268bff; color: #ffffff\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n        style=\"background-color: rgba(38, 139, 255, 0.12); color: #268bff\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #t let-date let-focused=\"focused\" let-disabled=\"disabled\">\r\n    <span\r\n        class=\"custom-day\"\r\n        [class.focused]=\"focused\"\r\n        [class.range]=\"isRange(date)\"\r\n        [class.faded]=\"isHovered(date) || isInside(date)\"\r\n        [class.disabled]=\"disabled\"\r\n        (mouseenter)=\"hoveredDate = date\"\r\n        (mouseleave)=\"hoveredDate = null\"\r\n    >\r\n        {{ date.day }}\r\n    </span>\r\n</ng-template>\r\n\r\n<!--\r\n\r\n<hr>\r\n\r\n<pre>From: {{ fromDate | json }} </pre>\r\n<pre>To: {{ toDate | json }} </pre>\r\n<pre>weekNumbers: {{ weekNumbers | json }} </pre>\r\n\r\n-->\r\n", styles: [":host::ng-deep .right{width:unset!important;background-color:#fff!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday{width:3rem!important;font-style:unset!important;color:#8bac2a;outline:none}:host::ng-deep .ngb-dp-day:first-child{border:1px solid black}:host::ng-deep .ngb-dp-day.disabled{color:#d4d4d4;cursor:not-allowed}:host::ng-deep .ngb-dp-showweek:before{content:\"Weeks\";margin-right:5px}:host::ng-deep .ngb-dp-week-number{font-style:unset!important;width:4rem!important;margin-right:5px;font-weight:700;color:#000!important;border-right:1px solid rgba(0,0,0,.125)}:host::ng-deep .ngb-dp-week-number:before{font-style:unset!important;content:\"Week \"}:host::ng-deep .ngb-dp-weekday.ngb-dp-showweek{margin-right:5px;width:4rem!important;border-right:1px solid rgba(0,0,0,.125)}:host::ng-deep .dropdown-menu{box-shadow:none}:host::ng-deep .dropdown-menu.show{top:15px!important}:host::ng-deep .bg-light{background-color:#fff!important}:host::ng-deep .ngb-dp-weekdays{border-top:1px solid rgba(0,0,0,.125)}:host::ng-deep .ngb-dp-arrow-btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:1.75rem;font-weight:700;color:#222b45;width:3rem!important}.custom-day.focused{background-color:#fff}.custom-day.faded{background-color:#0275d880!important}.custom-day.faded:focus{outline:none!important}.custom-day:hover{background-color:#268bff1f!important;color:#4a4a4a!important}.custom-day:focus{outline:none!important}.custom-day.range{background-color:#268bff1f!important;color:#4a4a4a!important}.custom-day.range:focus{outline:none!important}.custom-day.disabled{color:#d3d3d3}.input-group>.single-week,.input-group .multiple-weeks{display:inline-flex!important}.input-group>.single-week>.form-control,.input-group .multiple-weeks>.form-control{width:212px;border-radius:2px;border:solid 1px #b3b3b3;height:1.875rem;cursor:pointer}.input-group>.form-control{width:212px;border-radius:2px;border:solid 1px #b3b3b3;height:1.875rem;cursor:pointer}.form-control[readonly]{background-color:#fff!important}.next-round-btn{transform:rotate(180deg);margin-left:.125rem;line-height:1.3;border-radius:50%;cursor:pointer}.round-btn{line-height:1.3;border-radius:50%;cursor:pointer;margin-left:.25rem}:host::ng-deep select.custom-select{background:none;-webkit-appearance:auto;appearance:auto}.left,.right{width:1.875rem!important;height:1.875rem;background:#d8d8d8!important;border-radius:50%}.left{margin-right:.3125rem}.right{margin-left:.3125rem}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#268bff}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;line-height:1.9;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#268bff;color:#fff;font-weight:600}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}.mdi-menu-up,.mdi-menu-down{position:absolute;right:2.438rem;top:1px;font-size:1.375rem;cursor:pointer}.multiselect-input-arrow{position:absolute;right:.75rem;top:3px;font-size:1.25rem;cursor:pointer;pointer-events:none}button:focus{outline:none;box-shadow:none;border-color:transparent}::ng-deep .ngb-dp-header,::ng-deep .ngb-dp-week{background:white!important}\n"], components: [{ type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekdays", "showWeekNumbers", "startDate"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaWeekCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: "anna-core-week-calendar-filter-lib", template: "<form class=\"form-inline\" *ngIf=\"config.showAsDropdown\">\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker\"\r\n                class=\"form-control\"\r\n                ngbDatepicker\r\n                #datepicker=\"ngbDatepicker\"\r\n                [autoClose]=\"false\"\r\n                (dateSelect)=\"selectWeek($event)\"\r\n                (closed)=\"isFocused(false)\"\r\n                [displayMonths]=\"1\"\r\n                [dayTemplate]=\"t\"\r\n                [startDate]=\"fromDate!\"\r\n                [firstDayOfWeek]=\"config.firstDayOfWeek\"\r\n                [showWeekNumbers]=\"config.showWeekNumbers\"\r\n                tabindex=\"-1\"\r\n                style=\"display: none\"\r\n                [footerTemplate]=\"footerTemplate\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <!--Single week select-->\r\n    <div *ngIf=\"!config.selectMultipleWeeks\">\r\n        <span style=\"position: relative; left: 30px; font-size: 12px\"> &nbsp;{{ weekNumbers }} </span>\r\n        <div class=\"form-group\">\r\n            <div class=\"input-group\">\r\n                <div class=\"single-week\">\r\n                    <div class=\"left\">\r\n                        <span class=\"material-icons next-round-btn\" (click)=\"previousWeek()\"> navigate_next </span>\r\n                    </div>\r\n                    <input\r\n                        #dpFromDate\r\n                        class=\"form-control\"\r\n                        placeholder=\"Select Weeks\"\r\n                        [ngClass]=\"[config.customClass == '' ? '' : config.customClass]\"\r\n                        name=\"dpFromDate\"\r\n                        [value]=\"dateToDisplay\"\r\n                        [readonly]=\"true\"\r\n                        (click)=\"isFocused(true); isDropdownOpenedForCalendar(datepicker)\"\r\n                    />\r\n                    <i class=\"mdi mdi-menu-down\" *ngIf='!datepicker.isOpen()' (click)=\"datepicker.open()\"></i>\r\n                    <i class='mdi mdi-menu-up' *ngIf=\"datepicker.isOpen()\" (click)=\"isDropdownOpenedForCalendar(datepicker)\"></i>\r\n                    <div class=\"right\">\r\n                        <span class=\"material-icons round-btn\" (click)=\"nextWeek()\"> navigate_next </span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!--Multiple week select-->\r\n    <div class=\"form-group\" *ngIf=\"config.selectMultipleWeeks\">\r\n        <div class=\"input-group\">\r\n            <div class=\"multiple-weeks\">\r\n                <input\r\n                    #dpFromDate\r\n                    class=\"form-control\"\r\n                    placeholder=\"Select Weeks\"\r\n                    [ngClass]=\"[config.customClass == '' ? '' : config.customClass]\"\r\n                    name=\"dpFromDate\"\r\n                    [readonly]=\"true\"\r\n                    [value]=\"weekNumbers\"\r\n                    (click)=\"isFocused(true); isDropdownOpenedForCalendar(datepicker)\"\r\n                />\r\n                <i *ngIf=\"!multiSelectDropdownOpen\" class=\"mdi mdi-menu-down multiselect-input-arrow\"></i>\r\n                <i *ngIf=\"multiSelectDropdownOpen\" class=\"mdi mdi-menu-up multiselect-input-arrow\"></i>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ngb-datepicker\r\n    #weekPicker\r\n    *ngIf=\"!config.showAsDropdown\"\r\n    [displayMonths]=\"1\"\r\n    [startDate]=\"fromDate!\"\r\n    [firstDayOfWeek]=\"config.firstDayOfWeek\"\r\n    [showWeekNumbers]=\"config.showWeekNumbers\"\r\n    [dayTemplate]=\"t\"\r\n    [maxDate]=\"maxDate\"\r\n    [minDate]=\"minDate\"\r\n    (dateSelect)=\"selectWeek($event)\"\r\n    [markDisabled]=\"disabledFunc\"\r\n>\r\n</ngb-datepicker>\r\n\r\n<ng-template #footerTemplate>\r\n    <hr class=\"my-0\" />\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n        style=\"background-color: #268bff; color: #ffffff\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n        style=\"background-color: rgba(38, 139, 255, 0.12); color: #268bff\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #t let-date let-focused=\"focused\" let-disabled=\"disabled\">\r\n    <span\r\n        class=\"custom-day\"\r\n        [class.focused]=\"focused\"\r\n        [class.range]=\"isRange(date)\"\r\n        [class.faded]=\"isHovered(date) || isInside(date)\"\r\n        [class.disabled]=\"disabled\"\r\n        (mouseenter)=\"hoveredDate = date\"\r\n        (mouseleave)=\"hoveredDate = null\"\r\n    >\r\n        {{ date.day }}\r\n    </span>\r\n</ng-template>\r\n\r\n<!--\r\n\r\n<hr>\r\n\r\n<pre>From: {{ fromDate | json }} </pre>\r\n<pre>To: {{ toDate | json }} </pre>\r\n<pre>weekNumbers: {{ weekNumbers | json }} </pre>\r\n\r\n-->\r\n", styles: [":host::ng-deep .right{width:unset!important;background-color:#fff!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday{width:3rem!important;font-style:unset!important;color:#8bac2a;outline:none}:host::ng-deep .ngb-dp-day:first-child{border:1px solid black}:host::ng-deep .ngb-dp-day.disabled{color:#d4d4d4;cursor:not-allowed}:host::ng-deep .ngb-dp-showweek:before{content:\"Weeks\";margin-right:5px}:host::ng-deep .ngb-dp-week-number{font-style:unset!important;width:4rem!important;margin-right:5px;font-weight:700;color:#000!important;border-right:1px solid rgba(0,0,0,.125)}:host::ng-deep .ngb-dp-week-number:before{font-style:unset!important;content:\"Week \"}:host::ng-deep .ngb-dp-weekday.ngb-dp-showweek{margin-right:5px;width:4rem!important;border-right:1px solid rgba(0,0,0,.125)}:host::ng-deep .dropdown-menu{box-shadow:none}:host::ng-deep .dropdown-menu.show{top:15px!important}:host::ng-deep .bg-light{background-color:#fff!important}:host::ng-deep .ngb-dp-weekdays{border-top:1px solid rgba(0,0,0,.125)}:host::ng-deep .ngb-dp-arrow-btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:1.75rem;font-weight:700;color:#222b45;width:3rem!important}.custom-day.focused{background-color:#fff}.custom-day.faded{background-color:#0275d880!important}.custom-day.faded:focus{outline:none!important}.custom-day:hover{background-color:#268bff1f!important;color:#4a4a4a!important}.custom-day:focus{outline:none!important}.custom-day.range{background-color:#268bff1f!important;color:#4a4a4a!important}.custom-day.range:focus{outline:none!important}.custom-day.disabled{color:#d3d3d3}.input-group>.single-week,.input-group .multiple-weeks{display:inline-flex!important}.input-group>.single-week>.form-control,.input-group .multiple-weeks>.form-control{width:212px;border-radius:2px;border:solid 1px #b3b3b3;height:1.875rem;cursor:pointer}.input-group>.form-control{width:212px;border-radius:2px;border:solid 1px #b3b3b3;height:1.875rem;cursor:pointer}.form-control[readonly]{background-color:#fff!important}.next-round-btn{transform:rotate(180deg);margin-left:.125rem;line-height:1.3;border-radius:50%;cursor:pointer}.round-btn{line-height:1.3;border-radius:50%;cursor:pointer;margin-left:.25rem}:host::ng-deep select.custom-select{background:none;-webkit-appearance:auto;appearance:auto}.left,.right{width:1.875rem!important;height:1.875rem;background:#d8d8d8!important;border-radius:50%}.left{margin-right:.3125rem}.right{margin-left:.3125rem}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#268bff}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;line-height:1.9;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#268bff;color:#fff;font-weight:600}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}.mdi-menu-up,.mdi-menu-down{position:absolute;right:2.438rem;top:1px;font-size:1.375rem;cursor:pointer}.multiselect-input-arrow{position:absolute;right:.75rem;top:3px;font-size:1.25rem;cursor:pointer;pointer-events:none}button:focus{outline:none;box-shadow:none;border-color:transparent}::ng-deep .ngb-dp-header,::ng-deep .ngb-dp-week{background:white!important}\n"] }]
@@ -586,7 +586,7 @@ class AnnaSortComponent {
     }
 }
 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: { data: "data", sortBy: "sortBy", disableSort: "disableSort", placement: "placement" }, outputs: { sortedData: "sort" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"sort\">\r\n    <i\r\n        class=\"mdi mdi-sort\"\r\n        [ngClass]=\"{\r\n            active: this.annaSortService.sortByDesc.get(this.sortBy) || this.annaSortService.sortByAsc.get(this.sortBy),\r\n            disable: disableSort\r\n        }\"\r\n        [ngbTooltip]=\"sortTooltip\"\r\n        placement=\"{{ placement != undefined ? 'auto' : 'bottom' }}\"\r\n        container=\"body\"\r\n        [autoClose]=\"true\"\r\n        triggers=\"manual\"\r\n        #sort=\"ngbTooltip\"\r\n        (click)=\"bindTheValueToToolTip(sort)\"\r\n    ></i>\r\n</p>\r\n\r\n<ng-template #sortTooltip>\r\n    <section class=\"sort-container\">\r\n        <div>\r\n            <input\r\n                type=\"radio\"\r\n                id=\"ascending\"\r\n                [ngModel]=\"selectedRadio\"\r\n                name=\"sortToolTip\"\r\n                value=\"ascending\"\r\n                (click)=\"sortByAscending()\"\r\n            />\r\n            <label for=\"ascending\">Ascending</label>\r\n        </div>\r\n        <div>\r\n            <input\r\n                type=\"radio\"\r\n                id=\"descending\"\r\n                [ngModel]=\"selectedRadio\"\r\n                name=\"sortToolTip\"\r\n                value=\"descending\"\r\n                (click)=\"sortByDescending()\"\r\n            />\r\n            <label for=\"descending\">Descending</label>\r\n        </div>\r\n        <div>\r\n            <input type=\"radio\" id=\"none\" [ngModel]=\"selectedRadio\" name=\"sortToolTip\" value=\"none\" (click)=\"removeSorting()\" />\r\n            <label for=\"none\">None</label>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n", styles: [".sort{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}\n"], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i14.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+AnnaSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: { data: "data", sortBy: "sortBy", disableSort: "disableSort", placement: "placement" }, outputs: { sortedData: "sort" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"sort\">\r\n    <i\r\n        class=\"mdi mdi-sort\"\r\n        [ngClass]=\"{\r\n            active: this.annaSortService.sortByDesc.get(this.sortBy) || this.annaSortService.sortByAsc.get(this.sortBy),\r\n            disable: disableSort\r\n        }\"\r\n        [ngbTooltip]=\"sortTooltip\"\r\n        placement=\"{{ placement != undefined ? 'auto' : 'bottom' }}\"\r\n        container=\"body\"\r\n        [autoClose]=\"true\"\r\n        triggers=\"manual\"\r\n        #sort=\"ngbTooltip\"\r\n        (click)=\"bindTheValueToToolTip(sort)\"\r\n    ></i>\r\n</p>\r\n\r\n<ng-template #sortTooltip>\r\n    <section class=\"sort-container\">\r\n        <div>\r\n            <input\r\n                type=\"radio\"\r\n                id=\"ascending\"\r\n                [ngModel]=\"selectedRadio\"\r\n                name=\"sortToolTip\"\r\n                value=\"ascending\"\r\n                (click)=\"sortByAscending()\"\r\n            />\r\n            <label for=\"ascending\">Ascending</label>\r\n        </div>\r\n        <div>\r\n            <input\r\n                type=\"radio\"\r\n                id=\"descending\"\r\n                [ngModel]=\"selectedRadio\"\r\n                name=\"sortToolTip\"\r\n                value=\"descending\"\r\n                (click)=\"sortByDescending()\"\r\n            />\r\n            <label for=\"descending\">Descending</label>\r\n        </div>\r\n        <div>\r\n            <input type=\"radio\" id=\"none\" [ngModel]=\"selectedRadio\" name=\"sortToolTip\" value=\"none\" (click)=\"removeSorting()\" />\r\n            <label for=\"none\">None</label>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n", styles: [".sort{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}\n"], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i11.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 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\">\r\n    <i\r\n        class=\"mdi mdi-sort\"\r\n        [ngClass]=\"{\r\n            active: this.annaSortService.sortByDesc.get(this.sortBy) || this.annaSortService.sortByAsc.get(this.sortBy),\r\n            disable: disableSort\r\n        }\"\r\n        [ngbTooltip]=\"sortTooltip\"\r\n        placement=\"{{ placement != undefined ? 'auto' : 'bottom' }}\"\r\n        container=\"body\"\r\n        [autoClose]=\"true\"\r\n        triggers=\"manual\"\r\n        #sort=\"ngbTooltip\"\r\n        (click)=\"bindTheValueToToolTip(sort)\"\r\n    ></i>\r\n</p>\r\n\r\n<ng-template #sortTooltip>\r\n    <section class=\"sort-container\">\r\n        <div>\r\n            <input\r\n                type=\"radio\"\r\n                id=\"ascending\"\r\n                [ngModel]=\"selectedRadio\"\r\n                name=\"sortToolTip\"\r\n                value=\"ascending\"\r\n                (click)=\"sortByAscending()\"\r\n            />\r\n            <label for=\"ascending\">Ascending</label>\r\n        </div>\r\n        <div>\r\n            <input\r\n                type=\"radio\"\r\n                id=\"descending\"\r\n                [ngModel]=\"selectedRadio\"\r\n                name=\"sortToolTip\"\r\n                value=\"descending\"\r\n                (click)=\"sortByDescending()\"\r\n            />\r\n            <label for=\"descending\">Descending</label>\r\n        </div>\r\n        <div>\r\n            <input type=\"radio\" id=\"none\" [ngModel]=\"selectedRadio\" name=\"sortToolTip\" value=\"none\" (click)=\"removeSorting()\" />\r\n            <label for=\"none\">None</label>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n", styles: [".sort{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}\n"] }]
@@ -604,1669 +604,1677 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ["sort"]
             }] } });
 
-/** Checks if the given ranges are equal. */
-function rangesEqual(r1, r2) {
-    return r1.start == r2.start && r1.end == r2.end;
-}
-/**
- * Scheduler to be used for scroll events. Needs to fall back to
- * something that doesn't rely on requestAnimationFrame on environments
- * that don't support it (e.g. server-side rendering).
- */
-const SCROLL_SCHEDULER = typeof requestAnimationFrame !== "undefined"
-    ? animationFrameScheduler
-    : asapScheduler;
-/**
- * A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`.
- * Uses `top: #px` instead of `transform: translateY(#px)` like the cdk virtual scroll viewport does
- * which avoids flickering of elements in the transformed container with `position: sticky`.
- */
-class AnnaTableVirtualScrollViewportComponent extends CdkScrollable {
-    constructor(elementRef, _changeDetectorRef, ngZone, _scrollStrategy, dir, scrollDispatcher, viewportRuler, annaGtService) {
-        super(elementRef, scrollDispatcher, ngZone, dir);
-        this.elementRef = elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._scrollStrategy = _scrollStrategy;
-        this.annaGtService = annaGtService;
-        /** Emits when the viewport is detached from a CdkVirtualForOf. */
-        this._detachedSubject = new Subject();
-        /** Emits when the rendered range changes. */
-        this._renderedRangeSubject = new Subject();
-        this._orientation = "vertical";
-        // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll
-        // strategy lazily (i.e. only if the user is actually listening to the events). We do this because
-        // depending on how the strategy calculates the scrolled index, it may come at a cost to
-        // performance.
-        /** Emits when the index of the first element visible in the viewport changes. */
-        this.scrolledIndexChange = new Observable((observer) => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
-        /** A stream that emits whenever the rendered range changes. */
-        this.renderedRangeStream = this._renderedRangeSubject;
-        /**
-         * The total size of all content (in pixels), including content that is not currently rendered.
-         */
-        this._totalContentSize = 0;
-        /** A string representing the `style.width` property value to be used for the spacer element. */
-        this._totalContentWidth = "";
-        /** A string representing the `style.height` property value to be used for the spacer element. */
-        this._totalContentHeight = "";
-        /** The currently rendered range of indices. */
-        this._renderedRange = { start: 0, end: 0 };
-        /** The length of the data bound to this viewport (in number of items). */
-        this._dataLength = 0;
-        /** The size of the viewport (in pixels). */
-        this._viewportSize = 0;
-        /** The last rendered content offset that was set. */
-        this._renderedContentOffset = 0;
-        /**
-         * Whether the last rendered content offset was to the end of the content (and therefore needs to
-         * be rewritten as an offset to the start of the content).
-         */
-        this._renderedContentOffsetNeedsRewrite = false;
-        /** Whether there is a pending change detection cycle. */
-        this._isChangeDetectionPending = false;
-        /** A list of functions to run after the next change detection cycle. */
-        this._runAfterChangeDetection = [];
-        /** Subscription to changes in the viewport size. */
-        this._viewportChanges = Subscription.EMPTY;
-        if (!_scrollStrategy) {
-            throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
-        }
-        this._viewportChanges = viewportRuler.change().subscribe(() => {
-            this.checkViewportSize();
-        });
-    }
-    /** The direction the viewport scrolls. */
-    get orientation() {
-        return this._orientation;
-    }
-    set orientation(orientation) {
-        if (this._orientation !== orientation) {
-            this._orientation = orientation;
-            this._calculateSpacerSize();
-        }
+// Angular import statements
+class AnnaNonEditableGenericTableComponent {
+    constructor(cdRef, annaSortService, annaDateTimeFormatService, annaFilterService, annaGenericTableService) {
+        this.cdRef = cdRef;
+        this.annaSortService = annaSortService;
+        this.annaDateTimeFormatService = annaDateTimeFormatService;
+        this.annaFilterService = annaFilterService;
+        this.annaGenericTableService = annaGenericTableService;
+        this.maximumRowsWhichCanBeRenderedWithoutScroll = 5;
+        this.toggleCheckbox = new EventEmitter();
+        this.toggleRowCheckbox = new EventEmitter();
+        this.toggleHeaderCheckbox = new EventEmitter();
+        this.undoIconClicked = new EventEmitter();
+        this.filterAppliedToTable = new EventEmitter();
+        this.sortingAppliedToTable = new EventEmitter();
+        this.rowClicked = new EventEmitter();
+        this.radioButtonSelected = new EventEmitter();
+        this.columnFilterOpened = new EventEmitter();
+        this.columnFilterClosed = new EventEmitter();
+        this.gtIconClicked = new EventEmitter();
+        this.gtSVGIconClicked = new EventEmitter();
+        this.gtTextActionClicked = new EventEmitter();
+        this.gtViewDetailClicked = new EventEmitter();
+        this.noDataWidth = "55%";
+        this.disableClearAllBtn = true;
+        this.disableColumnClearAllBtn = true;
+        this.allSelected = 0;
+        this.options = {
+            floor: 0,
+            ceil: 0,
+            step: 0.1
+        };
+        this.tableColumns = [];
+        this.totalRowColumns = null;
+        this.isScrolledLeft = false;
+        this.rowBorderWidth = 2;
+        this.PfpIconActiveColor = "#9B1B93";
+        this.PfpIconDisableColor = "rgba(189,189,189,0.5)";
+        this.setTooltipRadioNames();
     }
     ngOnInit() {
-        super.ngOnInit();
-        // It's still too early to measure the viewport at this point. Deferring with a promise allows
-        // the Viewport to be rendered with the correct size before we measure. We run this outside the
-        // zone to avoid causing more change detection cycles. We handle the change detection loop
-        // ourselves instead.
-        this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
-            this._measureViewportSize();
-            this._scrollStrategy.attach(this);
-            this.elementScrolled()
-                .pipe(
-            // Start off with a fake scroll event so we properly detect our initial position.
-            startWith(null), 
-            // Collect multiple events into one until the next animation frame. This way if
-            // there are multiple scroll events in the same frame we only need to recheck
-            // our layout once.
-            auditTime(0, SCROLL_SCHEDULER))
-                .subscribe(() => { this._scrollStrategy.onContentScrolled(); this.annaGtService.virtualScrollSubject.next(true); });
-            this._markChangeDetectionNeeded();
-        }));
-    }
-    ngOnDestroy() {
-        this.detach();
-        this._scrollStrategy.detach();
-        // Complete all subjects
-        this._renderedRangeSubject.complete();
-        this._detachedSubject.complete();
-        this._viewportChanges.unsubscribe();
-        super.ngOnDestroy();
+        // this.tableData = this.numberOfSkeletonColumns;
     }
-    /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */
-    attach(forOf) {
-        if (this._forOf) {
-            throw Error("CdkVirtualScrollViewport is already attached.");
+    ngOnChanges(changes) {
+        // console.log("generic");
+        // console.log(this.tableHeaders);
+        // console.log(JSON.stringify(this.tableData));
+        if (this.showSkeletonLoading) {
+            this.tableData = this.numberOfSkeletonColumns;
         }
-        // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
-        // changes. Run outside the zone to avoid triggering change detection, since we're managing the
-        // change detection loop ourselves.
-        this.ngZone.runOutsideAngular(() => {
-            this._forOf = forOf;
-            this._forOf.dataStream
-                .pipe(takeUntil(this._detachedSubject))
-                .subscribe(data => {
-                const newLength = data.length;
-                if (newLength !== this._dataLength) {
-                    this._dataLength = newLength;
-                    this._scrollStrategy.onDataLengthChanged();
-                }
-                this._doChangeDetection();
-            });
-        });
-    }
-    /** Detaches the current `CdkVirtualForOf`. */
-    detach() {
-        this._forOf = null;
-        this._detachedSubject.next();
-    }
-    /** Gets the length of the data bound to this viewport (in number of items). */
-    getDataLength() {
-        return this._dataLength;
-    }
-    /** Gets the size of the viewport (in pixels). */
-    getViewportSize() {
-        return this._viewportSize;
-    }
-    // TODO(mmalerba): This is technically out of sync with what's really rendered until a render
-    // cycle happens. I'm being careful to only call it after the render cycle is complete and before
-    // setting it to something else, but its error prone and should probably be split into
-    // `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
-    /** Get the current rendered range of items. */
-    getRenderedRange() {
-        return this._renderedRange;
-    }
-    /**
-     * Sets the total size of all content (in pixels), including content that is not currently
-     * rendered.
-     */
-    setTotalContentSize(size) {
-        if (this._totalContentSize !== size) {
-            this._totalContentSize = size;
-            this._calculateSpacerSize();
-            this._markChangeDetectionNeeded();
+        else {
+            this.setInitialValueMapData();
+            this.disableEnableEachColumnFilters();
+            this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
+            this.showSkeletonLoading = false;
         }
-    }
-    /** Sets the currently rendered range of indices. */
-    setRenderedRange(range) {
-        if (!rangesEqual(this._renderedRange, range)) {
-            this._renderedRangeSubject.next((this._renderedRange = range));
-            this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());
+        //setting table column here as well because while showing skeleton loader, we should show table headers.
+        if (changes['tableHeaders'] && changes['tableHeaders'].currentValue) {
+            this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
         }
-    }
-    /**
-     * Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
-     */
-    getOffsetToRenderedContentStart() {
-        return this._renderedContentOffsetNeedsRewrite
-            ? null
-            : this._renderedContentOffset;
-    }
-    /**
-     * Sets the offset from the start of the viewport to either the start or end of the rendered data
-     * (in pixels).
-     */
-    setRenderedContentOffset(offset) {
-        let top = `${Number(offset)}px`;
-        this._renderedContentOffset = offset;
-        if (this._renderedContentTransform != top) {
-            // We know this value is safe because we parse `offset` with `Number()` before passing it
-            // into the string.
-            this._renderedContentTransform = top;
-            this._markChangeDetectionNeeded(() => {
-                if (this._renderedContentOffsetNeedsRewrite) {
-                    this._renderedContentOffset -= this.measureRenderedContentSize();
-                    this._renderedContentOffsetNeedsRewrite = false;
-                    this.setRenderedContentOffset(this._renderedContentOffset);
-                }
-                else {
-                    this._scrollStrategy.onRenderedOffsetChanged();
-                }
-            });
+        if (changes['totalRowInfo'] && changes['totalRowInfo'].currentValue) {
+            this.totalRowColumns = this.totalRowInfo.map(x => x.colName);
         }
+        this.cdRef.detectChanges();
     }
-    /**
-     * Scrolls to the given offset from the start of the viewport. Please note that this is not always
-     * the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
-     * direction, this would be the equivalent of setting a fictional `scrollRight` property.
-     * @param offset The offset to scroll to.
-     * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
-     */
-    scrollToOffset(offset, behavior = "auto") {
-        const options = { behavior, top: offset };
-        this.scrollTo(options);
+    trackByFn(index) {
+        return index;
     }
-    /**
-     * Scrolls to the offset for the given index.
-     * @param index The index of the element to scroll to.
-     * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
-     */
-    scrollToIndex(index, behavior = "auto") {
-        this._scrollStrategy.scrollToIndex(index, behavior);
+    setTooltipRadioNames() {
+        this.tooltipRadioTextMap = new Map();
+        this.tooltipRadioTextMap.set("StartTimeForFilter", "Start Time");
+        this.tooltipRadioTextMap.set("EndTimeForFilter", "End Time");
+        this.tooltipRadioTextMap.set("start_time_for_filter", "Start Time");
+        this.tooltipRadioTextMap.set("end_time_for_filter", "End Time");
+        this.tooltipRadioTextMap.set("primaryAEName", "Primary AE");
+        this.tooltipRadioTextMap.set("region", "Region");
+        this.tooltipRadioTextMap.set("agencyName", "Agency");
+        this.tooltipRadioTextMap.set("location", "Location");
+        this.tooltipRadioTextMap.set("advertiserName", "Advertiser");
+        this.tooltipRadioTextMap.set("productCode", "Product Code");
+        this.tooltipRadioTextMap.set("flightStartDate", "Start Date");
+        this.tooltipRadioTextMap.set("flightEndDate", "End Date");
+        this.tooltipRadioTextMap.set("orderIdAndRevNumber", "STN Order#-Rev#");
+        this.tooltipRadioTextMap.set("alternateOrderId", "Buyer Order#");
+        this.tooltipRadioTextMap.set("grp", "GRP");
+        this.tooltipRadioTextMap.set("cpp", "CPP");
+        this.tooltipRadioTextMap.set("imps", "IMPS");
+        this.tooltipRadioTextMap.set("cpm", "CPM");
+        this.tooltipRadioTextMap.set("offeredMGs", "Offered MG");
+        this.tooltipRadioTextMap.set("outstandingPE", "O/S PE");
+        this.tooltipRadioTextMap.set("offeredADUs", "Offered ADUs");
+        this.tooltipRadioTextMap.set("udDeficitValue", "Pending Audience Delta");
+        this.tooltipRadioTextMap.set("startEndTimeMulti", "Time");
+        this.tooltipRadioTextMap.set("bookedValue", "Booked");
+        this.tooltipRadioTextMap.set("bookedSpots", "Spots");
+        this.tooltipRadioTextMap.set("userChanges", "Other changes");
+        this.tooltipRadioTextMap.set("inventoryCode", "Inventory Code");
+        this.tooltipRadioTextMap.set("program", "Program");
+        this.tooltipRadioTextMap.set("agency", "Agency");
+        this.tooltipRadioTextMap.set("advertiser", "Advertiser");
+        this.tooltipRadioTextMap.set("startDate", "Start Date");
+        this.tooltipRadioTextMap.set("endDate", "End Date");
+        this.tooltipRadioTextMap.set("rcvPreempt", "Madegood PE");
+        this.tooltipRadioTextMap.set("osPreempt", "O/S PE");
+        this.tooltipRadioTextMap.set("rcvUnderDly", "Recovered UD");
+        this.tooltipRadioTextMap.set("osUnderDly", "O/s Under Dly");
+        this.tooltipRadioTextMap.set("primaryAe", "Primary AE");
+        this.tooltipRadioTextMap.set("region", "Region");
+        this.tooltipRadioTextMap.set("revCode1", "Rev code 1");
+        this.tooltipRadioTextMap.set("orderNoRevNo", "STN Order#-Rev#");
+        this.tooltipRadioTextMap.set("revCode2", "Rev code 2");
+        this.tooltipRadioTextMap.set("revCode3", "Rev code 3");
+        this.tooltipRadioTextMap.set("booked", "Booked");
+        this.tooltipRadioTextMap.set("spots", "Spots");
+        this.tooltipRadioTextMap.set("postedAudPercent", "Posted %");
+        this.tooltipRadioTextMap.set("revision", "Revision");
+        this.tooltipRadioTextMap.set("productCode", "Product Code");
+        this.tooltipRadioTextMap.set("buyerOrderId", "ALT Order#");
+        this.tooltipRadioTextMap.set("demo", "Demo");
+        this.tooltipRadioTextMap.set("postedAdu", "Posted ADUs");
+        this.tooltipRadioTextMap.set("scheduledAdu", "Scheduled ADUs");
+        this.tooltipRadioTextMap.set("audienceDeficit", "Audience Deficit");
+        this.tooltipRadioTextMap.set("postedAudPercent", "Posted Audience %");
     }
-    /**
-     * Gets the current scroll offset from the start of the viewport (in pixels).
-     * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
-     *     in horizontal mode.
-     */
-    //  CHANGES@ANNALIB added override to functions
-    measureScrollOffset(from) {
-        return from
-            ? super.measureScrollOffset(from)
-            : super.measureScrollOffset("top");
+    generateTableDataWrapper() {
+        this.showSkeletonLoading = true;
+        this.tableDataWrapper = [];
+        let rowObject;
+        let columnName;
+        let columnObject;
+        let columnObjectKey;
+        let keysUsedForTableDisplay;
+        let keysUsedForColumn;
+        let additionalInfoObject;
+        let additionalKeys;
+        this.tableData.forEach((obj) => {
+            rowObject = {};
+            keysUsedForTableDisplay = [];
+            for (var colNum in this.tableHeaders) {
+                columnObject = {};
+                if (!this.tableHeaders[colNum].visible) {
+                    continue;
+                }
+                columnName = "";
+                keysUsedForColumn = [];
+                this.tableHeaders[colNum].headerInfo.forEach((header) => {
+                    if (header.typeOfBodyData === "STRING") {
+                        columnObjectKey = header.objectKey;
+                        columnObject[columnObjectKey] = obj[columnObjectKey];
+                        keysUsedForTableDisplay.push(columnObjectKey);
+                        keysUsedForColumn.push(columnObjectKey);
+                    }
+                    else if (header.typeOfBodyData === "ICON") {
+                        columnObjectKey = header.typeOfBodyData;
+                        columnObject[columnObjectKey] = obj[header.objectKey];
+                        keysUsedForColumn.push(header.objectKey);
+                    }
+                    else if (header.typeOfBodyData === "CHECKBOX") {
+                        columnObjectKey = header.typeOfBodyData;
+                        columnObject[columnObjectKey] = obj[header.objectKey];
+                        keysUsedForColumn.push(header.objectKey);
+                    }
+                });
+                for (var i = 0; i < keysUsedForColumn.length; i++) {
+                    columnName += keysUsedForColumn[i];
+                    if (i !== keysUsedForColumn.length - 1) {
+                        columnName += ',';
+                    }
+                }
+                rowObject[columnName] = columnObject;
+            }
+            additionalInfoObject = {};
+            additionalKeys = Object.keys(obj).filter(key => !keysUsedForTableDisplay.includes(key));
+            additionalKeys.forEach(key => {
+                additionalInfoObject[key] = obj[key];
+            });
+            rowObject.AdditionalInfo = additionalInfoObject;
+            this.tableDataWrapper.push(rowObject);
+        });
+        this.tableData = this.tableDataWrapper;
+        this.showSkeletonLoading = false;
+        // console.log(JSON.stringify(this.tableDataWrapper));
     }
-    /** Measure the combined size of all of the rendered items. */
-    measureRenderedContentSize() {
-        const contentEl = this._contentWrapper.nativeElement;
-        return contentEl.offsetHeight;
+    selectOrUnselectCheckbox(rowData, columnKeys, isCheckboxSelected) {
+        this.toggleCheckbox.emit({ rowData, columnKeys, isCheckboxSelected });
     }
-    /**
-     * Measure the total combined size of the given range. Throws if the range includes items that are
-     * not rendered.
-     */
-    measureRangeSize(range) {
-        if (!this._forOf) {
-            return 0;
-        }
-        return this._forOf.measureRangeSize(range, this.orientation);
+    selectUnselectAllRows() {
+        this.toggleHeaderCheckbox.emit();
     }
-    /** Update the viewport dimensions and re-render. */
-    checkViewportSize() {
-        // TODO: Cleanup later when add logic for handling content resize
-        this._measureViewportSize();
-        this._scrollStrategy.onDataLengthChanged();
+    selectUnselectRow(rowData) {
+        this.toggleRowCheckbox.emit(rowData);
     }
-    /** Measure the viewport size. */
-    _measureViewportSize() {
-        const viewportEl = this.elementRef.nativeElement;
-        this._viewportSize = viewportEl.clientHeight;
+    undoCreditedSpot(data) {
+        this.undoIconClicked.emit({ data, mgOrCredit: "Credit" });
     }
-    /** Queue up change detection to run. */
-    _markChangeDetectionNeeded(runAfter) {
-        if (runAfter) {
-            this._runAfterChangeDetection.push(runAfter);
+    undoMgSpot(data) {
+        this.undoIconClicked.emit({ data, mgOrCredit: "MakeGood" });
+    }
+    //Sort and Filter Logic begins!
+    closeTooltip() {
+        if (this.tooltip && this.tooltip.isOpen()) {
+            this.tooltip.close();
         }
-        // Use a Promise to batch together calls to `_doChangeDetection`. This way if we set a bunch of
-        // properties sequentially we only have to run `_doChangeDetection` once at the end.
-        if (!this._isChangeDetectionPending) {
-            this._isChangeDetectionPending = true;
-            this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
-                this._doChangeDetection();
-            }));
+        this.tooltip = null;
+        this.disableCheckboxApply = false;
+        if (!this.bindValueFuncCalled) {
+            this.columnFilterClosed.emit();
         }
     }
-    /** Run change detection. */
-    _doChangeDetection() {
-        this._isChangeDetectionPending = false;
-        // Apply the content transform. The transform can't be set via an Angular binding because
-        // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
-        // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
-        // the `Number` function first to coerce it to a numeric value.
-        this._contentWrapper.nativeElement.style.top = this._renderedContentTransform;
-        // Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
-        // from the root, since the repeated items are content projected in. Calling `detectChanges`
-        // instead does not properly check the projected content.
-        this.ngZone.run(() => this._changeDetectorRef.markForCheck());
-        const runAfterChangeDetection = this._runAfterChangeDetection;
-        this._runAfterChangeDetection = [];
-        for (const fn of runAfterChangeDetection) {
-            fn();
+    closeSortTooltip() {
+        if (this.annaSortService.tooltip && this.annaSortService.tooltip.isOpen()) {
+            this.annaSortService.tooltip.close();
         }
     }
-    /** Calculates the `style.width` and `style.height` for the spacer element. */
-    _calculateSpacerSize() {
-        this._totalContentHeight = `${this._totalContentSize}px`;
-        this._totalContentWidth = "";
+    initFilters() {
+        this.annaFilterService.tooltipMap = new Map();
+        this.annaFilterService.tooltipSelectedMap = new Map();
+        this.annaSortService.sortByAsc = new Map();
+        this.annaSortService.sortByDesc = new Map();
+        this.annaFilterService.selectedRadio = null;
+        this.annaFilterService.appliedFiltersArray = [];
+        //closing the sort tooltip if we route on the same route or if we click dropdown filters
+        this.closeSortTooltip();
+        this.annaSortService.tooltip = null;
+        this.disableClearAllBtn = true;
+        this.disableTimeFilterApplyBtn = false;
     }
-}
-AnnaTableVirtualScrollViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaTableVirtualScrollViewportComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: VIRTUAL_SCROLL_STRATEGY, optional: true }, { token: i1$2.Directionality, optional: true }, { token: i2.ScrollDispatcher }, { token: i2.ViewportRuler }, { token: i1$1.AnnaGenericTableService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaTableVirtualScrollViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaTableVirtualScrollViewportComponent, selector: "anna-table-virtual-scroll-viewport", inputs: { orientation: "orientation" }, outputs: { scrolledIndexChange: "scrolledIndexChange" }, host: { properties: { "class.anna-table-virtual-scroll-orientation-horizontal": "orientation === \"horizontal\"", "class.anna-table-virtual-scroll-orientation-vertical": "orientation !== \"horizontal\"" }, classAttribute: "anna-table-virtual-scroll-viewport" }, providers: [
-        {
-            provide: CdkScrollable,
-            useExisting: AnnaTableVirtualScrollViewportComponent
-        },
-        {
-            provide: CdkVirtualScrollViewport,
-            useExisting: AnnaTableVirtualScrollViewportComponent
-        }
-    ], viewQueries: [{ propertyName: "_contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Wrap the rendered content in an element that will be used to offset it based on the scroll\r\n  position.\r\n-->\r\n<div #contentWrapper class=\"anna-table-virtual-scroll-content-wrapper\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<!--\r\n  Spacer used to force the scrolling container to the correct size for the *total* number of items\r\n  so that the scrollbar captures the size of the entire data set.\r\n-->\r\n<div class=\"app-table-virtual-scroll-spacer\" [style.width]=\"_totalContentWidth\" [style.height]=\"_totalContentHeight\">\r\n</div>", styles: ["anna-table-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;will-change:scroll-position;-webkit-overflow-scrolling:touch}.anna-table-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .anna-table-virtual-scroll-content-wrapper{right:0;left:auto}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper{min-height:100%}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper{min-width:100%}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.app-table-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .app-table-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaTableVirtualScrollViewportComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "anna-table-virtual-scroll-viewport", host: {
-                        class: "anna-table-virtual-scroll-viewport",
-                        "[class.anna-table-virtual-scroll-orientation-horizontal]": 'orientation === "horizontal"',
-                        "[class.anna-table-virtual-scroll-orientation-vertical]": 'orientation !== "horizontal"'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: CdkScrollable,
-                            useExisting: AnnaTableVirtualScrollViewportComponent
-                        },
-                        {
-                            provide: CdkVirtualScrollViewport,
-                            useExisting: AnnaTableVirtualScrollViewportComponent
-                        }
-                    ], template: "<!--\r\n  Wrap the rendered content in an element that will be used to offset it based on the scroll\r\n  position.\r\n-->\r\n<div #contentWrapper class=\"anna-table-virtual-scroll-content-wrapper\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<!--\r\n  Spacer used to force the scrolling container to the correct size for the *total* number of items\r\n  so that the scrollbar captures the size of the entire data set.\r\n-->\r\n<div class=\"app-table-virtual-scroll-spacer\" [style.width]=\"_totalContentWidth\" [style.height]=\"_totalContentHeight\">\r\n</div>", styles: ["anna-table-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;will-change:scroll-position;-webkit-overflow-scrolling:touch}.anna-table-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .anna-table-virtual-scroll-content-wrapper{right:0;left:auto}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper{min-height:100%}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper{min-width:100%}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.app-table-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .app-table-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [VIRTUAL_SCROLL_STRATEGY]
-                    }] }, { type: i1$2.Directionality, decorators: [{
-                        type: Optional
-                    }] }, { type: i2.ScrollDispatcher }, { type: i2.ViewportRuler }, { type: i1$1.AnnaGenericTableService }];
-    }, propDecorators: { orientation: [{
-                type: Input
-            }], scrolledIndexChange: [{
-                type: Output
-            }], _contentWrapper: [{
-                type: ViewChild,
-                args: ["contentWrapper", { static: true }]
-            }] } });
-
-/**
- * A custom scroll strategy that accepts a static row height, static header height,
- * and a buffer size. The strategy
- */
-class AnnaFixedRowSizeTableVirtualScrollStrategy {
-    constructor(rowHeight, buffer, headerHeight) {
-        this._scrolledIndexChange = new Subject();
-        this.scrolledIndexChange = this._scrolledIndexChange.pipe(distinctUntilChanged());
-        this.updateRowHeightAndBuffer(rowHeight, buffer, headerHeight);
-    }
-    /**
-     * Attaches this scroll strategy to a viewport.
-     * @param viewport The viewport to attach this strategy to.
-     */
-    attach(viewport) {
-        this.viewport = viewport;
-        this.updateTotalContentSize();
-        this.updateRenderedRange();
-    }
-    /**
-     * Detaches this scroll strategy from the currently attached viewport.
-     */
-    detach() {
-        this._scrolledIndexChange.complete();
-        this.viewport = null;
-    }
-    onContentScrolled() {
-        this.updateRenderedRange();
-    }
-    onDataLengthChanged() {
-        this.updateTotalContentSize();
-        this.updateRenderedRange();
-    }
-    onContentRendered() {
-        // This method is useful for virtual scroll strategies that measure the rendered
-        // content to determine its height. This scroll strategy assumes that rows have
-        // a static height, so there's no need to implement this method.
-    }
-    onRenderedOffsetChanged() {
-        // Similar to onContentRendered, this method is useful for virtual scroll strategies
-        // that need to track the offset as it changes. This scroll strategy is always able
-        // to calculate the correct offset from other values, so there's no need to implement
-        // this method.
-    }
-    scrollToIndex(index, behavior) {
-        var _a;
-        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToOffset(index * this.rowHeight, behavior);
+    setInitialValueMapData() {
+        this.annaFilterService.initialValueMap = new Map();
+        this.tableHeaders.forEach((column) => {
+            column.headerInfo.forEach((header) => {
+                if (header.filter === "SLIDER") {
+                    header.filterObjectKeys.forEach((key) => {
+                        let min = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, key, true);
+                        let max = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, key, false);
+                        let obj = { min, max };
+                        this.annaFilterService.initialValueMap.set(key, obj);
+                    });
+                }
+                else if (header.filter === "DATE") {
+                    header.filterObjectKeys.forEach((key) => {
+                        if (key == "period") {
+                            const minMaxStartDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "startDate");
+                            const minMaxEndDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "endDate");
+                            let dateObj = { minSelectedDate: minMaxStartDate[0], maxSelectedDate: minMaxEndDate[1] };
+                            this.annaFilterService.initialValueMap.set(key, dateObj);
+                        }
+                        else {
+                            const minMaxDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, key);
+                            let obj = { minSelectedDate: minMaxDate[0], maxSelectedDate: minMaxDate[1] };
+                            this.annaFilterService.initialValueMap.set(key, obj);
+                        }
+                    });
+                }
+                else if (header.filter === "TIME") {
+                    header.filterObjectKeys.forEach((key) => {
+                        let data = this.clonedTableData.filter((obj) => !["", "-", null, "0", "<multi>"].includes(obj[key]));
+                        let timeArr = map(data, key);
+                        timeArr.sort((a, b) => {
+                            return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+                        });
+                        let obj = {
+                            fromTime: timeArr[0],
+                            toTime: timeArr[timeArr.length - 1],
+                        };
+                        if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
+                            let includeMulti = this.clonedTableData.findIndex((obj) => obj[key] == "<multi>") != -1;
+                            let includeZero = this.clonedTableData.findIndex((obj) => obj[key] == "0") != -1;
+                            let includeTimeRange = this.clonedTableData.findIndex((obj) => obj[key] != "0" && obj[key] != "<multi>") != -1;
+                            let obj = {
+                                fromTime: timeArr[0],
+                                toTime: timeArr[timeArr.length - 1],
+                                includeMulti: includeMulti,
+                                includeZero: includeZero,
+                                includeTimeRange: includeTimeRange
+                            };
+                            this.annaFilterService.initialValueMap.set(key, obj);
+                        }
+                        else if (this.gtGeneralConfig.component === "RATING") {
+                            let includeMulti = this.clonedTableData.findIndex((obj) => obj[key][0] == "<multi>") != -1;
+                            let includeZero = this.clonedTableData.findIndex((obj) => obj[key][0] == "0") != -1;
+                            let includeTimeRange = this.clonedTableData.findIndex((obj) => obj[key][0] != "0" && obj[key][0] != "<multi>") != -1;
+                            let startTimeArr = map(this.clonedTableData, "startTime");
+                            let endTimeArr = map(this.clonedTableData, "endTime");
+                            startTimeArr.sort((a, b) => {
+                                return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+                            });
+                            endTimeArr.sort((a, b) => {
+                                return this.annaDateTimeFormatService.sortByTimeDescending(a, b);
+                            });
+                            let obj = {
+                                fromTime: startTimeArr[0],
+                                toTime: endTimeArr[0],
+                                includeMulti: includeMulti,
+                                includeZero: includeZero,
+                                includeTimeRange: includeTimeRange
+                            };
+                            this.annaFilterService.initialValueMap.set(key, obj);
+                        }
+                        else {
+                            this.annaFilterService.initialValueMap.set(key, obj);
+                        }
+                    });
+                }
+            });
+        });
     }
-    /**
-     * Update the item size and buffer size.
-     * @param rowHeight The height of a row in the virtually scrolling table.
-     * @param buffer The number of rows to buffer outside the viewport.
-     * @param headerHeight The total height of the table header, including all header rows.
-     */
-    updateRowHeightAndBuffer(rowHeight, buffer, headerHeight) {
-        this.rowHeight = rowHeight;
-        this.buffer = buffer;
-        this.headerHeight = headerHeight;
-        this.updateTotalContentSize();
-        this.updateRenderedRange();
+    isTooltipActive(header) {
+        return this.annaFilterService.isTooltipActive(header);
     }
-    updateRenderedRange() {
-        if (!this.viewport) {
-            return;
+    bindTheValueToToolTip(tooltip, header) {
+        this.bindValueFuncCalled = true;
+        let containerToScroll;
+        if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "DRRLISTING") {
+            containerToScroll = document.getElementsByClassName("scrollable-container")[0];
+            var mediaQuery = window.matchMedia("(max-width: 1366px)");
+            if (mediaQuery.matches) {
+                containerToScroll.scroll(0, this.gtGeneralConfig.verticalScrollOffsetForFilterTooltip);
+            }
+        }
+        // if same tooltip opened close it
+        if (tooltip == this.tooltip) {
+            this.bindValueFuncCalled = false;
+            this.closeTooltip();
+        }
+        else {
+            this.searchBar = '';
+            let enabledHeaders = [];
+            header.forEach((item) => {
+                if (item == "period") {
+                    let uniqStartDate = uniq(this.tableData.map((u) => u["startDate"]));
+                    let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
+                    if (uniqStartDate.length > 1 || uniqEndDate.length > 1 || this.isTooltipActive([item])) {
+                        enabledHeaders.push(item);
+                    }
+                }
+                else if (uniq(this.tableData.map((u) => u[item])).length > 1 || this.isTooltipActive([item])) {
+                    enabledHeaders.push(item);
+                }
+            });
+            this.openTooltip(tooltip, enabledHeaders);
+            if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header[0])) {
+                this.columnFilterOpened.emit();
+            }
+            this.showCheckboxFilterRadioButtons = enabledHeaders.length > 1;
+            this.populateTooltipDataBasedOnSelectedRadio(enabledHeaders[0]);
+            this.bindValueFuncCalled = false;
         }
-        const viewportSize = this.viewport.getViewportSize();
-        const dataLength = this.viewport.getDataLength();
-        const scrollOffset = this.viewport.measureScrollOffset();
-        // the index of the first item that would be at least partially visible in the viewport
-        let firstVisibleIndex = Math.floor((scrollOffset + this.headerHeight) / this.rowHeight);
-        // if the buffer size is 10 but the first visible item is at, say, index 7
-        // then the buffered items must be 7, because we don't have 10 items available to buffer.
-        const bufferedItems = Math.min(AnnaFilterService$1.bufferSize, firstVisibleIndex);
-        const itemsInViewport = Math.ceil(viewportSize / this.rowHeight);
-        const itemsToRender = itemsInViewport + this.buffer;
-        // Clamp the new range between 0 and dataLength
-        const newStart = Math.max(0, firstVisibleIndex - bufferedItems);
-        const newEnd = Math.min(dataLength, firstVisibleIndex + itemsToRender);
-        const newRange = {
-            start: newStart,
-            end: newEnd
-        };
-        const newOffset = this.rowHeight * (firstVisibleIndex - bufferedItems);
-        this.viewport.setRenderedContentOffset(newOffset);
-        this.viewport.setRenderedRange(newRange);
-        this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
-    }
-    updateTotalContentSize() {
-        var _a;
-        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setTotalContentSize(this.viewport.getDataLength() * this.rowHeight);
     }
-}
-/**
- * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created
- * `FixedSizeVirtualScrollStrategy` from the given directive.
- * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the
- *     `FixedSizeVirtualScrollStrategy` from.
- */
-function fixedSizeVirtualScrollStrategyFactory(fixedSizeDir) {
-    return fixedSizeDir.scrollStrategy;
-}
-class AnnaFixedRowSizeTableVirtualScrollStrategyDirective {
-    constructor() {
-        this._rowHeight = 30;
-        this._headerRowHeight = 30;
-        this._buffer = 20;
-        this._headerRows = null;
-        this.headerRowCount = 1;
-        /** The scroll strategy used by this directive. */
-        this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(this.rowHeight, this.buffer, this.headerRowHeight * this.headerRowCount);
+    openTooltip(tooltip, header) {
+        this.closeTooltip();
+        this.tooltip = tooltip;
+        this.tooltip.open();
+        //convert key into the header
+        this.radioButtons = header.map((key) => {
+            let value = this.tooltipRadioTextMap.has(key)
+                ? this.tooltipRadioTextMap.get(key)
+                : key; //change to display name
+            return new radioButtonModel$1(key, value);
+        });
     }
-    /** The height of rows in the table (in pixels). Defaults to 30. */
-    set rowHeight(value) { this._rowHeight = coerceNumberProperty(value); }
-    get rowHeight() { return this._rowHeight; }
-    /**
-     * The height of header rows in the table (in pixels). Defaults to 30.
-     */
-    set headerRowHeight(value) { this._headerRowHeight = coerceNumberProperty(value); }
-    get headerRowHeight() { return this._headerRowHeight; }
-    /**
-     * The number of buffered rows rendered beyond the viewport.
-     * If the number of buffered rows dips below this number, more rows will be rendered. Defaults to 20.
-     */
-    set buffer(value) {
-        this._buffer = coerceNumberProperty(value);
+    clearColumnFilter() {
+        this.annaFilterService.clearColumnFilter();
+        this.toolTipdata = null;
+        this.tempTooltipData = null;
+        this.closeTooltip();
+        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+        this.checkIfSortingIsApplied();
+        this.filterAppliedToTable.emit(this.tableData);
+        this.disableEnableEachColumnFilters();
     }
-    get buffer() { return this._buffer; }
-    set headerRows(value) { this._headerRows = coerceNumberProperty(value, undefined); }
-    get headerRows() { return this._headerRows; }
-    ngOnChanges(change) {
-        var _a, _b;
-        if (this.headerRows != undefined || this.headerRowsQuery) {
-            this.handleChange();
+    populateTooltipDataBasedOnSelectedRadio(header) {
+        this.disableSliderApplyButton = false;
+        this.disableCheckboxApply = false;
+        if (this.toolTipdata) {
+            this.revert();
         }
-        if (((_a = change['buffer']) === null || _a === void 0 ? void 0 : _a.previousValue) != ((_b = change['buffer']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
-            AnnaFilterService$1.bufferSize = this.buffer;
-            this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(this.rowHeight, this.buffer, this.headerRowHeight * this.headerRowCount);
+        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);
         }
     }
-    ngAfterContentInit() {
-        this.headerRowsQuery.changes.subscribe(() => {
-            this.handleChange();
-        });
+    getSliderData(header) {
+        if (header === "Rate") {
+            this.annaFilterService.translateFunc = "currency";
+        }
+        else {
+            this.annaFilterService.translateFunc = "normal";
+        }
+        this.options = this.annaFilterService.populateSliderTooltip(this.clonedTableData, this.tableData);
+        this.disableSliderApplyButton = this.disableSliderApplyBtn();
+        let selectedTooltipObj;
+        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+            selectedTooltipObj = this.annaFilterService.tooltipSelectedMap.get(header);
+        }
+        else {
+            selectedTooltipObj = this.annaFilterService.initialValueMap.get(header);
+        }
+        this.sliderMinValue = selectedTooltipObj.min < this.options.floor ? this.options.floor : selectedTooltipObj.min;
+        this.sliderMaxValue = selectedTooltipObj.max < this.options.ceil ? selectedTooltipObj.max : this.options.ceil;
+        //default step values
+        this.options.step = 1;
+        this.sliderFilterTextBoxStep = "1";
+        if (header !== "WeekNumber") {
+            this.options.step = 0.1;
+            this.sliderFilterTextBoxStep = "0.1";
+        }
     }
-    handleChange() {
-        var _a;
-        this.scrollStrategy.updateRowHeightAndBuffer(this.rowHeight, this.buffer, 
-        // Use the explicit headerRows input value if set.
-        // Otherwise, fall back to the QueryList length.
-        this.headerRowHeight * ((_a = this._headerRows) !== null && _a !== void 0 ? _a : this.headerRowsQuery.length));
+    getCheckboxData(header) {
+        this.tempTooltipData = this.annaFilterService.populateTooltip(header, this.clonedTableData, this.tableData);
+        this.allSelected = this.annaFilterService.isAllOptionsSelected();
+        this.showAll = this.tempTooltipData.filter((x) => !x.isHidden).length > 1 ? true : false;
+        this.toolTipdata = cloneDeep(this.tempTooltipData);
     }
-}
-AnnaFixedRowSizeTableVirtualScrollStrategyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AnnaFixedRowSizeTableVirtualScrollStrategyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]", inputs: { rowHeight: "rowHeight", headerRowHeight: "headerRowHeight", buffer: "buffer", headerRows: "headerRows" }, providers: [
-        {
-            provide: VIRTUAL_SCROLL_STRATEGY,
-            useFactory: fixedSizeVirtualScrollStrategyFactory,
-            deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
+    getCalendarData() {
+        const parsingFormat = "MM/DD/YYYY";
+        let minMaxdate = this.annaFilterService.populateDatePickerTooltipWithData(this.clonedTableData, this.tableData);
+        let selectedDateObj;
+        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+            selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
         }
-    ], queries: [{ propertyName: "headerRowsQuery", predicate: MatHeaderRowDef }], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]",
-                    providers: [
-                        {
-                            provide: VIRTUAL_SCROLL_STRATEGY,
-                            useFactory: fixedSizeVirtualScrollStrategyFactory,
-                            deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
-                        }
-                    ]
-                }]
-        }], propDecorators: { rowHeight: [{
-                type: Input
-            }], headerRowHeight: [{
-                type: Input
-            }], buffer: [{
-                type: Input
-            }], headerRows: [{
-                type: Input
-            }], headerRowsQuery: [{
-                type: ContentChildren,
-                args: [MatHeaderRowDef]
-            }] } });
-
-/**
- * Directive that wraps a given data source in a "virtual" data source that emits
- * the slice of the original data source that matches the range that should be rendered
- * in the containing virtual scroll viewport.
- */
-class AnnaVirtualTableDirective {
-    constructor(elementRef, viewport, table, ngZone, _coalescedStyleScheduler) {
-        this.viewport = viewport;
-        this.table = table;
-        this._coalescedStyleScheduler = _coalescedStyleScheduler;
-        this.virtualizedDataStream = new Subject();
-        this.dataSourceChanges = new Subject();
-        /** The raw, unvirtualized data stream. Emits whenever the data in the current DataSource changes. */
-        this.dataStream = this.dataSourceChanges
-            .pipe(
-        // Start off with null data source.
-        startWith(null), 
-        // Bundle up the previous and current data sources so we can work with both.
-        pairwise(), 
-        // Use `changeDataSource` to disconnect from the previous data source and connect to the
-        // new one, passing back a stream of data changes which we run through `switchMap` to give
-        // us a data stream that emits the latest data from whatever the current data source is.
-        switchMap(([prev, cur]) => this.changeDataSource(prev, cur)), 
-        // Replay the last emitted data when someone subscribes.
-        shareReplay(1));
-        this.viewChange = new Subject();
-        this.destroyed$ = new Subject();
-        this.renderedRange = { start: 0, end: 0 };
-        this.isNativeHtmlTable = false;
-        table.dataSource = this.virtualizedDataStream;
-        this.isNativeHtmlTable = elementRef.nativeElement.tagName === 'TABLE';
-        this.dataStream.subscribe(data => {
-            this.data = data;
-            this.onRenderedDataChange();
-        });
-        viewport.renderedRangeStream.pipe(takeUntil(this.destroyed$)).subscribe((range) => {
-            this.renderedRange = range;
-            ngZone.run(() => this.viewChange.next(range));
-            this.onRenderedDataChange();
-        });
-        viewport.attach(this);
+        else {
+            selectedDateObj = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        // For startDate
+        // selected date is less than date which we get
+        if ((selectedDateObj.minSelectedDate).isAfter(minMaxdate.minStartDate)) {
+            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.minSelectedDate, parsingFormat);
+        }
+        else {
+            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.minStartDate, parsingFormat);
+        }
+        // For endData
+        // selectedDate is less than date which we get
+        if ((selectedDateObj.maxSelectedDate).isAfter(minMaxdate.maxEndDate)) {
+            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.maxEndDate, parsingFormat);
+        }
+        else {
+            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.maxSelectedDate, parsingFormat);
+        }
+        this.calendarMinEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.minStartDate, parsingFormat);
+        this.calendarMaxEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.maxEndDate, parsingFormat);
     }
-    set dataSource(value) {
-        this._dataSource = value;
-        if (isDataSource(value)) {
-            this.dataSourceChanges.next(value);
+    getTimeFilterData(header) {
+        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+            this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
+            this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
+        }
+        else {
+            this.selectedFromTime = this.annaFilterService.initialValueMap.get(header).fromTime;
+            this.selectedToTime = this.annaFilterService.initialValueMap.get(header).toTime;
+        }
+        if (this.selectedFromTime != undefined || this.selectedToTime != undefined) {
+            this.selectedFromTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedFromTime, true);
+            this.selectedToTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedToTime, true);
+            this.clonedSelectedFromTime = cloneDeep(this.selectedFromTime);
+            this.clonedSelectedToTime = cloneDeep(this.selectedToTime);
         }
         else {
-            this.dataSourceChanges.next(new ArrayDataSource(isObservable(value) ? value : Array.from(value || [])));
+            this.selectedFromTime = ["-", "-", "-"];
+            this.selectedToTime = ["-", "-", "-"];
+            this.disableTimeFilterApplyBtn = true;
         }
-    }
-    get dataSource() {
-        return this._dataSource;
-    }
-    ngOnInit() {
-        // This is just a proof of concept, but the AnnaTableVirtualScrollViewportComponent uses `position: absolute` and `top: #px` instead of `transform: translateY(#px)` to position the viewport.
-        // This removes the need to account for the translation in the `top` of the sticky header rows.
-        if (this.viewport instanceof AnnaTableVirtualScrollViewportComponent) {
-            return;
+        if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
+            this.showMultiTimeCheckbox = false;
+            this.showZeroTimeCheckbox = false;
+            this.showEnterTimeCheckbox = false;
+            if (this.clonedTableData.findIndex((obj) => obj[header] == "0") != -1) {
+                this.showZeroTimeCheckbox = true;
+                this.annaFilterService.includeZeroTime = this.tableData.findIndex((obj) => obj[header] == "0") != -1;
+                this.zeroTimeCheckboxChecked = this.annaFilterService.includeZeroTime;
+            }
+            if (this.clonedTableData.findIndex((obj) => obj[header] == "<multi>") != -1) {
+                this.showMultiTimeCheckbox = true;
+                this.annaFilterService.includeMultiTime = this.tableData.findIndex((obj) => obj[header] == "<multi>") != -1;
+                this.multiTimeCheckboxChecked = this.annaFilterService.includeMultiTime;
+            }
+            if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+                this.showEnterTimeCheckbox = true;
+            }
+            if (this.clonedTableData.findIndex((obj) => obj[header] != "<multi>" && obj[header] != "0") != -1) {
+                this.annaFilterService.includeTimeRange = this.tableData.findIndex((obj) => obj[header] != "<multi>" && obj[header] != "0") != -1;
+                this.enterTimeCheckboxChecked = this.annaFilterService.includeTimeRange;
+            }
         }
-        this.viewport.scrolledIndexChange
-            .pipe(map(() => this.viewport.getOffsetToRenderedContentStart()), takeUntil(this.destroyed$))
-            .subscribe((offset) => {
-            // We need to set the `style.top` property of the sticky header rows
-            // to the negative value of the virtual scroll viewport's offset, so
-            // make the offset negative.
-            offset = -offset;
-            const stickyStates = this.headerRowDefs.map(rowDef => rowDef.sticky);
-            // This logic is exactly the same as what's in the StickyStyler (literally copy + paste).
-            // The only difference is that the `stickyOffset` variable starts at the virtual scroll
-            // viewport container's offset instead of starting at zero.
-            const rows = this.table._getRenderedRows(this.table._headerRowOutlet);
-            const stickyOffsets = [];
-            const stickyCellHeights = [];
-            const elementsToStick = [];
-            for (let rowIndex = 0, stickyOffset = offset; rowIndex < rows.length; rowIndex++) {
-                stickyOffsets[rowIndex] = stickyOffset;
-                if (!stickyStates[rowIndex]) {
-                    continue;
-                }
-                const row = rows[rowIndex];
-                elementsToStick[rowIndex] = this.isNativeHtmlTable ? Array.from(row.children) : [row];
-                const height = row.getBoundingClientRect().height;
-                stickyOffset += height;
-                stickyCellHeights[rowIndex] = height;
+        else if (this.gtGeneralConfig.component === "RATING") {
+            this.showMultiTimeCheckbox = false;
+            this.showZeroTimeCheckbox = false;
+            this.showEnterTimeCheckbox = false;
+            if (this.clonedTableData.findIndex((obj) => obj[header][0] == "0") != -1) {
+                this.showZeroTimeCheckbox = true;
+                this.annaFilterService.includeZeroTime = this.tableData.findIndex((obj) => obj[header][0] == "0") != -1;
+                this.zeroTimeCheckboxChecked = this.annaFilterService.includeZeroTime;
             }
-            // Using the CoalescedStyleScheduler here is optional. It'll work without it,
-            // and CoalescedStyleScheduler is not public (yet?), so feel free to remove it.
-            this._coalescedStyleScheduler.schedule(() => {
-                for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-                    if (!stickyStates[rowIndex]) {
-                        continue;
-                    }
-                    for (const element of elementsToStick[rowIndex]) {
-                        element.style.top = `${stickyOffsets[rowIndex]}px`;
-                    }
-                }
-            });
-        });
+            if (this.clonedTableData.findIndex((obj) => obj[header][0] == "<multi>") != -1) {
+                this.showMultiTimeCheckbox = true;
+                this.annaFilterService.includeMultiTime = this.tableData.findIndex((obj) => obj[header][0] == "<multi>") != -1;
+                this.multiTimeCheckboxChecked = this.annaFilterService.includeMultiTime;
+            }
+            if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+                this.showEnterTimeCheckbox = true;
+            }
+            if (this.clonedTableData.findIndex((obj) => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1) {
+                this.annaFilterService.includeTimeRange = this.tableData.findIndex((obj) => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1;
+                this.enterTimeCheckboxChecked = this.annaFilterService.includeTimeRange;
+            }
+        }
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.dataSourceChanges.complete();
-        this.virtualizedDataStream.complete();
+    selectOrUnselectMultiTimeCheckbox() {
+        this.multiTimeCheckboxChecked = !this.multiTimeCheckboxChecked;
+        this.annaFilterService.includeMultiTime = !this.annaFilterService.includeMultiTime;
+        this.disableTimeFilterApplyButton();
     }
-    /** React to scroll state changes in the viewport. */
-    onRenderedDataChange() {
-        if (!this.renderedRange) {
-            return;
+    selectOrUnselectZeroTimeCheckbox() {
+        this.zeroTimeCheckboxChecked = !this.zeroTimeCheckboxChecked;
+        this.annaFilterService.includeZeroTime = !this.annaFilterService.includeZeroTime;
+        this.disableTimeFilterApplyButton();
+    }
+    selectOrUnselectEnterTimeCheckbox() {
+        this.enterTimeCheckboxChecked = !this.enterTimeCheckboxChecked;
+        this.annaFilterService.includeTimeRange = !this.annaFilterService.includeTimeRange;
+        this.disableTimeFilterApplyButton();
+    }
+    disableSliderApplyBtn() {
+        return this.options.floor === this.options.ceil;
+    }
+    isCheckboxSelected(data) {
+        this.allSelected = this.annaFilterService.isCheckboxSelected(data);
+        if (this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).filter((x) => x.isSelected && !x.isHidden).length == 0) {
+            this.disableCheckboxApply = true;
+        }
+        else {
+            this.disableCheckboxApply = false;
         }
-        this.renderedItems = this.data.slice(this.renderedRange.start, this.renderedRange.end + 1);
-        // delegate rendering to the table by emitting from the virtualizedDataStream
-        this.virtualizedDataStream.next(this.renderedItems);
     }
-    /** Swap out one data source for another. */
-    changeDataSource(oldDataSource, newDs) {
-        oldDataSource === null || oldDataSource === void 0 ? void 0 : oldDataSource.disconnect(this);
-        return newDs ? newDs.connect(this) : of();
+    minValueChanged(value) {
+        if (isNaN(+value)) {
+            this.sliderMinValue = +this.options.floor;
+        }
+        else {
+            if (+value > this.sliderMaxValue) {
+                this.sliderMinValue = this.sliderMaxValue;
+            }
+            else if (+value < this.options.floor) {
+                this.sliderMinValue = this.options.floor;
+            }
+            else {
+                this.sliderMinValue = +value;
+            }
+        }
     }
-    /**
-     * This method is only used by the experimental AutoSizeVirtualScrollStrategy.
-     * We're not using that strategy, but I've implemented it just to show how it oculd be done.
-     * I'm not actually sure if this works.
-     */
-    measureRangeSize(range, orientation) {
-        if (orientation === 'horizontal' || range.end < range.start) {
-            // virtual scrolling columns are not supported by this directive
-            return 0;
+    maxValueChanged(value) {
+        if (isNaN(+value)) {
+            this.sliderMaxValue = +this.options.ceil;
         }
-        const renderedBodyRows = this.table._getRenderedRows(this.table._rowOutlet);
-        const firstRow = renderedBodyRows[range.start];
-        const lastRow = renderedBodyRows[range.end];
-        if (!firstRow || !lastRow) {
-            return 0;
+        else {
+            if (+value < this.sliderMinValue) {
+                this.sliderMaxValue = this.sliderMinValue;
+            }
+            else if (+value > this.options.ceil) {
+                this.sliderMinValue = this.options.ceil;
+            }
+            else {
+                this.sliderMaxValue = +value;
+            }
         }
-        // We need to include all header and footer rows in the sum, since they're always rendered
-        const renderedHeaderRows = this.table._getRenderedRows(this.table._headerRowOutlet);
-        const renderedFooterRows = this.table._getRenderedRows(this.table._footerRowOutlet);
-        // TODO (performance): Can we just measure the offset of the first and last items and do some math to avoid having to measure each row individually?
-        const headerHeight = renderedHeaderRows.reduce((sum, row) => {
-            return sum += row.getBoundingClientRect().height;
-        }, 0);
-        const footerHeight = renderedFooterRows.reduce((sum, row) => {
-            return sum += row.getBoundingClientRect().height;
-        }, 0);
-        const bodyHeight = lastRow.getBoundingClientRect().bottom - firstRow.getBoundingClientRect().top;
-        return headerHeight + footerHeight + bodyHeight;
     }
-}
-AnnaVirtualTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaVirtualTableDirective, deps: [{ token: i0.ElementRef }, { token: i2.CdkVirtualScrollViewport }, { token: i2$1.CdkTable }, { token: i0.NgZone }, { token: _COALESCED_STYLE_SCHEDULER }], target: i0.ɵɵFactoryTarget.Directive });
-AnnaVirtualTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: AnnaVirtualTableDirective, selector: "[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]", inputs: { dataSource: ["appVirtualDataSource", "dataSource"] }, providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }], queries: [{ propertyName: "headerRowDefs", predicate: CdkHeaderRowDef }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaVirtualTableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]',
-                    providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }]
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i2.CdkVirtualScrollViewport }, { type: i2$1.CdkTable }, { type: i0.NgZone }, { type: i2$1._CoalescedStyleScheduler, decorators: [{
-                        type: Inject,
-                        args: [_COALESCED_STYLE_SCHEDULER]
-                    }] }];
-    }, propDecorators: { dataSource: [{
-                type: Input,
-                args: ['appVirtualDataSource']
-            }], headerRowDefs: [{
-                type: ContentChildren,
-                args: [CdkHeaderRowDef]
-            }] } });
-
-// Angular import statements
-class AnnaNonEditableGenericTableComponent {
-    constructor(cdRef, annaSortService, annaDateTimeFormatService, annaFilterService, annaGenericTableService) {
-        this.cdRef = cdRef;
-        this.annaSortService = annaSortService;
-        this.annaDateTimeFormatService = annaDateTimeFormatService;
-        this.annaFilterService = annaFilterService;
-        this.annaGenericTableService = annaGenericTableService;
-        this.maximumRowsWhichCanBeRenderedWithoutScroll = 5;
-        this.toggleCheckbox = new EventEmitter();
-        this.toggleRowCheckbox = new EventEmitter();
-        this.toggleHeaderCheckbox = new EventEmitter();
-        this.undoIconClicked = new EventEmitter();
-        this.filterAppliedToTable = new EventEmitter();
-        this.sortingAppliedToTable = new EventEmitter();
-        this.rowClicked = new EventEmitter();
-        this.radioButtonSelected = new EventEmitter();
-        this.columnFilterOpened = new EventEmitter();
-        this.columnFilterClosed = new EventEmitter();
-        this.gtIconClicked = new EventEmitter();
-        this.gtSVGIconClicked = new EventEmitter();
-        this.gtTextActionClicked = new EventEmitter();
-        this.gtViewDetailClicked = new EventEmitter();
-        this.noDataWidth = "55%";
-        this.disableClearAllBtn = true;
-        this.disableColumnClearAllBtn = true;
-        this.allSelected = 0;
-        this.options = {
-            floor: 0,
-            ceil: 0,
-            step: 0.1
-        };
-        this.tableColumns = [];
-        this.totalRowColumns = null;
-        this.isScrolledLeft = false;
-        this.rowBorderWidth = 2;
-        this.PfpIconActiveColor = "#9B1B93";
-        this.PfpIconDisableColor = "rgba(189,189,189,0.5)";
-        this.setTooltipRadioNames();
+    sliderValueChange() {
+        this.sliderValue = { min: this.sliderMinValue, max: this.sliderMaxValue };
+    }
+    cancelSliderFilter() {
+        this.sliderValue = null;
+        this.closeTooltip();
     }
-    ngOnInit() {
-        // this.tableData = this.numberOfSkeletonColumns;
+    allOptionClicked() {
+        if (this.allSelected == 0 || this.allSelected == 2) {
+            this.allSelected = 1;
+            this.disableCheckboxApply = false;
+        }
+        else {
+            this.allSelected = 0;
+            this.disableCheckboxApply = true;
+        }
+        this.annaFilterService.allOptionsClicked(this.allSelected);
     }
-    ngOnChanges(changes) {
-        // console.log("generic");
-        // console.log(this.tableHeaders);
-        // console.log(JSON.stringify(this.tableData));
-        if (this.showSkeletonLoading) {
-            this.tableData = this.numberOfSkeletonColumns;
+    applyFilters() {
+        let isSame = isEqual(this.toolTipdata, this.tempTooltipData);
+        this.toolTipdata = cloneDeep(this.tempTooltipData);
+        this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
+        if (!isSame) {
+            this.annaFilterService.reOrderAppliedFiltersArray(false);
+        }
+        let tooltipSelectedDataArray = this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).filter((x) => x.isSelected).map((x) => x.data);
+        if (tooltipSelectedDataArray.length == 0) {
+            tooltipSelectedDataArray = this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).map((x) => x.data);
+        }
+        this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, tooltipSelectedDataArray);
+        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+        this.checkIfSortingIsApplied();
+        this.filterAppliedToTable.emit(this.tableData);
+        // this.generateTableDataWrapper();
+        this.disableEnableEachColumnFilters();
+        this.closeTooltip();
+    }
+    revert() {
+        this.tempTooltipData = cloneDeep(this.toolTipdata);
+        this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
+        this.toolTipdata = null;
+    }
+    closeCheckboxFilter() {
+        if (this.toolTipdata) {
+            this.revert();
+        }
+        this.closeTooltip();
+    }
+    applySliderFilter() {
+        if (this.sliderValue) {
+            let selectedDataObj;
+            if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+                selectedDataObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+            }
+            else {
+                selectedDataObj = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+            let isSame = isEqual(selectedDataObj, this.sliderValue);
+            if (!isSame) {
+                this.annaFilterService.sliderData = { min: this.options.floor, max: this.options.ceil };
+                this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, this.sliderValue);
+                this.annaFilterService.reOrderAppliedFiltersArray(false);
+                this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+                this.checkIfSortingIsApplied();
+                this.filterAppliedToTable.emit(this.tableData);
+                // this.generateTableDataWrapper();
+                this.disableEnableEachColumnFilters();
+            }
+        }
+        this.sliderValue = null;
+        this.closeTooltip();
+    }
+    cancelInDateFilter() {
+        this.closeTooltip();
+    }
+    applyDateFilter(selectedDate) {
+        let selectedDateObj;
+        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+            selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
         }
         else {
-            this.setInitialValueMapData();
+            selectedDateObj = cloneDeep(this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio));
+        }
+        let isStartDateSame = isEqual(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.fromDate), selectedDateObj.minSelectedDate);
+        let isEndDateSame = isEqual(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.toDate), selectedDateObj.maxSelectedDate);
+        if (!isStartDateSame || !isEndDateSame) {
+            selectedDateObj.minSelectedDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.fromDate));
+            selectedDateObj.maxSelectedDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.toDate));
+            this.annaFilterService.flightDateRange = {
+                minSelectedDate: moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.calendarMinEnabledDate)),
+                maxSelectedDate: moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.calendarMaxEnabledDate))
+            };
+            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, selectedDateObj);
+            this.annaFilterService.reOrderAppliedFiltersArray(false);
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+            this.checkIfSortingIsApplied();
+            this.filterAppliedToTable.emit(this.tableData);
+            // this.generateTableDataWrapper();
             this.disableEnableEachColumnFilters();
-            this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
-            this.showSkeletonLoading = false;
         }
-        //setting table column here as well because while showing skeleton loader, we should show table headers.
-        if (changes['tableHeaders'] && changes['tableHeaders'].currentValue) {
-            this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
+        this.closeTooltip();
+    }
+    applyWeekFilter(event) {
+    }
+    incrementHour(arr) {
+        if (arr[0] == "") {
+            arr[0] = 1;
         }
-        if (changes['totalRowInfo'] && changes['totalRowInfo'].currentValue) {
-            this.totalRowColumns = this.totalRowInfo.map(x => x.colName);
+        else if (parseInt(arr[0]) < 12) {
+            arr[0] = parseInt(arr[0]) + 1;
+        }
+        else {
+            arr[0] = 1;
         }
-        this.cdRef.detectChanges();
     }
-    trackByFn(index) {
-        return index;
+    decrementHour(arr) {
+        if (arr[0] == "") {
+            arr[0] = 12;
+        }
+        else if (parseInt(arr[0]) > 1) {
+            arr[0] = parseInt(arr[0]) - 1;
+        }
+        else {
+            arr[0] = 12;
+        }
     }
-    setTooltipRadioNames() {
-        this.tooltipRadioTextMap = new Map();
-        this.tooltipRadioTextMap.set("StartTimeForFilter", "Start Time");
-        this.tooltipRadioTextMap.set("EndTimeForFilter", "End Time");
-        this.tooltipRadioTextMap.set("start_time_for_filter", "Start Time");
-        this.tooltipRadioTextMap.set("end_time_for_filter", "End Time");
-        this.tooltipRadioTextMap.set("primaryAEName", "Primary AE");
-        this.tooltipRadioTextMap.set("region", "Region");
-        this.tooltipRadioTextMap.set("agencyName", "Agency");
-        this.tooltipRadioTextMap.set("location", "Location");
-        this.tooltipRadioTextMap.set("advertiserName", "Advertiser");
-        this.tooltipRadioTextMap.set("productCode", "Product Code");
-        this.tooltipRadioTextMap.set("flightStartDate", "Start Date");
-        this.tooltipRadioTextMap.set("flightEndDate", "End Date");
-        this.tooltipRadioTextMap.set("orderIdAndRevNumber", "STN Order#-Rev#");
-        this.tooltipRadioTextMap.set("alternateOrderId", "Buyer Order#");
-        this.tooltipRadioTextMap.set("grp", "GRP");
-        this.tooltipRadioTextMap.set("cpp", "CPP");
-        this.tooltipRadioTextMap.set("imps", "IMPS");
-        this.tooltipRadioTextMap.set("cpm", "CPM");
-        this.tooltipRadioTextMap.set("offeredMGs", "Offered MG");
-        this.tooltipRadioTextMap.set("outstandingPE", "O/S PE");
-        this.tooltipRadioTextMap.set("offeredADUs", "Offered ADUs");
-        this.tooltipRadioTextMap.set("udDeficitValue", "Pending Audience Delta");
-        this.tooltipRadioTextMap.set("startEndTimeMulti", "Time");
-        this.tooltipRadioTextMap.set("bookedValue", "Booked");
-        this.tooltipRadioTextMap.set("bookedSpots", "Spots");
-        this.tooltipRadioTextMap.set("userChanges", "Other changes");
-        this.tooltipRadioTextMap.set("inventoryCode", "Inventory Code");
-        this.tooltipRadioTextMap.set("program", "Program");
-        this.tooltipRadioTextMap.set("agency", "Agency");
-        this.tooltipRadioTextMap.set("advertiser", "Advertiser");
-        this.tooltipRadioTextMap.set("startDate", "Start Date");
-        this.tooltipRadioTextMap.set("endDate", "End Date");
-        this.tooltipRadioTextMap.set("rcvPreempt", "Madegood PE");
-        this.tooltipRadioTextMap.set("osPreempt", "O/S PE");
-        this.tooltipRadioTextMap.set("rcvUnderDly", "Recovered UD");
-        this.tooltipRadioTextMap.set("osUnderDly", "O/s Under Dly");
-        this.tooltipRadioTextMap.set("primaryAe", "Primary AE");
-        this.tooltipRadioTextMap.set("region", "Region");
-        this.tooltipRadioTextMap.set("revCode1", "Rev code 1");
-        this.tooltipRadioTextMap.set("orderNoRevNo", "STN Order#-Rev#");
-        this.tooltipRadioTextMap.set("revCode2", "Rev code 2");
-        this.tooltipRadioTextMap.set("revCode3", "Rev code 3");
-        this.tooltipRadioTextMap.set("booked", "Booked");
-        this.tooltipRadioTextMap.set("spots", "Spots");
-        this.tooltipRadioTextMap.set("postedAudPercent", "Posted %");
-        this.tooltipRadioTextMap.set("revision", "Revision");
-        this.tooltipRadioTextMap.set("productCode", "Product Code");
-        this.tooltipRadioTextMap.set("buyerOrderId", "ALT Order#");
-        this.tooltipRadioTextMap.set("demo", "Demo");
-        this.tooltipRadioTextMap.set("postedAdu", "Posted ADUs");
-        this.tooltipRadioTextMap.set("scheduledAdu", "Scheduled ADUs");
-        this.tooltipRadioTextMap.set("audienceDeficit", "Audience Deficit");
-        this.tooltipRadioTextMap.set("postedAudPercent", "Posted Audience %");
+    incrementMinute(arr) {
+        if (arr[1] == "" || parseInt(arr[1]) == 0) {
+            arr[1] = 30;
+        }
+        else {
+            arr[1] = "00";
+        }
     }
-    generateTableDataWrapper() {
-        this.showSkeletonLoading = true;
-        this.tableDataWrapper = [];
-        let rowObject;
-        let columnName;
-        let columnObject;
-        let columnObjectKey;
-        let keysUsedForTableDisplay;
-        let keysUsedForColumn;
-        let additionalInfoObject;
-        let additionalKeys;
-        this.tableData.forEach((obj) => {
-            rowObject = {};
-            keysUsedForTableDisplay = [];
-            for (var colNum in this.tableHeaders) {
-                columnObject = {};
-                if (!this.tableHeaders[colNum].visible) {
-                    continue;
-                }
-                columnName = "";
-                keysUsedForColumn = [];
-                this.tableHeaders[colNum].headerInfo.forEach((header) => {
-                    if (header.typeOfBodyData === "STRING") {
-                        columnObjectKey = header.objectKey;
-                        columnObject[columnObjectKey] = obj[columnObjectKey];
-                        keysUsedForTableDisplay.push(columnObjectKey);
-                        keysUsedForColumn.push(columnObjectKey);
-                    }
-                    else if (header.typeOfBodyData === "ICON") {
-                        columnObjectKey = header.typeOfBodyData;
-                        columnObject[columnObjectKey] = obj[header.objectKey];
-                        keysUsedForColumn.push(header.objectKey);
-                    }
-                    else if (header.typeOfBodyData === "CHECKBOX") {
-                        columnObjectKey = header.typeOfBodyData;
-                        columnObject[columnObjectKey] = obj[header.objectKey];
-                        keysUsedForColumn.push(header.objectKey);
-                    }
-                });
-                for (var i = 0; i < keysUsedForColumn.length; i++) {
-                    columnName += keysUsedForColumn[i];
-                    if (i !== keysUsedForColumn.length - 1) {
-                        columnName += ',';
-                    }
-                }
-                rowObject[columnName] = columnObject;
-            }
-            additionalInfoObject = {};
-            additionalKeys = Object.keys(obj).filter(key => !keysUsedForTableDisplay.includes(key));
-            additionalKeys.forEach(key => {
-                additionalInfoObject[key] = obj[key];
-            });
-            rowObject.AdditionalInfo = additionalInfoObject;
-            this.tableDataWrapper.push(rowObject);
-        });
-        this.tableData = this.tableDataWrapper;
-        this.showSkeletonLoading = false;
-        // console.log(JSON.stringify(this.tableDataWrapper));
+    decrementMinute(arr) {
+        if (arr[1] == "" || parseInt(arr[1]) == 30) {
+            arr[1] = "00";
+        }
+        else {
+            arr[1] = 30;
+        }
     }
-    selectOrUnselectCheckbox(rowData, columnKeys, isCheckboxSelected) {
-        this.toggleCheckbox.emit({ rowData, columnKeys, isCheckboxSelected });
+    changeStartTimeHour(increment) {
+        if (increment) {
+            this.incrementHour(this.selectedFromTime);
+        }
+        else {
+            this.decrementHour(this.selectedFromTime);
+        }
+        this.disableTimeFilterApplyButton();
     }
-    selectUnselectAllRows() {
-        this.toggleHeaderCheckbox.emit();
+    changeEndTimeHour(increment) {
+        if (increment) {
+            this.incrementHour(this.selectedToTime);
+        }
+        else {
+            this.decrementHour(this.selectedToTime);
+        }
+        this.disableTimeFilterApplyButton();
     }
-    selectUnselectRow(rowData) {
-        this.toggleRowCheckbox.emit(rowData);
+    changeEndTimeMinute(increment) {
+        if (increment) {
+            this.incrementMinute(this.selectedToTime);
+        }
+        else {
+            this.decrementMinute(this.selectedToTime);
+        }
+        this.disableTimeFilterApplyButton();
     }
-    undoCreditedSpot(data) {
-        this.undoIconClicked.emit({ data, mgOrCredit: "Credit" });
+    changeStartTimeMinute(increment) {
+        if (increment) {
+            this.incrementMinute(this.selectedFromTime);
+        }
+        else {
+            this.decrementMinute(this.selectedFromTime);
+        }
+        this.disableTimeFilterApplyButton();
     }
-    undoMgSpot(data) {
-        this.undoIconClicked.emit({ data, mgOrCredit: "MakeGood" });
+    applyTimeFilters() {
+        let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
+        let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
+        let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
+        let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":00";
+        let previousSelectedData;
+        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedData = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        }
+        else {
+            previousSelectedData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        let selectedData = {
+            fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.annaFilterService.includeMultiTime,
+            includeZero: this.annaFilterService.includeZeroTime, includeTimeRange: this.annaFilterService.includeTimeRange
+        };
+        if (!isEqual(previousSelectedData, selectedData)) {
+            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, selectedData);
+            this.annaFilterService.reOrderAppliedFiltersArray(false);
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+            this.checkIfSortingIsApplied();
+            this.filterAppliedToTable.emit(this.tableData);
+            // this.generateTableDataWrapper();
+            this.disableEnableEachColumnFilters();
+        }
+        this.closeTooltip();
     }
-    //Sort and Filter Logic begins!
-    closeTooltip() {
-        if (this.tooltip && this.tooltip.isOpen()) {
-            this.tooltip.close();
+    closeTimeFilter() {
+        this.selectedFromTime = cloneDeep(this.clonedSelectedFromTime);
+        this.selectedToTime = cloneDeep(this.clonedSelectedToTime);
+        this.closeTooltip();
+    }
+    disableTimeFilterApplyButton() {
+        let timeFormat = "HH:mm:ss";
+        let startTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
+        let startTime24HrFormat = startTime24HrFormatArr[0] + ":" + startTime24HrFormatArr[1] + ":00";
+        let endTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
+        let endTime24HrFormat = endTime24HrFormatArr[0] + ":" + endTime24HrFormatArr[1] + ":00";
+        this.disableTimeFilterApplyBtn = moment(startTime24HrFormat, timeFormat).isAfter(moment(endTime24HrFormat, timeFormat));
+        if (!this.multiTimeCheckboxChecked && !this.zeroTimeCheckboxChecked && !this.enterTimeCheckboxChecked) {
+            this.disableTimeFilterApplyBtn = true;
         }
-        this.tooltip = null;
-        this.disableCheckboxApply = false;
-        if (!this.bindValueFuncCalled) {
-            this.columnFilterClosed.emit();
+    }
+    sortedData(event) {
+        if (event.type == "none") {
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
         }
+        else {
+            this.tableData = event.data;
+        }
+        this.sortingAppliedToTable.emit(this.tableData);
+        // this.generateTableDataWrapper();
     }
-    closeSortTooltip() {
-        if (this.annaSortService.tooltip && this.annaSortService.tooltip.isOpen()) {
-            this.annaSortService.tooltip.close();
+    checkIfSortingIsApplied() {
+        let appliedkey;
+        let isAsc;
+        const arr = this.sortComponent.toArray();
+        let obj = this.annaSortService.checkIfSortingIsApplied(this.annaSortService.sortByAsc, true);
+        appliedkey = obj.key;
+        isAsc = obj.setValueTo;
+        if (!appliedkey) {
+            let obj = this.annaSortService.checkIfSortingIsApplied(this.annaSortService.sortByDesc, false);
+            appliedkey = obj.key;
+            isAsc = obj.setValueTo;
+        }
+        if (appliedkey) {
+            this.applySorting(arr, appliedkey, isAsc);
         }
     }
-    initFilters() {
-        this.annaFilterService.tooltipMap = new Map();
-        this.annaFilterService.tooltipSelectedMap = new Map();
-        this.annaSortService.sortByAsc = new Map();
-        this.annaSortService.sortByDesc = new Map();
-        this.annaFilterService.selectedRadio = null;
-        this.annaFilterService.appliedFiltersArray = [];
-        //closing the sort tooltip if we route on the same route or if we click dropdown filters
-        this.closeSortTooltip();
-        this.annaSortService.tooltip = null;
-        this.disableClearAllBtn = true;
-        this.disableTimeFilterApplyBtn = false;
+    applySorting(sortComponentArr, appliedKey, isAsc) {
+        sortComponentArr.forEach((component) => {
+            if (component.sortBy === appliedKey) {
+                this.setSortComponentDataProperty(component);
+                isAsc ? component.sortByAscending() : component.sortByDescending();
+            }
+        });
     }
-    setInitialValueMapData() {
-        this.annaFilterService.initialValueMap = new Map();
-        this.tableHeaders.forEach((column) => {
-            column.headerInfo.forEach((header) => {
-                if (header.filter === "SLIDER") {
-                    header.filterObjectKeys.forEach((key) => {
-                        let min = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, key, true);
-                        let max = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, key, false);
-                        let obj = { min, max };
-                        this.annaFilterService.initialValueMap.set(key, obj);
-                    });
-                }
-                else if (header.filter === "DATE") {
-                    header.filterObjectKeys.forEach((key) => {
+    setSortComponentDataProperty(sortComponent) {
+        sortComponent.data = this.tableData;
+        sortComponent.clonedData = cloneDeep(this.tableData);
+    }
+    disableEnableEachColumnFilters() {
+        this.tableHeaders.forEach(header => {
+            header.headerInfo.forEach(item => {
+                if (item.filter != "") {
+                    let values = [];
+                    item.disableFilter = true;
+                    item.filterObjectKeys.forEach(key => {
                         if (key == "period") {
-                            const minMaxStartDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "startDate");
-                            const minMaxEndDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "endDate");
-                            let dateObj = { minSelectedDate: minMaxStartDate[0], maxSelectedDate: minMaxEndDate[1] };
-                            this.annaFilterService.initialValueMap.set(key, dateObj);
-                        }
-                        else {
-                            const minMaxDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, key);
-                            let obj = { minSelectedDate: minMaxDate[0], maxSelectedDate: minMaxDate[1] };
-                            this.annaFilterService.initialValueMap.set(key, obj);
-                        }
-                    });
-                }
-                else if (header.filter === "TIME") {
-                    header.filterObjectKeys.forEach((key) => {
-                        let data = this.clonedTableData.filter((obj) => !["", "-", null, "0", "<multi>"].includes(obj[key]));
-                        let timeArr = map$1(data, key);
-                        timeArr.sort((a, b) => {
-                            return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
-                        });
-                        let obj = {
-                            fromTime: timeArr[0],
-                            toTime: timeArr[timeArr.length - 1],
-                        };
-                        if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
-                            let includeMulti = this.clonedTableData.findIndex((obj) => obj[key] == "<multi>") != -1;
-                            let includeZero = this.clonedTableData.findIndex((obj) => obj[key] == "0") != -1;
-                            let includeTimeRange = this.clonedTableData.findIndex((obj) => obj[key] != "0" && obj[key] != "<multi>") != -1;
-                            let obj = {
-                                fromTime: timeArr[0],
-                                toTime: timeArr[timeArr.length - 1],
-                                includeMulti: includeMulti,
-                                includeZero: includeZero,
-                                includeTimeRange: includeTimeRange
-                            };
-                            this.annaFilterService.initialValueMap.set(key, obj);
-                        }
-                        else if (this.gtGeneralConfig.component === "RATING") {
-                            let includeMulti = this.clonedTableData.findIndex((obj) => obj[key][0] == "<multi>") != -1;
-                            let includeZero = this.clonedTableData.findIndex((obj) => obj[key][0] == "0") != -1;
-                            let includeTimeRange = this.clonedTableData.findIndex((obj) => obj[key][0] != "0" && obj[key][0] != "<multi>") != -1;
-                            let startTimeArr = map$1(this.clonedTableData, "startTime");
-                            let endTimeArr = map$1(this.clonedTableData, "endTime");
-                            startTimeArr.sort((a, b) => {
-                                return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
-                            });
-                            endTimeArr.sort((a, b) => {
-                                return this.annaDateTimeFormatService.sortByTimeDescending(a, b);
-                            });
-                            let obj = {
-                                fromTime: startTimeArr[0],
-                                toTime: endTimeArr[0],
-                                includeMulti: includeMulti,
-                                includeZero: includeZero,
-                                includeTimeRange: includeTimeRange
-                            };
-                            this.annaFilterService.initialValueMap.set(key, obj);
+                            let uniqStartDate = uniq(this.tableData.map((u) => u["startDate"]));
+                            let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
+                            item.disableFilter = (uniqStartDate.length > 1 || uniqEndDate.length > 1) ? false : true;
                         }
                         else {
-                            this.annaFilterService.initialValueMap.set(key, obj);
+                            values = this.tableData.map((u) => u[key]);
+                            if (uniq(values).filter(n => n != null).length > 1) {
+                                item.disableFilter = false;
+                            }
                         }
-                    });
-                }
-            });
-        });
-    }
-    isTooltipActive(header) {
-        return this.annaFilterService.isTooltipActive(header);
-    }
-    bindTheValueToToolTip(tooltip, header) {
-        this.bindValueFuncCalled = true;
-        let containerToScroll;
-        if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "DRRLISTING") {
-            containerToScroll = document.getElementsByClassName("scrollable-container")[0];
-            var mediaQuery = window.matchMedia("(max-width: 1366px)");
-            if (mediaQuery.matches) {
-                containerToScroll.scroll(0, this.gtGeneralConfig.verticalScrollOffsetForFilterTooltip);
-            }
-        }
-        // if same tooltip opened close it
-        if (tooltip == this.tooltip) {
-            this.bindValueFuncCalled = false;
-            this.closeTooltip();
-        }
-        else {
-            this.searchBar = '';
-            let enabledHeaders = [];
-            header.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);
-                    }
+                    });
+                    // if(uniq(values).length > 1){
+                    //   item.disableFilter = false;
+                    // }else{
+                    //   item.disableFilter = true;
+                    // }
                 }
-                else if (uniq(this.tableData.map((u) => u[item])).length > 1 || this.isTooltipActive([item])) {
-                    enabledHeaders.push(item);
+                if (item.sort) {
+                    if (uniq(this.tableData.map((u) => u[item.objectKey])).length > 1) {
+                        item.disableSort = false;
+                    }
+                    else {
+                        item.disableSort = true;
+                    }
                 }
             });
-            this.openTooltip(tooltip, enabledHeaders);
-            if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header[0])) {
-                this.columnFilterOpened.emit();
-            }
-            this.showCheckboxFilterRadioButtons = enabledHeaders.length > 1;
-            this.populateTooltipDataBasedOnSelectedRadio(enabledHeaders[0]);
-            this.bindValueFuncCalled = false;
-        }
+        });
     }
-    openTooltip(tooltip, header) {
-        this.closeTooltip();
-        this.tooltip = tooltip;
-        this.tooltip.open();
-        //convert key into the header
-        this.radioButtons = header.map((key) => {
-            let value = this.tooltipRadioTextMap.has(key)
-                ? this.tooltipRadioTextMap.get(key)
-                : key; //change to display name
-            return new radioButtonModel$1(key, value);
+    ngAfterViewInit() {
+        this.annaGenericTableService.virtualScrollSubject.subscribe((val) => {
+            this.isScrolledLeft = document.getElementsByClassName("table-container")[0].scrollLeft > 0;
+            this.cdRef.detectChanges();
+        });
+        let container = document.getElementsByClassName("table-container")[0];
+        fromEvent(container, 'scroll')
+            .subscribe((event) => {
+            this.isScrolledLeft = event.target.scrollLeft > 0;
         });
     }
-    clearColumnFilter() {
-        this.annaFilterService.clearColumnFilter();
-        this.toolTipdata = null;
-        this.tempTooltipData = null;
-        this.closeTooltip();
-        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
-        this.checkIfSortingIsApplied();
-        this.filterAppliedToTable.emit(this.tableData);
-        this.disableEnableEachColumnFilters();
+    dataRowClicked(rowData) {
+        this.rowClicked.emit(rowData);
     }
-    populateTooltipDataBasedOnSelectedRadio(header) {
-        this.disableSliderApplyButton = false;
-        this.disableCheckboxApply = false;
-        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);
+    radioButtonClicked(data, action, isDisabled) {
+        if (!isDisabled) {
+            this.radioButtonSelected.emit({ data, action });
         }
     }
-    getSliderData(header) {
-        if (header === "Rate") {
-            this.annaFilterService.translateFunc = "currency";
-        }
-        else {
-            this.annaFilterService.translateFunc = "normal";
-        }
-        this.options = this.annaFilterService.populateSliderTooltip(this.clonedTableData, this.tableData);
-        this.disableSliderApplyButton = this.disableSliderApplyBtn();
-        let selectedTooltipObj;
-        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
-            selectedTooltipObj = this.annaFilterService.tooltipSelectedMap.get(header);
-        }
-        else {
-            selectedTooltipObj = this.annaFilterService.initialValueMap.get(header);
-        }
-        this.sliderMinValue = selectedTooltipObj.min < this.options.floor ? this.options.floor : selectedTooltipObj.min;
-        this.sliderMaxValue = selectedTooltipObj.max < this.options.ceil ? selectedTooltipObj.max : this.options.ceil;
-        //default step values
-        this.options.step = 1;
-        this.sliderFilterTextBoxStep = "1";
-        if (header !== "WeekNumber") {
-            this.options.step = 0.1;
-            this.sliderFilterTextBoxStep = "0.1";
+    bindTheValueToSellerGroupTooltip(sellerGroupHierarchy, tooltip) {
+        if (this.hierarchyTooltip && this.hierarchyTooltip.open) {
+            this.hierarchyTooltip.close();
         }
+        this.sellerGroupHierarchy = sellerGroupHierarchy;
+        this.hierarchyTooltip = tooltip;
+        this.hierarchyTooltip.open();
     }
-    getCheckboxData(header) {
-        this.tempTooltipData = this.annaFilterService.populateTooltip(header, this.clonedTableData, this.tableData);
-        this.allSelected = this.annaFilterService.isAllOptionsSelected();
-        this.showAll = this.tempTooltipData.filter((x) => !x.isHidden).length > 1 ? true : false;
-        this.toolTipdata = cloneDeep(this.tempTooltipData);
+    iconClicked(rowData, iconClass) {
+        this.gtIconClicked.emit({ data: rowData, iconClass: iconClass });
     }
-    getCalendarData() {
-        const parsingFormat = "MM/DD/YYYY";
-        let minMaxdate = this.annaFilterService.populateDatePickerTooltipWithData(this.clonedTableData, this.tableData);
-        let selectedDateObj;
-        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
-            selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
-        }
-        else {
-            selectedDateObj = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
-        }
-        // For startDate
-        // selected date is less than date which we get
-        if ((selectedDateObj.minSelectedDate).isAfter(minMaxdate.minStartDate)) {
-            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.minSelectedDate, parsingFormat);
-        }
-        else {
-            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.minStartDate, parsingFormat);
-        }
-        // For endData
-        // selectedDate is less than date which we get
-        if ((selectedDateObj.maxSelectedDate).isAfter(minMaxdate.maxEndDate)) {
-            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.maxEndDate, parsingFormat);
-        }
-        else {
-            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.maxSelectedDate, parsingFormat);
+    svgIconClicked(rowData, key) {
+        this.gtSVGIconClicked.emit({ data: rowData, key: key });
+    }
+    textActionClicked(rowData, id) {
+        this.gtTextActionClicked.emit({ data: rowData, id });
+    }
+    viewDetailsClicked(rowData) {
+        this.gtViewDetailClicked.emit({ data: rowData });
+    }
+    setIsDifference(value) {
+        this.isDifferenceLessThan25Percent = value;
+    }
+}
+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    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + 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 [dataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length) ||\r\n                    (!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.sort\">\r\n                                <anna-core-sort-lib\r\n                                    [sortBy]=\"header.sortObjectKey ? header.sortObjectKey : header.objectKey\"\r\n                                    [data]=\"tableData\"\r\n                                    [disableSort]=\"header.disableSort\"\r\n                                    (sort)=\"sortedData($event)\"\r\n                                >\r\n                                </anna-core-sort-lib>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                <span\r\n                                    class=\"mdi mdi-filter\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\r\n                                    }\"\r\n                                    [ngbTooltip]=\"datePickerTooltip\"\r\n                                    placement=\"left-top auto\"\r\n                                    container=\"body\"\r\n                                    [autoClose]=\"'outside'\"\r\n                                    triggers=\"manual\"\r\n                                    #t2=\"ngbTooltip\"\r\n                                    (click)=\"bindTheValueToToolTip(t2, header.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\r\n                                    (hidden)=\"closeTooltip()\"\r\n                                >\r\n                                </span\r\n                                ><br />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === ''\"> <span id=\"no-filter-space\"></span><br /> </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\r\n                                            <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                            class=\"mdi mdi-alert-circle-outline seller-tooltip\"\r\n                                            placement=\"bottom auto\"\r\n                                            container=\"body\"\r\n                                            [autoClose]=\"true\"\r\n                                            (mouseenter)=\"isDifferenceLessThan25Percent = ROW_DATA.isDifferenceLessThan25Percent\"\r\n                                            tooltipClass=\"posted-avg-tooltip\"\r\n                                            [ngbTooltip]=\"postedRatingDifference\"\r\n                                        >\r\n                                        </i>\r\n                                        \r\n                                        <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                            class=\"mdi mdi-alert-circle-outline seller-tooltip\"\r\n                                            placement=\"bottom auto\"\r\n                                            container=\"body\"\r\n                                            [autoClose]=\"true\"\r\n                                            (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                            tooltipClass=\"posted-avg-tooltip\"\r\n                                            [ngbTooltip]=\"postedImpDifference\"\r\n                                        >\r\n                                        </i>\r\n                                        </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      </div>\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    <div class=\"radio-container\" *ngIf=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\r\n    <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\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)]=\"searchBar\"\r\n        />\r\n    </p>\r\n    <div class=\"dropdown-data-container\">\r\n        <ng-container *ngIf=\"showAll\">\r\n            <p class=\"input\" (click)=\"allOptionClicked()\">\r\n                <span *ngIf=\"allSelected == 1\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"allSelected == 0\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span *ngIf=\"allSelected == 2\" role=\"button\" class=\"mi mdi-indeterminate-check-box check-box\"></span>\r\n                <span class=\"data\">All</span>\r\n            </p>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let data of tempTooltipData | AnnafilterSearchedText: searchBar\">\r\n            <p *ngIf=\"!data.isHidden\" class=\"input\" (click)=\"isCheckboxSelected(data)\">\r\n                <span *ngIf=\"data.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!data.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ data.data }}\">{{ data.data }}</span>\r\n            </p>\r\n        </ng-container>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\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    <section class=\"min-maxContainer\">\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMinValue\"\r\n            (ngModelChange)=\"minValueChanged($event)\"\r\n            placeholder=\"Min\"\r\n        />\r\n        <span>To</span>\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMaxValue\"\r\n            (ngModelChange)=\"maxValueChanged($event)\"\r\n            placeholder=\"Max\"\r\n        />\r\n    </section>\r\n    <div class=\"sidebar-slider\">\r\n        <ngx-slider\r\n            [(value)]=\"sliderMinValue\"\r\n            [(highValue)]=\"sliderMaxValue\"\r\n            [options]=\"options\"\r\n            (valueChange)=\"sliderValueChange()\"\r\n            (highValueChange)=\"sliderValueChange()\"\r\n        ></ngx-slider>\r\n    </div>\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=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\r\n        </div>\r\n      </div>\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            (apply)=\"applyDateFilter($event)\"\r\n            (cancel)=\"cancelInDateFilter()\"\r\n        >\r\n        </anna-core-calendar-filter-lib>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component != 'RATING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\"\r\n                *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\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    <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>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n", styles: [".sort{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}::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:22px;cursor:pointer}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 .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#268bff!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 .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}::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;padding:.125rem .125rem .125rem .25rem;border-radius:.125rem;margin:.4375rem .4375rem .25rem}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:5px 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.14;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}.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:left;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.disabled,span.mdi-calendar-range.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}.upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a!important;margin-bottom:0!important}:host ::ng-deep .gt{table-layout:fixed;margin-bottom:0;width:100%}:host ::ng-deep .gt th,:host ::ng-deep .gt td{padding:2px 8px;line-height:normal}:host ::ng-deep .gt thead tr th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt thead tr th .lower-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt thead tr th{background-color:#ededed;position:sticky;position:-webkit-sticky;top:0;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}:host ::ng-deep .gt thead tr th br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt thead tr th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center}:host ::ng-deep .gt thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td .upper-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#000;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr td .lower-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#a7a7a7;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr:nth-of-type(1) td{border-top:none!important}:host ::ng-deep .gt .custom-column-checkbox-checked,:host ::ng-deep .gt .custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}:host ::ng-deep .gt .custom-column-checkbox-checked{color:#268bff}:host ::ng-deep .gt .custom-column-checkbox-unchecked{color:#4a4a4a}.table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}.table-container::-webkit-scrollbar{width:5px;height:5px}.table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.table-container{overflow-x:auto;overflow-y:auto}.rowSelectCheckbox,#selectAllRowsCheckbox{cursor:pointer}.disable-checkbox{color:#dedede!important;pointer-events:none!important}.mdi-warning{color:#f3c639;font-size:16px;line-height:28px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}.redcolor-status{color:#c62a2a}.redcolor-cell-border{outline:1px solid #ff5353!important;outline-offset:-1px!important}#no-filter-space{width:.875rem}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:1.875rem!important;width:2.625rem;padding:0 .625rem}input.numberInput{margin-right:-.8125rem;padding:0 0 0 .625rem;height:1.875rem}::ng-deep .mat-button-toggle-checked{background-color:#268bff!important;color:#fff!important}::ng-deep .mat-button-toggle-group-appearance-standard{border-radius:0}.hidden{display:none}.no-data-div{margin-top:2.5px}.no-data-div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:.3125rem 1.125rem;border-radius:.25rem}.column-values:nth-of-type(2){color:#a7a7a7!important}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#4a4a4a}.time-filter-checkboxes>div>p{color:#151b1e}.radio-button-dimension,::ng-deep .markForCredit .mat-radio-inner-circle,::ng-deep .markForCredit .mat-radio-outer-circle,::ng-deep .mark-for-credit .mat-radio-inner-circle,::ng-deep .mark-for-credit .mat-radio-outer-circle,::ng-deep .markForMakeGood .mat-radio-inner-circle,::ng-deep .markForMakeGood .mat-radio-outer-circle,::ng-deep .noAction .mat-radio-inner-circle,::ng-deep .noAction .mat-radio-outer-circle,::ng-deep .credit .mat-radio-inner-circle,::ng-deep .credit .mat-radio-outer-circle,::ng-deep .approve .mat-radio-inner-circle,::ng-deep .approve .mat-radio-outer-circle,::ng-deep .reject .mat-radio-inner-circle,::ng-deep .reject .mat-radio-outer-circle,::ng-deep .resubmit .mat-radio-inner-circle,::ng-deep .resubmit .mat-radio-outer-circle,::ng-deep .rejectCreditRequest .mat-radio-inner-circle,::ng-deep .rejectCreditRequest .mat-radio-outer-circle{height:18px!important;width:18px!important}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:red}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:red}::ng-deep .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle{border-color:#00000061!important}::ng-deep .mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-inner-circle{background-color:#00000061!important}::ng-deep tr.white-background-row{background:white}::ng-deep tr.gray-background-row{background:rgba(233,233,233,.5)}.remarks-tooltip,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{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}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}\n"], components: [{ type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["data", "sortBy", "disableSort", "placement"], outputs: ["sort"] }, { 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: i6.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: i7.AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "minDate", "showDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { type: i7.AnnaWeekCalendarComponent, selector: "anna-core-week-calendar-filter-lib", inputs: ["from-date", "to-date", "disabled-dates", "maxDate", "minDate", "week-calendar-config"], outputs: ["apply", "toggle-calendar"] }, { type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.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: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2.MatCellDef, selector: "[matCellDef]" }, { type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i11.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i11.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: i11.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], pipes: { "AnnafilterSearchedText": i1$1.AnnaFilterSearchedTextPipe } });
+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    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + 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 [dataSource]=\"tableData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length) ||\r\n                    (!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.sort\">\r\n                                <anna-core-sort-lib\r\n                                    [sortBy]=\"header.sortObjectKey ? header.sortObjectKey : header.objectKey\"\r\n                                    [data]=\"tableData\"\r\n                                    [disableSort]=\"header.disableSort\"\r\n                                    (sort)=\"sortedData($event)\"\r\n                                >\r\n                                </anna-core-sort-lib>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                <span\r\n                                    class=\"mdi mdi-filter\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\r\n                                    }\"\r\n                                    [ngbTooltip]=\"datePickerTooltip\"\r\n                                    placement=\"left-top auto\"\r\n                                    container=\"body\"\r\n                                    [autoClose]=\"'outside'\"\r\n                                    triggers=\"manual\"\r\n                                    #t2=\"ngbTooltip\"\r\n                                    (click)=\"bindTheValueToToolTip(t2, header.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\r\n                                    (hidden)=\"closeTooltip()\"\r\n                                >\r\n                                </span\r\n                                ><br />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === ''\"> <span id=\"no-filter-space\"></span><br /> </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\r\n                                            <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                            class=\"mdi mdi-alert-circle-outline seller-tooltip\"\r\n                                            placement=\"bottom auto\"\r\n                                            container=\"body\"\r\n                                            [autoClose]=\"true\"\r\n                                            (mouseenter)=\"isDifferenceLessThan25Percent = ROW_DATA.isDifferenceLessThan25Percent\"\r\n                                            tooltipClass=\"posted-avg-tooltip\"\r\n                                            [ngbTooltip]=\"postedRatingDifference\"\r\n                                        >\r\n                                        </i>\r\n                                        \r\n                                        <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                            class=\"mdi mdi-alert-circle-outline seller-tooltip\"\r\n                                            placement=\"bottom auto\"\r\n                                            container=\"body\"\r\n                                            [autoClose]=\"true\"\r\n                                            (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                            tooltipClass=\"posted-avg-tooltip\"\r\n                                            [ngbTooltip]=\"postedImpDifference\"\r\n                                        >\r\n                                        </i>\r\n                                        </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      </div>\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    <div class=\"radio-container\" *ngIf=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\r\n    <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\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)]=\"searchBar\"\r\n        />\r\n    </p>\r\n    <div class=\"dropdown-data-container\">\r\n        <ng-container *ngIf=\"showAll\">\r\n            <p class=\"input\" (click)=\"allOptionClicked()\">\r\n                <span *ngIf=\"allSelected == 1\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"allSelected == 0\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span *ngIf=\"allSelected == 2\" role=\"button\" class=\"mi mdi-indeterminate-check-box check-box\"></span>\r\n                <span class=\"data\">All</span>\r\n            </p>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let data of tempTooltipData | AnnafilterSearchedText: searchBar\">\r\n            <p *ngIf=\"!data.isHidden\" class=\"input\" (click)=\"isCheckboxSelected(data)\">\r\n                <span *ngIf=\"data.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!data.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ data.data }}\">{{ data.data }}</span>\r\n            </p>\r\n        </ng-container>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\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    <section class=\"min-maxContainer\">\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMinValue\"\r\n            (ngModelChange)=\"minValueChanged($event)\"\r\n            placeholder=\"Min\"\r\n        />\r\n        <span>To</span>\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMaxValue\"\r\n            (ngModelChange)=\"maxValueChanged($event)\"\r\n            placeholder=\"Max\"\r\n        />\r\n    </section>\r\n    <div class=\"sidebar-slider\">\r\n        <ngx-slider\r\n            [(value)]=\"sliderMinValue\"\r\n            [(highValue)]=\"sliderMaxValue\"\r\n            [options]=\"options\"\r\n            (valueChange)=\"sliderValueChange()\"\r\n            (highValueChange)=\"sliderValueChange()\"\r\n        ></ngx-slider>\r\n    </div>\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=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\r\n        </div>\r\n      </div>\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            (apply)=\"applyDateFilter($event)\"\r\n            (cancel)=\"cancelInDateFilter()\"\r\n        >\r\n        </anna-core-calendar-filter-lib>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component != 'RATING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\"\r\n                *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\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    <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>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n", styles: [".sort{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}::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:22px;cursor:pointer}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 .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#268bff!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 .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}::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;padding:.125rem .125rem .125rem .25rem;border-radius:.125rem;margin:.4375rem .4375rem .25rem}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:5px 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.14;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}.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:left;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.disabled,span.mdi-calendar-range.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}.upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a!important;margin-bottom:0!important}:host ::ng-deep .gt{table-layout:fixed;margin-bottom:0;width:100%}:host ::ng-deep .gt th,:host ::ng-deep .gt td{padding:2px 8px;line-height:normal}:host ::ng-deep .gt thead tr th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt thead tr th .lower-label{font-family:Roboto;font-size:.6875rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt thead tr th{background-color:#ededed;position:sticky;position:-webkit-sticky;top:0;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}:host ::ng-deep .gt thead tr th br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt thead tr th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center}:host ::ng-deep .gt thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}:host ::ng-deep .gt tbody tr td .upper-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#000;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr td .lower-label{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;color:#a7a7a7;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr:nth-of-type(1) td{border-top:none!important}:host ::ng-deep .gt .custom-column-checkbox-checked,:host ::ng-deep .gt .custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}:host ::ng-deep .gt .custom-column-checkbox-checked{color:#268bff}:host ::ng-deep .gt .custom-column-checkbox-unchecked{color:#4a4a4a}.table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important}.table-container::-webkit-scrollbar{width:5px;height:5px}.table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.table-container{overflow-x:auto;overflow-y:auto}.rowSelectCheckbox,#selectAllRowsCheckbox{cursor:pointer}.disable-checkbox{color:#dedede!important;pointer-events:none!important}.mdi-warning{color:#f3c639;font-size:16px;line-height:28px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}.redcolor-status{color:#c62a2a}.redcolor-cell-border{outline:1px solid #ff5353!important;outline-offset:-1px!important}#no-filter-space{width:.875rem}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:1.875rem!important;width:2.625rem;padding:0 .625rem}input.numberInput{margin-right:-.8125rem;padding:0 0 0 .625rem;height:1.875rem}::ng-deep .mat-button-toggle-checked{background-color:#268bff!important;color:#fff!important}::ng-deep .mat-button-toggle-group-appearance-standard{border-radius:0}.hidden{display:none}.no-data-div{margin-top:2.5px}.no-data-div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:.3125rem 1.125rem;border-radius:.25rem}.column-values:nth-of-type(2){color:#a7a7a7!important}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#4a4a4a}.time-filter-checkboxes>div>p{color:#151b1e}.radio-button-dimension,::ng-deep .markForCredit .mat-radio-inner-circle,::ng-deep .markForCredit .mat-radio-outer-circle,::ng-deep .mark-for-credit .mat-radio-inner-circle,::ng-deep .mark-for-credit .mat-radio-outer-circle,::ng-deep .markForMakeGood .mat-radio-inner-circle,::ng-deep .markForMakeGood .mat-radio-outer-circle,::ng-deep .noAction .mat-radio-inner-circle,::ng-deep .noAction .mat-radio-outer-circle,::ng-deep .credit .mat-radio-inner-circle,::ng-deep .credit .mat-radio-outer-circle,::ng-deep .approve .mat-radio-inner-circle,::ng-deep .approve .mat-radio-outer-circle,::ng-deep .reject .mat-radio-inner-circle,::ng-deep .reject .mat-radio-outer-circle,::ng-deep .resubmit .mat-radio-inner-circle,::ng-deep .resubmit .mat-radio-outer-circle,::ng-deep .rejectCreditRequest .mat-radio-inner-circle,::ng-deep .rejectCreditRequest .mat-radio-outer-circle{height:18px!important;width:18px!important}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .reject.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff0}::ng-deep .resubmit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:#ff0}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .noAction.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:green}::ng-deep .approve.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:green}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:red}::ng-deep .credit.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{background-color:red}::ng-deep .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle{border-color:#00000061!important}::ng-deep .mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-inner-circle{background-color:#00000061!important}::ng-deep tr.white-background-row{background:white}::ng-deep tr.gray-background-row{background:rgba(233,233,233,.5)}.remarks-tooltip,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{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}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}\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: [{
+                type: Input
+            }], tableData: [{
+                type: Input
+            }], clonedTableData: [{
+                type: Input
+            }], numberOfSkeletonRows: [{
+                type: Input
+            }], numberOfSkeletonColumns: [{
+                type: Input
+            }], gtGeneralConfig: [{
+                type: Input
+            }], totalRowInfo: [{
+                type: Input
+            }], gtDimension: [{
+                type: Input
+            }], tableClass: [{
+                type: Input
+            }], maximumRowsWhichCanBeRenderedWithoutScroll: [{
+                type: Input
+            }], toggleCheckbox: [{
+                type: Output
+            }], toggleRowCheckbox: [{
+                type: Output
+            }], toggleHeaderCheckbox: [{
+                type: Output
+            }], undoIconClicked: [{
+                type: Output
+            }], filterAppliedToTable: [{
+                type: Output
+            }], sortingAppliedToTable: [{
+                type: Output
+            }], rowClicked: [{
+                type: Output
+            }], radioButtonSelected: [{
+                type: Output
+            }], columnFilterOpened: [{
+                type: Output
+            }], columnFilterClosed: [{
+                type: Output
+            }], gtIconClicked: [{
+                type: Output
+            }], gtSVGIconClicked: [{
+                type: Output
+            }], gtTextActionClicked: [{
+                type: Output
+            }], gtViewDetailClicked: [{
+                type: Output
+            }], sortComponent: [{
+                type: ViewChildren,
+                args: [AnnaSortComponent]
+            }] } });
+
+/** Checks if the given ranges are equal. */
+function rangesEqual(r1, r2) {
+    return r1.start == r2.start && r1.end == r2.end;
+}
+/**
+ * Scheduler to be used for scroll events. Needs to fall back to
+ * something that doesn't rely on requestAnimationFrame on environments
+ * that don't support it (e.g. server-side rendering).
+ */
+const SCROLL_SCHEDULER = typeof requestAnimationFrame !== "undefined"
+    ? animationFrameScheduler
+    : asapScheduler;
+/**
+ * A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`.
+ * Uses `top: #px` instead of `transform: translateY(#px)` like the cdk virtual scroll viewport does
+ * which avoids flickering of elements in the transformed container with `position: sticky`.
+ */
+class AnnaTableVirtualScrollViewportComponent extends CdkScrollable {
+    constructor(elementRef, _changeDetectorRef, ngZone, _scrollStrategy, dir, scrollDispatcher, viewportRuler, annaGtService) {
+        super(elementRef, scrollDispatcher, ngZone, dir);
+        this.elementRef = elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._scrollStrategy = _scrollStrategy;
+        this.annaGtService = annaGtService;
+        /** Emits when the viewport is detached from a CdkVirtualForOf. */
+        this._detachedSubject = new Subject();
+        /** Emits when the rendered range changes. */
+        this._renderedRangeSubject = new Subject();
+        this._orientation = "vertical";
+        // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll
+        // strategy lazily (i.e. only if the user is actually listening to the events). We do this because
+        // depending on how the strategy calculates the scrolled index, it may come at a cost to
+        // performance.
+        /** Emits when the index of the first element visible in the viewport changes. */
+        this.scrolledIndexChange = new Observable((observer) => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
+        /** A stream that emits whenever the rendered range changes. */
+        this.renderedRangeStream = this._renderedRangeSubject;
+        /**
+         * The total size of all content (in pixels), including content that is not currently rendered.
+         */
+        this._totalContentSize = 0;
+        /** A string representing the `style.width` property value to be used for the spacer element. */
+        this._totalContentWidth = "";
+        /** A string representing the `style.height` property value to be used for the spacer element. */
+        this._totalContentHeight = "";
+        /** The currently rendered range of indices. */
+        this._renderedRange = { start: 0, end: 0 };
+        /** The length of the data bound to this viewport (in number of items). */
+        this._dataLength = 0;
+        /** The size of the viewport (in pixels). */
+        this._viewportSize = 0;
+        /** The last rendered content offset that was set. */
+        this._renderedContentOffset = 0;
+        /**
+         * Whether the last rendered content offset was to the end of the content (and therefore needs to
+         * be rewritten as an offset to the start of the content).
+         */
+        this._renderedContentOffsetNeedsRewrite = false;
+        /** Whether there is a pending change detection cycle. */
+        this._isChangeDetectionPending = false;
+        /** A list of functions to run after the next change detection cycle. */
+        this._runAfterChangeDetection = [];
+        /** Subscription to changes in the viewport size. */
+        this._viewportChanges = Subscription.EMPTY;
+        if (!_scrollStrategy) {
+            throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
         }
-        this.calendarMinEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.minStartDate, parsingFormat);
-        this.calendarMaxEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.maxEndDate, parsingFormat);
+        this._viewportChanges = viewportRuler.change().subscribe(() => {
+            this.checkViewportSize();
+        });
     }
-    getTimeFilterData(header) {
-        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
-            this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
-            this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
-        }
-        else {
-            this.selectedFromTime = this.annaFilterService.initialValueMap.get(header).fromTime;
-            this.selectedToTime = this.annaFilterService.initialValueMap.get(header).toTime;
-        }
-        if (this.selectedFromTime != undefined || this.selectedToTime != undefined) {
-            this.selectedFromTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedFromTime, true);
-            this.selectedToTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedToTime, true);
-            this.clonedSelectedFromTime = cloneDeep(this.selectedFromTime);
-            this.clonedSelectedToTime = cloneDeep(this.selectedToTime);
-        }
-        else {
-            this.selectedFromTime = ["-", "-", "-"];
-            this.selectedToTime = ["-", "-", "-"];
-            this.disableTimeFilterApplyBtn = true;
-        }
-        if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
-            this.showMultiTimeCheckbox = false;
-            this.showZeroTimeCheckbox = false;
-            this.showEnterTimeCheckbox = false;
-            if (this.clonedTableData.findIndex((obj) => obj[header] == "0") != -1) {
-                this.showZeroTimeCheckbox = true;
-                this.annaFilterService.includeZeroTime = this.tableData.findIndex((obj) => obj[header] == "0") != -1;
-                this.zeroTimeCheckboxChecked = this.annaFilterService.includeZeroTime;
-            }
-            if (this.clonedTableData.findIndex((obj) => obj[header] == "<multi>") != -1) {
-                this.showMultiTimeCheckbox = true;
-                this.annaFilterService.includeMultiTime = this.tableData.findIndex((obj) => obj[header] == "<multi>") != -1;
-                this.multiTimeCheckboxChecked = this.annaFilterService.includeMultiTime;
-            }
-            if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
-                this.showEnterTimeCheckbox = true;
-            }
-            if (this.clonedTableData.findIndex((obj) => obj[header] != "<multi>" && obj[header] != "0") != -1) {
-                this.annaFilterService.includeTimeRange = this.tableData.findIndex((obj) => obj[header] != "<multi>" && obj[header] != "0") != -1;
-                this.enterTimeCheckboxChecked = this.annaFilterService.includeTimeRange;
-            }
+    /** The direction the viewport scrolls. */
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(orientation) {
+        if (this._orientation !== orientation) {
+            this._orientation = orientation;
+            this._calculateSpacerSize();
         }
-        else if (this.gtGeneralConfig.component === "RATING") {
-            this.showMultiTimeCheckbox = false;
-            this.showZeroTimeCheckbox = false;
-            this.showEnterTimeCheckbox = false;
-            if (this.clonedTableData.findIndex((obj) => obj[header][0] == "0") != -1) {
-                this.showZeroTimeCheckbox = true;
-                this.annaFilterService.includeZeroTime = this.tableData.findIndex((obj) => obj[header][0] == "0") != -1;
-                this.zeroTimeCheckboxChecked = this.annaFilterService.includeZeroTime;
-            }
-            if (this.clonedTableData.findIndex((obj) => obj[header][0] == "<multi>") != -1) {
-                this.showMultiTimeCheckbox = true;
-                this.annaFilterService.includeMultiTime = this.tableData.findIndex((obj) => obj[header][0] == "<multi>") != -1;
-                this.multiTimeCheckboxChecked = this.annaFilterService.includeMultiTime;
-            }
-            if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
-                this.showEnterTimeCheckbox = true;
-            }
-            if (this.clonedTableData.findIndex((obj) => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1) {
-                this.annaFilterService.includeTimeRange = this.tableData.findIndex((obj) => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1;
-                this.enterTimeCheckboxChecked = this.annaFilterService.includeTimeRange;
-            }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // It's still too early to measure the viewport at this point. Deferring with a promise allows
+        // the Viewport to be rendered with the correct size before we measure. We run this outside the
+        // zone to avoid causing more change detection cycles. We handle the change detection loop
+        // ourselves instead.
+        this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
+            this._measureViewportSize();
+            this._scrollStrategy.attach(this);
+            this.elementScrolled()
+                .pipe(
+            // Start off with a fake scroll event so we properly detect our initial position.
+            startWith(null), 
+            // Collect multiple events into one until the next animation frame. This way if
+            // there are multiple scroll events in the same frame we only need to recheck
+            // our layout once.
+            auditTime(0, SCROLL_SCHEDULER))
+                .subscribe(() => { this._scrollStrategy.onContentScrolled(); this.annaGtService.virtualScrollSubject.next(true); });
+            this._markChangeDetectionNeeded();
+        }));
+    }
+    ngOnDestroy() {
+        this.detach();
+        this._scrollStrategy.detach();
+        // Complete all subjects
+        this._renderedRangeSubject.complete();
+        this._detachedSubject.complete();
+        this._viewportChanges.unsubscribe();
+        super.ngOnDestroy();
+    }
+    /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */
+    attach(forOf) {
+        if (this._forOf) {
+            throw Error("CdkVirtualScrollViewport is already attached.");
         }
+        // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
+        // changes. Run outside the zone to avoid triggering change detection, since we're managing the
+        // change detection loop ourselves.
+        this.ngZone.runOutsideAngular(() => {
+            this._forOf = forOf;
+            this._forOf.dataStream
+                .pipe(takeUntil(this._detachedSubject))
+                .subscribe(data => {
+                const newLength = data.length;
+                if (newLength !== this._dataLength) {
+                    this._dataLength = newLength;
+                    this._scrollStrategy.onDataLengthChanged();
+                }
+                this._doChangeDetection();
+            });
+        });
     }
-    selectOrUnselectMultiTimeCheckbox() {
-        this.multiTimeCheckboxChecked = !this.multiTimeCheckboxChecked;
-        this.annaFilterService.includeMultiTime = !this.annaFilterService.includeMultiTime;
-        this.disableTimeFilterApplyButton();
+    /** Detaches the current `CdkVirtualForOf`. */
+    detach() {
+        this._forOf = null;
+        this._detachedSubject.next();
     }
-    selectOrUnselectZeroTimeCheckbox() {
-        this.zeroTimeCheckboxChecked = !this.zeroTimeCheckboxChecked;
-        this.annaFilterService.includeZeroTime = !this.annaFilterService.includeZeroTime;
-        this.disableTimeFilterApplyButton();
+    /** Gets the length of the data bound to this viewport (in number of items). */
+    getDataLength() {
+        return this._dataLength;
     }
-    selectOrUnselectEnterTimeCheckbox() {
-        this.enterTimeCheckboxChecked = !this.enterTimeCheckboxChecked;
-        this.annaFilterService.includeTimeRange = !this.annaFilterService.includeTimeRange;
-        this.disableTimeFilterApplyButton();
+    /** Gets the size of the viewport (in pixels). */
+    getViewportSize() {
+        return this._viewportSize;
     }
-    disableSliderApplyBtn() {
-        return this.options.floor === this.options.ceil;
+    // TODO(mmalerba): This is technically out of sync with what's really rendered until a render
+    // cycle happens. I'm being careful to only call it after the render cycle is complete and before
+    // setting it to something else, but its error prone and should probably be split into
+    // `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
+    /** Get the current rendered range of items. */
+    getRenderedRange() {
+        return this._renderedRange;
     }
-    isCheckboxSelected(data) {
-        this.allSelected = this.annaFilterService.isCheckboxSelected(data);
-        if (this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).filter((x) => x.isSelected && !x.isHidden).length == 0) {
-            this.disableCheckboxApply = true;
-        }
-        else {
-            this.disableCheckboxApply = false;
+    /**
+     * Sets the total size of all content (in pixels), including content that is not currently
+     * rendered.
+     */
+    setTotalContentSize(size) {
+        if (this._totalContentSize !== size) {
+            this._totalContentSize = size;
+            this._calculateSpacerSize();
+            this._markChangeDetectionNeeded();
         }
     }
-    minValueChanged(value) {
-        if (isNaN(+value)) {
-            this.sliderMinValue = +this.options.floor;
+    /** Sets the currently rendered range of indices. */
+    setRenderedRange(range) {
+        if (!rangesEqual(this._renderedRange, range)) {
+            this._renderedRangeSubject.next((this._renderedRange = range));
+            this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());
         }
-        else {
-            if (+value > this.sliderMaxValue) {
-                this.sliderMinValue = this.sliderMaxValue;
-            }
-            else if (+value < this.options.floor) {
-                this.sliderMinValue = this.options.floor;
-            }
-            else {
-                this.sliderMinValue = +value;
-            }
+    }
+    /**
+     * Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
+     */
+    getOffsetToRenderedContentStart() {
+        return this._renderedContentOffsetNeedsRewrite
+            ? null
+            : this._renderedContentOffset;
+    }
+    /**
+     * Sets the offset from the start of the viewport to either the start or end of the rendered data
+     * (in pixels).
+     */
+    setRenderedContentOffset(offset) {
+        let top = `${Number(offset)}px`;
+        this._renderedContentOffset = offset;
+        if (this._renderedContentTransform != top) {
+            // We know this value is safe because we parse `offset` with `Number()` before passing it
+            // into the string.
+            this._renderedContentTransform = top;
+            this._markChangeDetectionNeeded(() => {
+                if (this._renderedContentOffsetNeedsRewrite) {
+                    this._renderedContentOffset -= this.measureRenderedContentSize();
+                    this._renderedContentOffsetNeedsRewrite = false;
+                    this.setRenderedContentOffset(this._renderedContentOffset);
+                }
+                else {
+                    this._scrollStrategy.onRenderedOffsetChanged();
+                }
+            });
         }
     }
-    maxValueChanged(value) {
-        if (isNaN(+value)) {
-            this.sliderMaxValue = +this.options.ceil;
-        }
-        else {
-            if (+value < this.sliderMinValue) {
-                this.sliderMaxValue = this.sliderMinValue;
-            }
-            else if (+value > this.options.ceil) {
-                this.sliderMinValue = this.options.ceil;
-            }
-            else {
-                this.sliderMaxValue = +value;
-            }
+    /**
+     * Scrolls to the given offset from the start of the viewport. Please note that this is not always
+     * the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
+     * direction, this would be the equivalent of setting a fictional `scrollRight` property.
+     * @param offset The offset to scroll to.
+     * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
+     */
+    scrollToOffset(offset, behavior = "auto") {
+        const options = { behavior, top: offset };
+        this.scrollTo(options);
+    }
+    /**
+     * Scrolls to the offset for the given index.
+     * @param index The index of the element to scroll to.
+     * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
+     */
+    scrollToIndex(index, behavior = "auto") {
+        this._scrollStrategy.scrollToIndex(index, behavior);
+    }
+    /**
+     * Gets the current scroll offset from the start of the viewport (in pixels).
+     * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
+     *     in horizontal mode.
+     */
+    //  CHANGES@ANNALIB added override to functions
+    measureScrollOffset(from) {
+        return from
+            ? super.measureScrollOffset(from)
+            : super.measureScrollOffset("top");
+    }
+    /** Measure the combined size of all of the rendered items. */
+    measureRenderedContentSize() {
+        const contentEl = this._contentWrapper.nativeElement;
+        return contentEl.offsetHeight;
+    }
+    /**
+     * Measure the total combined size of the given range. Throws if the range includes items that are
+     * not rendered.
+     */
+    measureRangeSize(range) {
+        if (!this._forOf) {
+            return 0;
         }
+        return this._forOf.measureRangeSize(range, this.orientation);
     }
-    sliderValueChange() {
-        this.sliderValue = { min: this.sliderMinValue, max: this.sliderMaxValue };
+    /** Update the viewport dimensions and re-render. */
+    checkViewportSize() {
+        // TODO: Cleanup later when add logic for handling content resize
+        this._measureViewportSize();
+        this._scrollStrategy.onDataLengthChanged();
     }
-    cancelSliderFilter() {
-        this.sliderValue = null;
-        this.closeTooltip();
+    /** Measure the viewport size. */
+    _measureViewportSize() {
+        const viewportEl = this.elementRef.nativeElement;
+        this._viewportSize = viewportEl.clientHeight;
     }
-    allOptionClicked() {
-        if (this.allSelected == 0 || this.allSelected == 2) {
-            this.allSelected = 1;
-            this.disableCheckboxApply = false;
+    /** Queue up change detection to run. */
+    _markChangeDetectionNeeded(runAfter) {
+        if (runAfter) {
+            this._runAfterChangeDetection.push(runAfter);
         }
-        else {
-            this.allSelected = 0;
-            this.disableCheckboxApply = true;
+        // Use a Promise to batch together calls to `_doChangeDetection`. This way if we set a bunch of
+        // properties sequentially we only have to run `_doChangeDetection` once at the end.
+        if (!this._isChangeDetectionPending) {
+            this._isChangeDetectionPending = true;
+            this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
+                this._doChangeDetection();
+            }));
         }
-        this.annaFilterService.allOptionsClicked(this.allSelected);
     }
-    applyFilters() {
-        let isSame = isEqual(this.toolTipdata, this.tempTooltipData);
-        this.toolTipdata = cloneDeep(this.tempTooltipData);
-        this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
-        if (!isSame) {
-            this.annaFilterService.reOrderAppliedFiltersArray(false);
-        }
-        let tooltipSelectedDataArray = this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).filter((x) => x.isSelected).map((x) => x.data);
-        if (tooltipSelectedDataArray.length == 0) {
-            tooltipSelectedDataArray = this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).map((x) => x.data);
+    /** Run change detection. */
+    _doChangeDetection() {
+        this._isChangeDetectionPending = false;
+        // Apply the content transform. The transform can't be set via an Angular binding because
+        // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
+        // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
+        // the `Number` function first to coerce it to a numeric value.
+        this._contentWrapper.nativeElement.style.top = this._renderedContentTransform;
+        // Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
+        // from the root, since the repeated items are content projected in. Calling `detectChanges`
+        // instead does not properly check the projected content.
+        this.ngZone.run(() => this._changeDetectorRef.markForCheck());
+        const runAfterChangeDetection = this._runAfterChangeDetection;
+        this._runAfterChangeDetection = [];
+        for (const fn of runAfterChangeDetection) {
+            fn();
         }
-        this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, tooltipSelectedDataArray);
-        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
-        this.checkIfSortingIsApplied();
-        this.filterAppliedToTable.emit(this.tableData);
-        // this.generateTableDataWrapper();
-        this.disableEnableEachColumnFilters();
-        this.closeTooltip();
     }
-    revert() {
-        this.tempTooltipData = cloneDeep(this.toolTipdata);
-        this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
-        this.toolTipdata = null;
+    /** Calculates the `style.width` and `style.height` for the spacer element. */
+    _calculateSpacerSize() {
+        this._totalContentHeight = `${this._totalContentSize}px`;
+        this._totalContentWidth = "";
     }
-    closeCheckboxFilter() {
-        if (this.toolTipdata) {
-            this.revert();
+}
+AnnaTableVirtualScrollViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaTableVirtualScrollViewportComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: VIRTUAL_SCROLL_STRATEGY, optional: true }, { token: i1$2.Directionality, optional: true }, { token: i2$1.ScrollDispatcher }, { token: i2$1.ViewportRuler }, { token: i1$1.AnnaGenericTableService }], target: i0.ɵɵFactoryTarget.Component });
+AnnaTableVirtualScrollViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaTableVirtualScrollViewportComponent, selector: "anna-table-virtual-scroll-viewport", inputs: { orientation: "orientation" }, outputs: { scrolledIndexChange: "scrolledIndexChange" }, host: { properties: { "class.anna-table-virtual-scroll-orientation-horizontal": "orientation === \"horizontal\"", "class.anna-table-virtual-scroll-orientation-vertical": "orientation !== \"horizontal\"" }, classAttribute: "anna-table-virtual-scroll-viewport" }, providers: [
+        {
+            provide: CdkScrollable,
+            useExisting: AnnaTableVirtualScrollViewportComponent
+        },
+        {
+            provide: CdkVirtualScrollViewport,
+            useExisting: AnnaTableVirtualScrollViewportComponent
         }
-        this.closeTooltip();
+    ], viewQueries: [{ propertyName: "_contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Wrap the rendered content in an element that will be used to offset it based on the scroll\r\n  position.\r\n-->\r\n<div #contentWrapper class=\"anna-table-virtual-scroll-content-wrapper\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<!--\r\n  Spacer used to force the scrolling container to the correct size for the *total* number of items\r\n  so that the scrollbar captures the size of the entire data set.\r\n-->\r\n<div class=\"app-table-virtual-scroll-spacer\" [style.width]=\"_totalContentWidth\" [style.height]=\"_totalContentHeight\">\r\n</div>", styles: ["anna-table-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;will-change:scroll-position;-webkit-overflow-scrolling:touch}.anna-table-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .anna-table-virtual-scroll-content-wrapper{right:0;left:auto}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper{min-height:100%}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper{min-width:100%}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.app-table-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .app-table-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaTableVirtualScrollViewportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "anna-table-virtual-scroll-viewport", host: {
+                        class: "anna-table-virtual-scroll-viewport",
+                        "[class.anna-table-virtual-scroll-orientation-horizontal]": 'orientation === "horizontal"',
+                        "[class.anna-table-virtual-scroll-orientation-vertical]": 'orientation !== "horizontal"'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: CdkScrollable,
+                            useExisting: AnnaTableVirtualScrollViewportComponent
+                        },
+                        {
+                            provide: CdkVirtualScrollViewport,
+                            useExisting: AnnaTableVirtualScrollViewportComponent
+                        }
+                    ], template: "<!--\r\n  Wrap the rendered content in an element that will be used to offset it based on the scroll\r\n  position.\r\n-->\r\n<div #contentWrapper class=\"anna-table-virtual-scroll-content-wrapper\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<!--\r\n  Spacer used to force the scrolling container to the correct size for the *total* number of items\r\n  so that the scrollbar captures the size of the entire data set.\r\n-->\r\n<div class=\"app-table-virtual-scroll-spacer\" [style.width]=\"_totalContentWidth\" [style.height]=\"_totalContentHeight\">\r\n</div>", styles: ["anna-table-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;will-change:scroll-position;-webkit-overflow-scrolling:touch}.anna-table-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .anna-table-virtual-scroll-content-wrapper{right:0;left:auto}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper{min-height:100%}.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-horizontal .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper{min-width:100%}.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.app-table-virtual-scroll-orientation-vertical .anna-table-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.app-table-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .app-table-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [VIRTUAL_SCROLL_STRATEGY]
+                    }] }, { type: i1$2.Directionality, decorators: [{
+                        type: Optional
+                    }] }, { type: i2$1.ScrollDispatcher }, { type: i2$1.ViewportRuler }, { type: i1$1.AnnaGenericTableService }];
+    }, propDecorators: { orientation: [{
+                type: Input
+            }], scrolledIndexChange: [{
+                type: Output
+            }], _contentWrapper: [{
+                type: ViewChild,
+                args: ["contentWrapper", { static: true }]
+            }] } });
+
+/**
+ * A custom scroll strategy that accepts a static row height, static header height,
+ * and a buffer size. The strategy
+ */
+class AnnaFixedRowSizeTableVirtualScrollStrategy {
+    constructor(rowHeight, buffer, headerHeight) {
+        this._scrolledIndexChange = new Subject();
+        this.scrolledIndexChange = this._scrolledIndexChange.pipe(distinctUntilChanged());
+        this.updateRowHeightAndBuffer(rowHeight, buffer, headerHeight);
     }
-    applySliderFilter() {
-        if (this.sliderValue) {
-            let selectedDataObj;
-            if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
-                selectedDataObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
-            }
-            else {
-                selectedDataObj = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
-            }
-            let isSame = isEqual(selectedDataObj, this.sliderValue);
-            if (!isSame) {
-                this.annaFilterService.sliderData = { min: this.options.floor, max: this.options.ceil };
-                this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, this.sliderValue);
-                this.annaFilterService.reOrderAppliedFiltersArray(false);
-                this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
-                this.checkIfSortingIsApplied();
-                this.filterAppliedToTable.emit(this.tableData);
-                // this.generateTableDataWrapper();
-                this.disableEnableEachColumnFilters();
-            }
-        }
-        this.sliderValue = null;
-        this.closeTooltip();
+    /**
+     * Attaches this scroll strategy to a viewport.
+     * @param viewport The viewport to attach this strategy to.
+     */
+    attach(viewport) {
+        this.viewport = viewport;
+        this.updateTotalContentSize();
+        this.updateRenderedRange();
     }
-    cancelInDateFilter() {
-        this.closeTooltip();
+    /**
+     * Detaches this scroll strategy from the currently attached viewport.
+     */
+    detach() {
+        this._scrolledIndexChange.complete();
+        this.viewport = null;
     }
-    applyDateFilter(selectedDate) {
-        let selectedDateObj;
-        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
-            selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
-        }
-        else {
-            selectedDateObj = cloneDeep(this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio));
-        }
-        let isStartDateSame = isEqual(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.fromDate), selectedDateObj.minSelectedDate);
-        let isEndDateSame = isEqual(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.toDate), selectedDateObj.maxSelectedDate);
-        if (!isStartDateSame || !isEndDateSame) {
-            selectedDateObj.minSelectedDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.fromDate));
-            selectedDateObj.maxSelectedDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.toDate));
-            this.annaFilterService.flightDateRange = {
-                minSelectedDate: moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.calendarMinEnabledDate)),
-                maxSelectedDate: moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.calendarMaxEnabledDate))
-            };
-            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, selectedDateObj);
-            this.annaFilterService.reOrderAppliedFiltersArray(false);
-            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
-            this.checkIfSortingIsApplied();
-            this.filterAppliedToTable.emit(this.tableData);
-            // this.generateTableDataWrapper();
-            this.disableEnableEachColumnFilters();
-        }
-        this.closeTooltip();
+    onContentScrolled() {
+        this.updateRenderedRange();
     }
-    applyWeekFilter(event) {
+    onDataLengthChanged() {
+        this.updateTotalContentSize();
+        this.updateRenderedRange();
     }
-    incrementHour(arr) {
-        if (arr[0] == "") {
-            arr[0] = 1;
-        }
-        else if (parseInt(arr[0]) < 12) {
-            arr[0] = parseInt(arr[0]) + 1;
-        }
-        else {
-            arr[0] = 1;
-        }
+    onContentRendered() {
+        // This method is useful for virtual scroll strategies that measure the rendered
+        // content to determine its height. This scroll strategy assumes that rows have
+        // a static height, so there's no need to implement this method.
+    }
+    onRenderedOffsetChanged() {
+        // Similar to onContentRendered, this method is useful for virtual scroll strategies
+        // that need to track the offset as it changes. This scroll strategy is always able
+        // to calculate the correct offset from other values, so there's no need to implement
+        // this method.
     }
-    decrementHour(arr) {
-        if (arr[0] == "") {
-            arr[0] = 12;
-        }
-        else if (parseInt(arr[0]) > 1) {
-            arr[0] = parseInt(arr[0]) - 1;
-        }
-        else {
-            arr[0] = 12;
-        }
+    scrollToIndex(index, behavior) {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToOffset(index * this.rowHeight, behavior);
     }
-    incrementMinute(arr) {
-        if (arr[1] == "" || parseInt(arr[1]) == 0) {
-            arr[1] = 30;
-        }
-        else {
-            arr[1] = "00";
-        }
+    /**
+     * Update the item size and buffer size.
+     * @param rowHeight The height of a row in the virtually scrolling table.
+     * @param buffer The number of rows to buffer outside the viewport.
+     * @param headerHeight The total height of the table header, including all header rows.
+     */
+    updateRowHeightAndBuffer(rowHeight, buffer, headerHeight) {
+        this.rowHeight = rowHeight;
+        this.buffer = buffer;
+        this.headerHeight = headerHeight;
+        this.updateTotalContentSize();
+        this.updateRenderedRange();
     }
-    decrementMinute(arr) {
-        if (arr[1] == "" || parseInt(arr[1]) == 30) {
-            arr[1] = "00";
-        }
-        else {
-            arr[1] = 30;
+    updateRenderedRange() {
+        if (!this.viewport) {
+            return;
         }
+        const viewportSize = this.viewport.getViewportSize();
+        const dataLength = this.viewport.getDataLength();
+        const scrollOffset = this.viewport.measureScrollOffset();
+        // the index of the first item that would be at least partially visible in the viewport
+        let firstVisibleIndex = Math.floor((scrollOffset + this.headerHeight) / this.rowHeight);
+        // if the buffer size is 10 but the first visible item is at, say, index 7
+        // then the buffered items must be 7, because we don't have 10 items available to buffer.
+        const bufferedItems = Math.min(AnnaFilterService$1.bufferSize, firstVisibleIndex);
+        const itemsInViewport = Math.ceil(viewportSize / this.rowHeight);
+        const itemsToRender = itemsInViewport + this.buffer;
+        // Clamp the new range between 0 and dataLength
+        const newStart = Math.max(0, firstVisibleIndex - bufferedItems);
+        const newEnd = Math.min(dataLength, firstVisibleIndex + itemsToRender);
+        const newRange = {
+            start: newStart,
+            end: newEnd
+        };
+        const newOffset = this.rowHeight * (firstVisibleIndex - bufferedItems);
+        this.viewport.setRenderedContentOffset(newOffset);
+        this.viewport.setRenderedRange(newRange);
+        this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
     }
-    changeStartTimeHour(increment) {
-        if (increment) {
-            this.incrementHour(this.selectedFromTime);
-        }
-        else {
-            this.decrementHour(this.selectedFromTime);
-        }
-        this.disableTimeFilterApplyButton();
+    updateTotalContentSize() {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setTotalContentSize(this.viewport.getDataLength() * this.rowHeight);
     }
-    changeEndTimeHour(increment) {
-        if (increment) {
-            this.incrementHour(this.selectedToTime);
-        }
-        else {
-            this.decrementHour(this.selectedToTime);
-        }
-        this.disableTimeFilterApplyButton();
+}
+/**
+ * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created
+ * `FixedSizeVirtualScrollStrategy` from the given directive.
+ * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the
+ *     `FixedSizeVirtualScrollStrategy` from.
+ */
+function fixedSizeVirtualScrollStrategyFactory(fixedSizeDir) {
+    return fixedSizeDir.scrollStrategy;
+}
+class AnnaFixedRowSizeTableVirtualScrollStrategyDirective {
+    constructor() {
+        this._rowHeight = 30;
+        this._headerRowHeight = 30;
+        this._buffer = 20;
+        this._headerRows = null;
+        this.headerRowCount = 1;
+        /** The scroll strategy used by this directive. */
+        this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(this.rowHeight, this.buffer, this.headerRowHeight * this.headerRowCount);
     }
-    changeEndTimeMinute(increment) {
-        if (increment) {
-            this.incrementMinute(this.selectedToTime);
-        }
-        else {
-            this.decrementMinute(this.selectedToTime);
-        }
-        this.disableTimeFilterApplyButton();
+    /** The height of rows in the table (in pixels). Defaults to 30. */
+    set rowHeight(value) { this._rowHeight = coerceNumberProperty(value); }
+    get rowHeight() { return this._rowHeight; }
+    /**
+     * The height of header rows in the table (in pixels). Defaults to 30.
+     */
+    set headerRowHeight(value) { this._headerRowHeight = coerceNumberProperty(value); }
+    get headerRowHeight() { return this._headerRowHeight; }
+    /**
+     * The number of buffered rows rendered beyond the viewport.
+     * If the number of buffered rows dips below this number, more rows will be rendered. Defaults to 20.
+     */
+    set buffer(value) {
+        this._buffer = coerceNumberProperty(value);
     }
-    changeStartTimeMinute(increment) {
-        if (increment) {
-            this.incrementMinute(this.selectedFromTime);
+    get buffer() { return this._buffer; }
+    set headerRows(value) { this._headerRows = coerceNumberProperty(value, undefined); }
+    get headerRows() { return this._headerRows; }
+    ngOnChanges(change) {
+        var _a, _b;
+        if (this.headerRows != undefined || this.headerRowsQuery) {
+            this.handleChange();
         }
-        else {
-            this.decrementMinute(this.selectedFromTime);
+        if (((_a = change['buffer']) === null || _a === void 0 ? void 0 : _a.previousValue) != ((_b = change['buffer']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
+            AnnaFilterService$1.bufferSize = this.buffer;
+            this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(this.rowHeight, this.buffer, this.headerRowHeight * this.headerRowCount);
         }
-        this.disableTimeFilterApplyButton();
     }
-    applyTimeFilters() {
-        let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
-        let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
-        let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
-        let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":00";
-        let previousSelectedData;
-        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
-            previousSelectedData = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
-        }
-        else {
-            previousSelectedData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
-        }
-        let selectedData = {
-            fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.annaFilterService.includeMultiTime,
-            includeZero: this.annaFilterService.includeZeroTime, includeTimeRange: this.annaFilterService.includeTimeRange
-        };
-        if (!isEqual(previousSelectedData, selectedData)) {
-            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, selectedData);
-            this.annaFilterService.reOrderAppliedFiltersArray(false);
-            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
-            this.checkIfSortingIsApplied();
-            this.filterAppliedToTable.emit(this.tableData);
-            // this.generateTableDataWrapper();
-            this.disableEnableEachColumnFilters();
-        }
-        this.closeTooltip();
+    ngAfterContentInit() {
+        this.headerRowsQuery.changes.subscribe(() => {
+            this.handleChange();
+        });
     }
-    closeTimeFilter() {
-        this.selectedFromTime = cloneDeep(this.clonedSelectedFromTime);
-        this.selectedToTime = cloneDeep(this.clonedSelectedToTime);
-        this.closeTooltip();
+    handleChange() {
+        var _a;
+        this.scrollStrategy.updateRowHeightAndBuffer(this.rowHeight, this.buffer, 
+        // Use the explicit headerRows input value if set.
+        // Otherwise, fall back to the QueryList length.
+        this.headerRowHeight * ((_a = this._headerRows) !== null && _a !== void 0 ? _a : this.headerRowsQuery.length));
     }
-    disableTimeFilterApplyButton() {
-        let timeFormat = "HH:mm:ss";
-        let startTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
-        let startTime24HrFormat = startTime24HrFormatArr[0] + ":" + startTime24HrFormatArr[1] + ":00";
-        let endTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
-        let endTime24HrFormat = endTime24HrFormatArr[0] + ":" + endTime24HrFormatArr[1] + ":00";
-        this.disableTimeFilterApplyBtn = moment(startTime24HrFormat, timeFormat).isAfter(moment(endTime24HrFormat, timeFormat));
-        if (!this.multiTimeCheckboxChecked && !this.zeroTimeCheckboxChecked && !this.enterTimeCheckboxChecked) {
-            this.disableTimeFilterApplyBtn = true;
+}
+AnnaFixedRowSizeTableVirtualScrollStrategyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AnnaFixedRowSizeTableVirtualScrollStrategyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]", inputs: { rowHeight: "rowHeight", headerRowHeight: "headerRowHeight", buffer: "buffer", headerRows: "headerRows" }, providers: [
+        {
+            provide: VIRTUAL_SCROLL_STRATEGY,
+            useFactory: fixedSizeVirtualScrollStrategyFactory,
+            deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
         }
+    ], queries: [{ propertyName: "headerRowsQuery", predicate: MatHeaderRowDef }], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaFixedRowSizeTableVirtualScrollStrategyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]",
+                    providers: [
+                        {
+                            provide: VIRTUAL_SCROLL_STRATEGY,
+                            useFactory: fixedSizeVirtualScrollStrategyFactory,
+                            deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
+                        }
+                    ]
+                }]
+        }], propDecorators: { rowHeight: [{
+                type: Input
+            }], headerRowHeight: [{
+                type: Input
+            }], buffer: [{
+                type: Input
+            }], headerRows: [{
+                type: Input
+            }], headerRowsQuery: [{
+                type: ContentChildren,
+                args: [MatHeaderRowDef]
+            }] } });
+
+/**
+ * Directive that wraps a given data source in a "virtual" data source that emits
+ * the slice of the original data source that matches the range that should be rendered
+ * in the containing virtual scroll viewport.
+ */
+class AnnaVirtualTableDirective {
+    constructor(elementRef, viewport, table, ngZone, _coalescedStyleScheduler) {
+        this.viewport = viewport;
+        this.table = table;
+        this._coalescedStyleScheduler = _coalescedStyleScheduler;
+        this.virtualizedDataStream = new Subject();
+        this.dataSourceChanges = new Subject();
+        /** The raw, unvirtualized data stream. Emits whenever the data in the current DataSource changes. */
+        this.dataStream = this.dataSourceChanges
+            .pipe(
+        // Start off with null data source.
+        startWith(null), 
+        // Bundle up the previous and current data sources so we can work with both.
+        pairwise(), 
+        // Use `changeDataSource` to disconnect from the previous data source and connect to the
+        // new one, passing back a stream of data changes which we run through `switchMap` to give
+        // us a data stream that emits the latest data from whatever the current data source is.
+        switchMap(([prev, cur]) => this.changeDataSource(prev, cur)), 
+        // Replay the last emitted data when someone subscribes.
+        shareReplay(1));
+        this.viewChange = new Subject();
+        this.destroyed$ = new Subject();
+        this.renderedRange = { start: 0, end: 0 };
+        this.isNativeHtmlTable = false;
+        table.dataSource = this.virtualizedDataStream;
+        this.isNativeHtmlTable = elementRef.nativeElement.tagName === 'TABLE';
+        this.dataStream.subscribe(data => {
+            this.data = data;
+            this.onRenderedDataChange();
+        });
+        viewport.renderedRangeStream.pipe(takeUntil(this.destroyed$)).subscribe((range) => {
+            this.renderedRange = range;
+            ngZone.run(() => this.viewChange.next(range));
+            this.onRenderedDataChange();
+        });
+        viewport.attach(this);
     }
-    sortedData(event) {
-        if (event.type == "none") {
-            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+    set dataSource(value) {
+        this._dataSource = value;
+        if (isDataSource(value)) {
+            this.dataSourceChanges.next(value);
         }
         else {
-            this.tableData = event.data;
-        }
-        this.sortingAppliedToTable.emit(this.tableData);
-        // this.generateTableDataWrapper();
-    }
-    checkIfSortingIsApplied() {
-        let appliedkey;
-        let isAsc;
-        const arr = this.sortComponent.toArray();
-        let obj = this.annaSortService.checkIfSortingIsApplied(this.annaSortService.sortByAsc, true);
-        appliedkey = obj.key;
-        isAsc = obj.setValueTo;
-        if (!appliedkey) {
-            let obj = this.annaSortService.checkIfSortingIsApplied(this.annaSortService.sortByDesc, false);
-            appliedkey = obj.key;
-            isAsc = obj.setValueTo;
-        }
-        if (appliedkey) {
-            this.applySorting(arr, appliedkey, isAsc);
+            this.dataSourceChanges.next(new ArrayDataSource(isObservable(value) ? value : Array.from(value || [])));
         }
     }
-    applySorting(sortComponentArr, appliedKey, isAsc) {
-        sortComponentArr.forEach((component) => {
-            if (component.sortBy === appliedKey) {
-                this.setSortComponentDataProperty(component);
-                isAsc ? component.sortByAscending() : component.sortByDescending();
-            }
-        });
-    }
-    setSortComponentDataProperty(sortComponent) {
-        sortComponent.data = this.tableData;
-        sortComponent.clonedData = cloneDeep(this.tableData);
+    get dataSource() {
+        return this._dataSource;
     }
-    disableEnableEachColumnFilters() {
-        this.tableHeaders.forEach(header => {
-            header.headerInfo.forEach(item => {
-                if (item.filter != "") {
-                    let values = [];
-                    item.disableFilter = true;
-                    item.filterObjectKeys.forEach(key => {
-                        if (key == "period") {
-                            let uniqStartDate = uniq(this.tableData.map((u) => u["startDate"]));
-                            let uniqEndDate = uniq(this.tableData.map((u) => u["endDate"]));
-                            item.disableFilter = (uniqStartDate.length > 1 || uniqEndDate.length > 1) ? false : true;
-                        }
-                        else {
-                            values = this.tableData.map((u) => u[key]);
-                            if (uniq(values).filter(n => n != null).length > 1) {
-                                item.disableFilter = false;
-                            }
-                        }
-                    });
-                    // if(uniq(values).length > 1){
-                    //   item.disableFilter = false;
-                    // }else{
-                    //   item.disableFilter = true;
-                    // }
+    ngOnInit() {
+        // This is just a proof of concept, but the AnnaTableVirtualScrollViewportComponent uses `position: absolute` and `top: #px` instead of `transform: translateY(#px)` to position the viewport.
+        // This removes the need to account for the translation in the `top` of the sticky header rows.
+        if (this.viewport instanceof AnnaTableVirtualScrollViewportComponent) {
+            return;
+        }
+        this.viewport.scrolledIndexChange
+            .pipe(map$1(() => this.viewport.getOffsetToRenderedContentStart()), takeUntil(this.destroyed$))
+            .subscribe((offset) => {
+            // We need to set the `style.top` property of the sticky header rows
+            // to the negative value of the virtual scroll viewport's offset, so
+            // make the offset negative.
+            offset = -offset;
+            const stickyStates = this.headerRowDefs.map(rowDef => rowDef.sticky);
+            // This logic is exactly the same as what's in the StickyStyler (literally copy + paste).
+            // The only difference is that the `stickyOffset` variable starts at the virtual scroll
+            // viewport container's offset instead of starting at zero.
+            const rows = this.table._getRenderedRows(this.table._headerRowOutlet);
+            const stickyOffsets = [];
+            const stickyCellHeights = [];
+            const elementsToStick = [];
+            for (let rowIndex = 0, stickyOffset = offset; rowIndex < rows.length; rowIndex++) {
+                stickyOffsets[rowIndex] = stickyOffset;
+                if (!stickyStates[rowIndex]) {
+                    continue;
                 }
-                if (item.sort) {
-                    if (uniq(this.tableData.map((u) => u[item.objectKey])).length > 1) {
-                        item.disableSort = false;
+                const row = rows[rowIndex];
+                elementsToStick[rowIndex] = this.isNativeHtmlTable ? Array.from(row.children) : [row];
+                const height = row.getBoundingClientRect().height;
+                stickyOffset += height;
+                stickyCellHeights[rowIndex] = height;
+            }
+            // Using the CoalescedStyleScheduler here is optional. It'll work without it,
+            // and CoalescedStyleScheduler is not public (yet?), so feel free to remove it.
+            this._coalescedStyleScheduler.schedule(() => {
+                for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                    if (!stickyStates[rowIndex]) {
+                        continue;
                     }
-                    else {
-                        item.disableSort = true;
+                    for (const element of elementsToStick[rowIndex]) {
+                        element.style.top = `${stickyOffsets[rowIndex]}px`;
                     }
                 }
             });
         });
     }
-    ngAfterViewInit() {
-        this.annaGenericTableService.virtualScrollSubject.subscribe((val) => {
-            this.isScrolledLeft = document.getElementsByClassName("anna-table-virtual-scroll-viewport")[0].scrollLeft > 0;
-            this.cdRef.detectChanges();
-        });
-    }
-    dataRowClicked(rowData) {
-        this.rowClicked.emit(rowData);
-    }
-    radioButtonClicked(data, action, isDisabled) {
-        if (!isDisabled) {
-            this.radioButtonSelected.emit({ data, action });
-        }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.dataSourceChanges.complete();
+        this.virtualizedDataStream.complete();
     }
-    bindTheValueToSellerGroupTooltip(sellerGroupHierarchy, tooltip) {
-        if (this.hierarchyTooltip && this.hierarchyTooltip.open) {
-            this.hierarchyTooltip.close();
+    /** React to scroll state changes in the viewport. */
+    onRenderedDataChange() {
+        if (!this.renderedRange) {
+            return;
         }
-        this.sellerGroupHierarchy = sellerGroupHierarchy;
-        this.hierarchyTooltip = tooltip;
-        this.hierarchyTooltip.open();
-    }
-    iconClicked(rowData, iconClass) {
-        this.gtIconClicked.emit({ data: rowData, iconClass: iconClass });
-    }
-    svgIconClicked(rowData, key) {
-        this.gtSVGIconClicked.emit({ data: rowData, key: key });
+        this.renderedItems = this.data.slice(this.renderedRange.start, this.renderedRange.end + 1);
+        // delegate rendering to the table by emitting from the virtualizedDataStream
+        this.virtualizedDataStream.next(this.renderedItems);
     }
-    textActionClicked(rowData, id) {
-        this.gtTextActionClicked.emit({ data: rowData, id });
+    /** Swap out one data source for another. */
+    changeDataSource(oldDataSource, newDs) {
+        oldDataSource === null || oldDataSource === void 0 ? void 0 : oldDataSource.disconnect(this);
+        return newDs ? newDs.connect(this) : of();
     }
-    viewDetailsClicked(rowData) {
-        this.gtViewDetailClicked.emit({ data: rowData });
+    /**
+     * This method is only used by the experimental AutoSizeVirtualScrollStrategy.
+     * We're not using that strategy, but I've implemented it just to show how it oculd be done.
+     * I'm not actually sure if this works.
+     */
+    measureRangeSize(range, orientation) {
+        if (orientation === 'horizontal' || range.end < range.start) {
+            // virtual scrolling columns are not supported by this directive
+            return 0;
+        }
+        const renderedBodyRows = this.table._getRenderedRows(this.table._rowOutlet);
+        const firstRow = renderedBodyRows[range.start];
+        const lastRow = renderedBodyRows[range.end];
+        if (!firstRow || !lastRow) {
+            return 0;
+        }
+        // We need to include all header and footer rows in the sum, since they're always rendered
+        const renderedHeaderRows = this.table._getRenderedRows(this.table._headerRowOutlet);
+        const renderedFooterRows = this.table._getRenderedRows(this.table._footerRowOutlet);
+        // TODO (performance): Can we just measure the offset of the first and last items and do some math to avoid having to measure each row individually?
+        const headerHeight = renderedHeaderRows.reduce((sum, row) => {
+            return sum += row.getBoundingClientRect().height;
+        }, 0);
+        const footerHeight = renderedFooterRows.reduce((sum, row) => {
+            return sum += row.getBoundingClientRect().height;
+        }, 0);
+        const bodyHeight = lastRow.getBoundingClientRect().bottom - firstRow.getBoundingClientRect().top;
+        return headerHeight + footerHeight + bodyHeight;
     }
 }
-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.sort\">\r\n                                <anna-core-sort-lib\r\n                                    [sortBy]=\"header.sortObjectKey ? header.sortObjectKey : header.objectKey\"\r\n                                    [data]=\"tableData\"\r\n                                    [disableSort]=\"header.disableSort\"\r\n                                    (sort)=\"sortedData($event)\"\r\n                                >\r\n                                </anna-core-sort-lib>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                <span\r\n                                    class=\"mdi mdi-filter\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\r\n                                    }\"\r\n                                    [ngbTooltip]=\"datePickerTooltip\"\r\n                                    placement=\"left-top auto\"\r\n                                    container=\"body\"\r\n                                    [autoClose]=\"'outside'\"\r\n                                    triggers=\"manual\"\r\n                                    #t2=\"ngbTooltip\"\r\n                                    (click)=\"bindTheValueToToolTip(t2, header.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\r\n                                    (hidden)=\"closeTooltip()\"\r\n                                >\r\n                                </span\r\n                                ><br />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === ''\"> <span id=\"no-filter-space\"></span><br /> </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    <div class=\"radio-container\" *ngIf=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\r\n    <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\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)]=\"searchBar\"\r\n        />\r\n    </p>\r\n    <div class=\"dropdown-data-container\">\r\n        <ng-container *ngIf=\"showAll\">\r\n            <p class=\"input\" (click)=\"allOptionClicked()\">\r\n                <span *ngIf=\"allSelected == 1\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"allSelected == 0\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span *ngIf=\"allSelected == 2\" role=\"button\" class=\"mi mdi-indeterminate-check-box check-box\"></span>\r\n                <span class=\"data\">All</span>\r\n            </p>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let data of tempTooltipData | AnnafilterSearchedText: searchBar\">\r\n            <p *ngIf=\"!data.isHidden\" class=\"input\" (click)=\"isCheckboxSelected(data)\">\r\n                <span *ngIf=\"data.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!data.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ data.data }}\">{{ data.data }}</span>\r\n            </p>\r\n        </ng-container>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\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    <section class=\"min-maxContainer\">\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMinValue\"\r\n            (ngModelChange)=\"minValueChanged($event)\"\r\n            placeholder=\"Min\"\r\n        />\r\n        <span>To</span>\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMaxValue\"\r\n            (ngModelChange)=\"maxValueChanged($event)\"\r\n            placeholder=\"Max\"\r\n        />\r\n    </section>\r\n    <div class=\"sidebar-slider\">\r\n        <ngx-slider\r\n            [(value)]=\"sliderMinValue\"\r\n            [(highValue)]=\"sliderMaxValue\"\r\n            [options]=\"options\"\r\n            (valueChange)=\"sliderValueChange()\"\r\n            (highValueChange)=\"sliderValueChange()\"\r\n        ></ngx-slider>\r\n    </div>\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=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\r\n        </div>\r\n      </div>\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            (apply)=\"applyDateFilter($event)\"\r\n            (cancel)=\"cancelInDateFilter()\"\r\n        >\r\n        </anna-core-calendar-filter-lib>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component != 'RATING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\"\r\n                *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\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    <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{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}::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:22px;cursor:pointer}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 .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#268bff!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 .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}::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;padding:.125rem .125rem .125rem .25rem;border-radius:.125rem;margin:.4375rem .4375rem .25rem}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:5px 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.14;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}.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:left;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.disabled,span.mdi-calendar-range.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}.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: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["data", "sortBy", "disableSort", "placement"], outputs: ["sort"] }, { type: i5.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { type: i6.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: 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", "minDate", "showDate", "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: i6.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }], pipes: { "AnnafilterSearchedText": i1$1.AnnaFilterSearchedTextPipe } });
-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.sort\">\r\n                                <anna-core-sort-lib\r\n                                    [sortBy]=\"header.sortObjectKey ? header.sortObjectKey : header.objectKey\"\r\n                                    [data]=\"tableData\"\r\n                                    [disableSort]=\"header.disableSort\"\r\n                                    (sort)=\"sortedData($event)\"\r\n                                >\r\n                                </anna-core-sort-lib>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                <span\r\n                                    class=\"mdi mdi-filter\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\r\n                                    }\"\r\n                                    [ngbTooltip]=\"datePickerTooltip\"\r\n                                    placement=\"left-top auto\"\r\n                                    container=\"body\"\r\n                                    [autoClose]=\"'outside'\"\r\n                                    triggers=\"manual\"\r\n                                    #t2=\"ngbTooltip\"\r\n                                    (click)=\"bindTheValueToToolTip(t2, header.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\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\"\r\n                                    [ngClass]=\"{\r\n                                        active:\r\n                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),\r\n                                        disabled: header.disableFilter\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.filterObjectKeys)\"\r\n                                    (hidden)=\"closeTooltip()\"\r\n                                >\r\n                                </span\r\n                                ><br />\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.filter === ''\"> <span id=\"no-filter-space\"></span><br /> </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    <div class=\"radio-container\" *ngIf=\"showCheckboxFilterRadioButtons\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\r\n    <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\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)]=\"searchBar\"\r\n        />\r\n    </p>\r\n    <div class=\"dropdown-data-container\">\r\n        <ng-container *ngIf=\"showAll\">\r\n            <p class=\"input\" (click)=\"allOptionClicked()\">\r\n                <span *ngIf=\"allSelected == 1\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"allSelected == 0\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span *ngIf=\"allSelected == 2\" role=\"button\" class=\"mi mdi-indeterminate-check-box check-box\"></span>\r\n                <span class=\"data\">All</span>\r\n            </p>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let data of tempTooltipData | AnnafilterSearchedText: searchBar\">\r\n            <p *ngIf=\"!data.isHidden\" class=\"input\" (click)=\"isCheckboxSelected(data)\">\r\n                <span *ngIf=\"data.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!data.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ data.data }}\">{{ data.data }}</span>\r\n            </p>\r\n        </ng-container>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\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    <section class=\"min-maxContainer\">\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMinValue\"\r\n            (ngModelChange)=\"minValueChanged($event)\"\r\n            placeholder=\"Min\"\r\n        />\r\n        <span>To</span>\r\n        <input\r\n            type=\"number\"\r\n            step=\"{{ sliderFilterTextBoxStep }}\"\r\n            [ngModel]=\"sliderMaxValue\"\r\n            (ngModelChange)=\"maxValueChanged($event)\"\r\n            placeholder=\"Max\"\r\n        />\r\n    </section>\r\n    <div class=\"sidebar-slider\">\r\n        <ngx-slider\r\n            [(value)]=\"sliderMinValue\"\r\n            [(highValue)]=\"sliderMaxValue\"\r\n            [options]=\"options\"\r\n            (valueChange)=\"sliderValueChange()\"\r\n            (highValueChange)=\"sliderValueChange()\"\r\n        ></ngx-slider>\r\n    </div>\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=\"gtGeneralConfig.component == 'DRRLISTING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n          <input type=\"radio\" id=\"{{data.key}}\" [ngModel]=\"annaFilterService.selectedRadio\" name=\"toolTip\" value=\"{{data.key}}\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\" *ngIf=\"radioButtons.length > 1\">\r\n          <label for=\"{{data.key}}\">{{data.label}}</label>\r\n        </div>\r\n      </div>\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            (apply)=\"applyDateFilter($event)\"\r\n            (cancel)=\"cancelInDateFilter()\"\r\n        >\r\n        </anna-core-calendar-filter-lib>\r\n    </div>\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    <div class=\"radio-container\" *ngIf=\"gtGeneralConfig.component != 'RATING'\">\r\n        <div *ngFor=\"let data of radioButtons\">\r\n            <input\r\n                type=\"radio\"\r\n                id=\"{{ data.key }}\"\r\n                [ngModel]=\"annaFilterService.selectedRadio\"\r\n                name=\"toolTip\"\r\n                value=\"{{ data.key }}\"\r\n                (click)=\"populateTooltipDataBasedOnSelectedRadio(data.key)\"\r\n                *ngIf=\"radioButtons.length > 1\"\r\n            />\r\n            <label for=\"{{ data.key }}\">{{ data.label }}</label>\r\n        </div>\r\n    </div>\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    <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{display:inline-block;margin:0!important;position:relative;top:1px}.mdi-sort{padding-top:5px;padding-bottom:2.5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort.active{opacity:1}.mdi-sort-descending{padding-top:2.5px;padding-bottom:5px;line-height:0;font-size:1rem;cursor:pointer;color:#000;opacity:.24}.mdi-sort-descending.active{opacity:1}.disable{cursor:not-allowed;pointer-events:none;opacity:.17}.sort-container{color:#000;padding:.25rem;text-align:left}.sort-container input{position:relative;top:.125rem;margin-right:.188rem}.sort-container input:hover,.sort-container label:hover{cursor:pointer}.sort-container div:last-of-type{line-height:.2}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%}input[type=radio]:checked{background-color:#268bff}input[type=radio]:focus{outline-offset:-10px}::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:22px;cursor:pointer}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 .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#268bff!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 .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}::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;padding:.125rem .125rem .125rem .25rem;border-radius:.125rem;margin:.4375rem .4375rem .25rem}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:5px 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.14;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}.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:left;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.disabled,span.mdi-calendar-range.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}.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: [{
-                type: Input
-            }], tableData: [{
-                type: Input
-            }], clonedTableData: [{
-                type: Input
-            }], numberOfSkeletonRows: [{
-                type: Input
-            }], numberOfSkeletonColumns: [{
-                type: Input
-            }], gtGeneralConfig: [{
-                type: Input
-            }], totalRowInfo: [{
-                type: Input
-            }], gtDimension: [{
-                type: Input
-            }], tableClass: [{
-                type: Input
-            }], maximumRowsWhichCanBeRenderedWithoutScroll: [{
-                type: Input
-            }], toggleCheckbox: [{
-                type: Output
-            }], toggleRowCheckbox: [{
-                type: Output
-            }], toggleHeaderCheckbox: [{
-                type: Output
-            }], undoIconClicked: [{
-                type: Output
-            }], filterAppliedToTable: [{
-                type: Output
-            }], sortingAppliedToTable: [{
-                type: Output
-            }], rowClicked: [{
-                type: Output
-            }], radioButtonSelected: [{
-                type: Output
-            }], columnFilterOpened: [{
-                type: Output
-            }], columnFilterClosed: [{
-                type: Output
-            }], gtIconClicked: [{
-                type: Output
-            }], gtSVGIconClicked: [{
-                type: Output
-            }], gtTextActionClicked: [{
-                type: Output
-            }], gtViewDetailClicked: [{
-                type: Output
-            }], sortComponent: [{
-                type: ViewChildren,
-                args: [AnnaSortComponent]
+AnnaVirtualTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaVirtualTableDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.CdkVirtualScrollViewport }, { token: i2$2.CdkTable }, { token: i0.NgZone }, { token: _COALESCED_STYLE_SCHEDULER }], target: i0.ɵɵFactoryTarget.Directive });
+AnnaVirtualTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: AnnaVirtualTableDirective, selector: "[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]", inputs: { dataSource: ["appVirtualDataSource", "dataSource"] }, providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }], queries: [{ propertyName: "headerRowDefs", predicate: CdkHeaderRowDef }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaVirtualTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]',
+                    providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }]
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i2$1.CdkVirtualScrollViewport }, { type: i2$2.CdkTable }, { type: i0.NgZone }, { type: i2$2._CoalescedStyleScheduler, decorators: [{
+                        type: Inject,
+                        args: [_COALESCED_STYLE_SCHEDULER]
+                    }] }];
+    }, propDecorators: { dataSource: [{
+                type: Input,
+                args: ['appVirtualDataSource']
+            }], headerRowDefs: [{
+                type: ContentChildren,
+                args: [CdkHeaderRowDef]
             }] } });
 
 // Angular import statements
@@ -2391,7 +2399,7 @@ class AnnaBuyerApprovalIconTemplateComponent {
     }
 }
 AnnaBuyerApprovalIconTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaBuyerApprovalIconTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaBuyerApprovalIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaBuyerApprovalIconTemplateComponent, selector: "anna-buyer-approval-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"buyerApprovalIcon\"></ng-container>\r\n\r\n<ng-template #buyerApprovalIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Awaiting-Buyer-Approval-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"time-left\" transform=\"translate(3.000000, 2.000000)\" fill=\"#4A4A4A\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M6.23157622,14.1696467 C5.70535057,14.0721422 5.2005579,13.9061054 4.72188769,13.6745242 C4.71622258,13.6714711 4.71115545,13.6679958 4.70520709,13.6652025 C4.59240848,13.6104091 4.47979871,13.551718 4.37065094,13.4903961 C4.37027327,13.4899414 4.36958087,13.4896491 4.36898288,13.4893893 C4.16872129,13.37558 3.97327504,13.2496557 3.78339947,13.1117139 C1.01467199,11.0989392 0.348958764,7.13679055 2.29945571,4.27950803 C2.72358352,3.65842885 3.23684237,3.14027823 3.80904983,2.72960334 C3.81609974,2.72453649 3.82314965,2.71950212 3.83013662,2.71440279 C5.84650619,1.28061347 8.58442178,1.183986 10.7254867,2.65733574 L10.2656372,3.34301728 C10.1377946,3.53386873 10.2164452,3.67294733 10.4402485,3.65216024 L12.4377343,3.46760989 C12.6618209,3.4468228 12.7958322,3.24677957 12.7355617,3.0234483 L12.1991703,1.02899228 C12.1391202,0.805401178 11.9853754,0.778637804 11.8574069,0.969456765 L11.3964873,1.6567623 C9.82523796,0.568265989 7.94067659,0.153206329 6.0701521,0.487943386 C5.88175576,0.521592483 5.69600314,0.562776899 5.51279981,0.610717118 C5.51138354,0.610976957 5.51025052,0.611139356 5.50911749,0.611399194 C5.50203611,0.613185585 5.4948603,0.615556612 5.48796775,0.617537881 C3.8749854,1.04500483 2.46767797,2.01585923 1.46347449,3.40105873 C1.4550083,3.41141979 1.44629033,3.4215535 1.43829623,3.432824 C1.40490356,3.47923766 1.37176268,3.52672316 1.33931419,3.57420867 C1.28625101,3.65203032 1.23394317,3.73180077 1.18390138,3.81157121 C1.17763828,3.82118524 1.17285441,3.83096167 1.16737814,3.84067314 C0.338698623,5.1658824 -0.0610062726,6.69795566 0.00754154337,8.25770173 C0.00769890751,8.26283354 0.00741565207,8.26799784 0.00754154337,8.27325957 C0.0141823097,8.42562242 0.0258902012,8.58009646 0.0417839785,8.73216699 C0.0426337448,8.7419759 0.0447424242,8.75126512 0.0463475384,8.76107403 C0.0627763537,8.91398904 0.0833910551,9.06726132 0.109230246,9.22050113 C0.371839509,10.7840149 1.08652445,12.1909434 2.15745032,13.2856758 C2.15993667,13.2882417 2.16251744,13.291035 2.16503527,13.2936983 C2.16591651,13.2947052 2.16689216,13.2952249 2.16774193,13.2961668 C2.45546651,13.5890373 2.7684323,13.8599191 3.10541185,14.1048494 C3.98728044,14.7461311 4.9692641,15.1700252 6.02385557,15.3653264 C6.3438398,15.424667 6.64950389,15.2048436 6.70691032,14.8747836 C6.76428528,14.5444963 6.55146603,14.2287924 6.23157622,14.1696467 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n                <path\r\n                    d=\"M9.22237925,14.6588011 C9.29073073,14.9263505 9.1292489,15.198652 8.86169949,15.2670034 C8.51639563,15.355219 8.1641424,15.4188128 7.8069689,15.4570516 C7.53239558,15.4864472 7.28598003,15.2876915 7.25658436,15.0131182 C7.22718869,14.7385449 7.42594445,14.4921293 7.70051776,14.4627336 C8.01004537,14.4295958 8.31515603,14.3745129 8.61417689,14.2981213 C8.8817263,14.2297698 9.15402777,14.3912517 9.22237925,14.6588011 Z M12.5552524,12.2886551 C12.7611952,12.4726175 12.7790139,12.7886982 12.5950515,12.994641 C12.3569806,13.2611574 12.1001968,13.5104915 11.8267859,13.7406023 C11.6155121,13.9184167 11.3000937,13.8912925 11.1222793,13.6800187 C10.9444648,13.4687448 10.9715891,13.1533264 11.1828629,12.975512 C11.4200152,12.7759175 11.6427598,12.5596351 11.8492666,12.3284542 C12.033229,12.1225114 12.3493096,12.1046927 12.5552524,12.2886551 Z M13.9945063,8.57622811 C14.2674538,8.61811209 14.4547678,8.87333344 14.4128838,9.14628095 C14.3584322,9.50112883 14.2787427,9.85020038 14.1746496,10.1914009 C14.0940709,10.4555252 13.8146338,10.6043183 13.5505094,10.5237395 C13.2863851,10.4431608 13.137592,10.1637237 13.2181708,9.89959931 C13.3082912,9.6041989 13.3772907,9.30195366 13.4244534,8.99460564 C13.4663374,8.72165813 13.7215588,8.53434413 13.9945063,8.57622811 Z M13.8741743,4.99628976 C14.0173723,5.32357494 14.1370467,5.66111195 14.2320931,6.00667963 C14.305325,6.27293459 14.1488489,6.54814305 13.8825939,6.62137492 C13.6163389,6.6946068 13.3411305,6.53813067 13.2678986,6.27187571 C13.1856167,5.97271686 13.0820133,5.68050756 12.958028,5.39713383 C12.847338,5.14414702 12.9626923,4.84932868 13.2156791,4.73863865 C13.4686659,4.62794862 13.7634843,4.74330295 13.8741743,4.99628976 Z\"\r\n                    id=\"Combined-Shape\"\r\n                ></path>\r\n                <path\r\n                    d=\"M6.49684035,4 C6.22234237,4 6,4.21290493 6,4.47514225 L6,9.20888548 L10.5252942,11.4469308 C10.5981282,11.4830116 10.6761155,11.5 10.7528554,11.5 C10.9325937,11.5 11.106194,11.4063595 11.1944548,11.2429754 C11.3203307,11.0097848 11.2250786,10.7233052 10.9813357,10.6028789 L6.9931227,8.63027395 L6.9931227,4.47514225 C6.99308988,4.21290493 6.77101009,4 6.49684035,4 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+AnnaBuyerApprovalIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaBuyerApprovalIconTemplateComponent, selector: "anna-buyer-approval-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"buyerApprovalIcon\"></ng-container>\r\n\r\n<ng-template #buyerApprovalIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Awaiting-Buyer-Approval-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"time-left\" transform=\"translate(3.000000, 2.000000)\" fill=\"#4A4A4A\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M6.23157622,14.1696467 C5.70535057,14.0721422 5.2005579,13.9061054 4.72188769,13.6745242 C4.71622258,13.6714711 4.71115545,13.6679958 4.70520709,13.6652025 C4.59240848,13.6104091 4.47979871,13.551718 4.37065094,13.4903961 C4.37027327,13.4899414 4.36958087,13.4896491 4.36898288,13.4893893 C4.16872129,13.37558 3.97327504,13.2496557 3.78339947,13.1117139 C1.01467199,11.0989392 0.348958764,7.13679055 2.29945571,4.27950803 C2.72358352,3.65842885 3.23684237,3.14027823 3.80904983,2.72960334 C3.81609974,2.72453649 3.82314965,2.71950212 3.83013662,2.71440279 C5.84650619,1.28061347 8.58442178,1.183986 10.7254867,2.65733574 L10.2656372,3.34301728 C10.1377946,3.53386873 10.2164452,3.67294733 10.4402485,3.65216024 L12.4377343,3.46760989 C12.6618209,3.4468228 12.7958322,3.24677957 12.7355617,3.0234483 L12.1991703,1.02899228 C12.1391202,0.805401178 11.9853754,0.778637804 11.8574069,0.969456765 L11.3964873,1.6567623 C9.82523796,0.568265989 7.94067659,0.153206329 6.0701521,0.487943386 C5.88175576,0.521592483 5.69600314,0.562776899 5.51279981,0.610717118 C5.51138354,0.610976957 5.51025052,0.611139356 5.50911749,0.611399194 C5.50203611,0.613185585 5.4948603,0.615556612 5.48796775,0.617537881 C3.8749854,1.04500483 2.46767797,2.01585923 1.46347449,3.40105873 C1.4550083,3.41141979 1.44629033,3.4215535 1.43829623,3.432824 C1.40490356,3.47923766 1.37176268,3.52672316 1.33931419,3.57420867 C1.28625101,3.65203032 1.23394317,3.73180077 1.18390138,3.81157121 C1.17763828,3.82118524 1.17285441,3.83096167 1.16737814,3.84067314 C0.338698623,5.1658824 -0.0610062726,6.69795566 0.00754154337,8.25770173 C0.00769890751,8.26283354 0.00741565207,8.26799784 0.00754154337,8.27325957 C0.0141823097,8.42562242 0.0258902012,8.58009646 0.0417839785,8.73216699 C0.0426337448,8.7419759 0.0447424242,8.75126512 0.0463475384,8.76107403 C0.0627763537,8.91398904 0.0833910551,9.06726132 0.109230246,9.22050113 C0.371839509,10.7840149 1.08652445,12.1909434 2.15745032,13.2856758 C2.15993667,13.2882417 2.16251744,13.291035 2.16503527,13.2936983 C2.16591651,13.2947052 2.16689216,13.2952249 2.16774193,13.2961668 C2.45546651,13.5890373 2.7684323,13.8599191 3.10541185,14.1048494 C3.98728044,14.7461311 4.9692641,15.1700252 6.02385557,15.3653264 C6.3438398,15.424667 6.64950389,15.2048436 6.70691032,14.8747836 C6.76428528,14.5444963 6.55146603,14.2287924 6.23157622,14.1696467 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n                <path\r\n                    d=\"M9.22237925,14.6588011 C9.29073073,14.9263505 9.1292489,15.198652 8.86169949,15.2670034 C8.51639563,15.355219 8.1641424,15.4188128 7.8069689,15.4570516 C7.53239558,15.4864472 7.28598003,15.2876915 7.25658436,15.0131182 C7.22718869,14.7385449 7.42594445,14.4921293 7.70051776,14.4627336 C8.01004537,14.4295958 8.31515603,14.3745129 8.61417689,14.2981213 C8.8817263,14.2297698 9.15402777,14.3912517 9.22237925,14.6588011 Z M12.5552524,12.2886551 C12.7611952,12.4726175 12.7790139,12.7886982 12.5950515,12.994641 C12.3569806,13.2611574 12.1001968,13.5104915 11.8267859,13.7406023 C11.6155121,13.9184167 11.3000937,13.8912925 11.1222793,13.6800187 C10.9444648,13.4687448 10.9715891,13.1533264 11.1828629,12.975512 C11.4200152,12.7759175 11.6427598,12.5596351 11.8492666,12.3284542 C12.033229,12.1225114 12.3493096,12.1046927 12.5552524,12.2886551 Z M13.9945063,8.57622811 C14.2674538,8.61811209 14.4547678,8.87333344 14.4128838,9.14628095 C14.3584322,9.50112883 14.2787427,9.85020038 14.1746496,10.1914009 C14.0940709,10.4555252 13.8146338,10.6043183 13.5505094,10.5237395 C13.2863851,10.4431608 13.137592,10.1637237 13.2181708,9.89959931 C13.3082912,9.6041989 13.3772907,9.30195366 13.4244534,8.99460564 C13.4663374,8.72165813 13.7215588,8.53434413 13.9945063,8.57622811 Z M13.8741743,4.99628976 C14.0173723,5.32357494 14.1370467,5.66111195 14.2320931,6.00667963 C14.305325,6.27293459 14.1488489,6.54814305 13.8825939,6.62137492 C13.6163389,6.6946068 13.3411305,6.53813067 13.2678986,6.27187571 C13.1856167,5.97271686 13.0820133,5.68050756 12.958028,5.39713383 C12.847338,5.14414702 12.9626923,4.84932868 13.2156791,4.73863865 C13.4686659,4.62794862 13.7634843,4.74330295 13.8741743,4.99628976 Z\"\r\n                    id=\"Combined-Shape\"\r\n                ></path>\r\n                <path\r\n                    d=\"M6.49684035,4 C6.22234237,4 6,4.21290493 6,4.47514225 L6,9.20888548 L10.5252942,11.4469308 C10.5981282,11.4830116 10.6761155,11.5 10.7528554,11.5 C10.9325937,11.5 11.106194,11.4063595 11.1944548,11.2429754 C11.3203307,11.0097848 11.2250786,10.7233052 10.9813357,10.6028789 L6.9931227,8.63027395 L6.9931227,4.47514225 C6.99308988,4.21290493 6.77101009,4 6.49684035,4 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaBuyerApprovalIconTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anna-buyer-approval-icon-template', template: "<ng-container [ngTemplateOutlet]=\"buyerApprovalIcon\"></ng-container>\r\n\r\n<ng-template #buyerApprovalIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Awaiting-Buyer-Approval-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"time-left\" transform=\"translate(3.000000, 2.000000)\" fill=\"#4A4A4A\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M6.23157622,14.1696467 C5.70535057,14.0721422 5.2005579,13.9061054 4.72188769,13.6745242 C4.71622258,13.6714711 4.71115545,13.6679958 4.70520709,13.6652025 C4.59240848,13.6104091 4.47979871,13.551718 4.37065094,13.4903961 C4.37027327,13.4899414 4.36958087,13.4896491 4.36898288,13.4893893 C4.16872129,13.37558 3.97327504,13.2496557 3.78339947,13.1117139 C1.01467199,11.0989392 0.348958764,7.13679055 2.29945571,4.27950803 C2.72358352,3.65842885 3.23684237,3.14027823 3.80904983,2.72960334 C3.81609974,2.72453649 3.82314965,2.71950212 3.83013662,2.71440279 C5.84650619,1.28061347 8.58442178,1.183986 10.7254867,2.65733574 L10.2656372,3.34301728 C10.1377946,3.53386873 10.2164452,3.67294733 10.4402485,3.65216024 L12.4377343,3.46760989 C12.6618209,3.4468228 12.7958322,3.24677957 12.7355617,3.0234483 L12.1991703,1.02899228 C12.1391202,0.805401178 11.9853754,0.778637804 11.8574069,0.969456765 L11.3964873,1.6567623 C9.82523796,0.568265989 7.94067659,0.153206329 6.0701521,0.487943386 C5.88175576,0.521592483 5.69600314,0.562776899 5.51279981,0.610717118 C5.51138354,0.610976957 5.51025052,0.611139356 5.50911749,0.611399194 C5.50203611,0.613185585 5.4948603,0.615556612 5.48796775,0.617537881 C3.8749854,1.04500483 2.46767797,2.01585923 1.46347449,3.40105873 C1.4550083,3.41141979 1.44629033,3.4215535 1.43829623,3.432824 C1.40490356,3.47923766 1.37176268,3.52672316 1.33931419,3.57420867 C1.28625101,3.65203032 1.23394317,3.73180077 1.18390138,3.81157121 C1.17763828,3.82118524 1.17285441,3.83096167 1.16737814,3.84067314 C0.338698623,5.1658824 -0.0610062726,6.69795566 0.00754154337,8.25770173 C0.00769890751,8.26283354 0.00741565207,8.26799784 0.00754154337,8.27325957 C0.0141823097,8.42562242 0.0258902012,8.58009646 0.0417839785,8.73216699 C0.0426337448,8.7419759 0.0447424242,8.75126512 0.0463475384,8.76107403 C0.0627763537,8.91398904 0.0833910551,9.06726132 0.109230246,9.22050113 C0.371839509,10.7840149 1.08652445,12.1909434 2.15745032,13.2856758 C2.15993667,13.2882417 2.16251744,13.291035 2.16503527,13.2936983 C2.16591651,13.2947052 2.16689216,13.2952249 2.16774193,13.2961668 C2.45546651,13.5890373 2.7684323,13.8599191 3.10541185,14.1048494 C3.98728044,14.7461311 4.9692641,15.1700252 6.02385557,15.3653264 C6.3438398,15.424667 6.64950389,15.2048436 6.70691032,14.8747836 C6.76428528,14.5444963 6.55146603,14.2287924 6.23157622,14.1696467 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n                <path\r\n                    d=\"M9.22237925,14.6588011 C9.29073073,14.9263505 9.1292489,15.198652 8.86169949,15.2670034 C8.51639563,15.355219 8.1641424,15.4188128 7.8069689,15.4570516 C7.53239558,15.4864472 7.28598003,15.2876915 7.25658436,15.0131182 C7.22718869,14.7385449 7.42594445,14.4921293 7.70051776,14.4627336 C8.01004537,14.4295958 8.31515603,14.3745129 8.61417689,14.2981213 C8.8817263,14.2297698 9.15402777,14.3912517 9.22237925,14.6588011 Z M12.5552524,12.2886551 C12.7611952,12.4726175 12.7790139,12.7886982 12.5950515,12.994641 C12.3569806,13.2611574 12.1001968,13.5104915 11.8267859,13.7406023 C11.6155121,13.9184167 11.3000937,13.8912925 11.1222793,13.6800187 C10.9444648,13.4687448 10.9715891,13.1533264 11.1828629,12.975512 C11.4200152,12.7759175 11.6427598,12.5596351 11.8492666,12.3284542 C12.033229,12.1225114 12.3493096,12.1046927 12.5552524,12.2886551 Z M13.9945063,8.57622811 C14.2674538,8.61811209 14.4547678,8.87333344 14.4128838,9.14628095 C14.3584322,9.50112883 14.2787427,9.85020038 14.1746496,10.1914009 C14.0940709,10.4555252 13.8146338,10.6043183 13.5505094,10.5237395 C13.2863851,10.4431608 13.137592,10.1637237 13.2181708,9.89959931 C13.3082912,9.6041989 13.3772907,9.30195366 13.4244534,8.99460564 C13.4663374,8.72165813 13.7215588,8.53434413 13.9945063,8.57622811 Z M13.8741743,4.99628976 C14.0173723,5.32357494 14.1370467,5.66111195 14.2320931,6.00667963 C14.305325,6.27293459 14.1488489,6.54814305 13.8825939,6.62137492 C13.6163389,6.6946068 13.3411305,6.53813067 13.2678986,6.27187571 C13.1856167,5.97271686 13.0820133,5.68050756 12.958028,5.39713383 C12.847338,5.14414702 12.9626923,4.84932868 13.2156791,4.73863865 C13.4686659,4.62794862 13.7634843,4.74330295 13.8741743,4.99628976 Z\"\r\n                    id=\"Combined-Shape\"\r\n                ></path>\r\n                <path\r\n                    d=\"M6.49684035,4 C6.22234237,4 6,4.21290493 6,4.47514225 L6,9.20888548 L10.5252942,11.4469308 C10.5981282,11.4830116 10.6761155,11.5 10.7528554,11.5 C10.9325937,11.5 11.106194,11.4063595 11.1944548,11.2429754 C11.3203307,11.0097848 11.2250786,10.7233052 10.9813357,10.6028789 L6.9931227,8.63027395 L6.9931227,4.47514225 C6.99308988,4.21290493 6.77101009,4 6.49684035,4 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [""] }]
@@ -2403,7 +2411,7 @@ class AnnaLiveIconTemplateComponent {
     }
 }
 AnnaLiveIconTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaLiveIconTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaLiveIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaLiveIconTemplateComponent, selector: "anna-live-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"liveIcon\"></ng-container>\r\n<ng-template #liveIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Live-Icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"next\" transform=\"translate(2.000000, 2.000000)\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M8,0 C3.58171139,0 0,3.58171139 0,8 C0,12.4182886 3.58171139,16 8,16 C12.4182886,16 16,12.4182886 16,8 C15.9950435,3.58379835 12.4162343,0.00498913721 8,0 Z\"\r\n                    id=\"Path\"\r\n                    fill=\"#C2E361\"\r\n                ></path>\r\n                <path\r\n                    d=\"M8,16 C3.58171139,16 0,12.4182633 0,7.9999837 C0,3.58170409 3.58171139,0 8,0 C12.4182886,0 16,3.58170409 16,7.9999837 C15.9950435,12.416209 12.4162343,15.9950109 8,16 Z M8,0.695640832 C3.96590756,0.695640832 0.69564225,3.96589948 0.69564225,7.9999837 C0.69564225,12.0340679 3.96590756,15.3043266 8,15.3043266 C12.0340924,15.3043266 15.3043578,12.0340679 15.3043578,7.9999837 C15.2997599,3.96782339 12.0322011,0.700238655 8,0.695640832 Z\"\r\n                    id=\"Shape\"\r\n                    fill=\"#8BAC2A\"\r\n                ></path>\r\n                <circle id=\"Oval\" fill=\"#8BAC2A\" cx=\"8\" cy=\"8\" r=\"4\"></circle>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>", styles: [""], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+AnnaLiveIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaLiveIconTemplateComponent, selector: "anna-live-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"liveIcon\"></ng-container>\r\n<ng-template #liveIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Live-Icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"next\" transform=\"translate(2.000000, 2.000000)\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M8,0 C3.58171139,0 0,3.58171139 0,8 C0,12.4182886 3.58171139,16 8,16 C12.4182886,16 16,12.4182886 16,8 C15.9950435,3.58379835 12.4162343,0.00498913721 8,0 Z\"\r\n                    id=\"Path\"\r\n                    fill=\"#C2E361\"\r\n                ></path>\r\n                <path\r\n                    d=\"M8,16 C3.58171139,16 0,12.4182633 0,7.9999837 C0,3.58170409 3.58171139,0 8,0 C12.4182886,0 16,3.58170409 16,7.9999837 C15.9950435,12.416209 12.4162343,15.9950109 8,16 Z M8,0.695640832 C3.96590756,0.695640832 0.69564225,3.96589948 0.69564225,7.9999837 C0.69564225,12.0340679 3.96590756,15.3043266 8,15.3043266 C12.0340924,15.3043266 15.3043578,12.0340679 15.3043578,7.9999837 C15.2997599,3.96782339 12.0322011,0.700238655 8,0.695640832 Z\"\r\n                    id=\"Shape\"\r\n                    fill=\"#8BAC2A\"\r\n                ></path>\r\n                <circle id=\"Oval\" fill=\"#8BAC2A\" cx=\"8\" cy=\"8\" r=\"4\"></circle>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>", styles: [""], directives: [{ type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaLiveIconTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anna-live-icon-template', template: "<ng-container [ngTemplateOutlet]=\"liveIcon\"></ng-container>\r\n<ng-template #liveIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Live-Icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"next\" transform=\"translate(2.000000, 2.000000)\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M8,0 C3.58171139,0 0,3.58171139 0,8 C0,12.4182886 3.58171139,16 8,16 C12.4182886,16 16,12.4182886 16,8 C15.9950435,3.58379835 12.4162343,0.00498913721 8,0 Z\"\r\n                    id=\"Path\"\r\n                    fill=\"#C2E361\"\r\n                ></path>\r\n                <path\r\n                    d=\"M8,16 C3.58171139,16 0,12.4182633 0,7.9999837 C0,3.58170409 3.58171139,0 8,0 C12.4182886,0 16,3.58170409 16,7.9999837 C15.9950435,12.416209 12.4162343,15.9950109 8,16 Z M8,0.695640832 C3.96590756,0.695640832 0.69564225,3.96589948 0.69564225,7.9999837 C0.69564225,12.0340679 3.96590756,15.3043266 8,15.3043266 C12.0340924,15.3043266 15.3043578,12.0340679 15.3043578,7.9999837 C15.2997599,3.96782339 12.0322011,0.700238655 8,0.695640832 Z\"\r\n                    id=\"Shape\"\r\n                    fill=\"#8BAC2A\"\r\n                ></path>\r\n                <circle id=\"Oval\" fill=\"#8BAC2A\" cx=\"8\" cy=\"8\" r=\"4\"></circle>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>", styles: [""] }]
@@ -2415,7 +2423,7 @@ class AnnaNotifyIconTemplateComponent {
     }
 }
 AnnaNotifyIconTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNotifyIconTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaNotifyIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaNotifyIconTemplateComponent, selector: "anna-notify-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"notifyIcon\"></ng-container>\r\n\r\n<ng-template #notifyIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Notify-buyer-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"notification\" transform=\"translate(3.000000, 1.000000)\" fill=\"#4A4A4A\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M12.6666669,8.66366455 L12.6666669,7.08618164 C12.6666669,4.78491943 11.1196383,2.8344397 9.0000114,2.19737549 L9.0000114,1.4831543 C9.0000114,0.665343018 8.32711346,8.52651283e-13 7.50001599,8.52651283e-13 C6.67291852,8.52651283e-13 6.00002058,0.665343018 6.00002058,1.4831543 L6.00002058,2.19737549 C3.8803604,2.8344397 2.33336513,4.78488647 2.33336513,7.08618164 L2.33336513,8.66366455 C2.33336513,10.685105 1.55410085,12.6018677 0.139138508,14.060896 C0.000472265053,14.2038721 -0.0384942824,14.4148425 0.0401054772,14.5970398 C0.118705237,14.7792371 0.299704683,14.8974609 0.500037404,14.8974609 L5.05032349,14.8974609 C5.28258944,16.0243945 6.29271969,16.875 7.50001599,16.875 C8.70734563,16.875 9.71740921,16.0243945 9.9497085,14.8974609 L14.5,14.8974609 C14.7003273,14.8974609 14.8812934,14.7792371 14.9598932,14.5970398 C15.0384929,14.4148425 14.9995264,14.2038721 14.8608935,14.060896 C13.4459311,12.6018677 12.6666669,10.685072 12.6666669,8.66366455 Z M7.00001752,1.4831543 C7.00001752,1.21055054 7.22431684,0.988769531 7.50001752,0.988769531 C7.77571515,0.988769531 8.00001752,1.21055054 8.00001752,1.4831543 L8.00001752,2.0015332 C7.8354483,1.98584473 7.66868214,1.97753906 7.50001752,1.97753906 C7.33134984,1.97753906 7.16458369,1.98584473 7.00001752,2.0015332 L7.00001752,1.4831543 Z M7.50001599,15.8862305 C6.84818465,15.8862305 6.29241969,15.4728918 6.08602032,14.8974609 L8.91401167,14.8974609 C8.7076123,15.4728918 8.15184733,15.8862305 7.50001599,15.8862305 L7.50001599,15.8862305 Z M1.57770077,13.9086914 C2.71639729,12.3994336 3.33336207,10.5729785 3.33336207,8.66366455 L3.33336207,7.08618164 C3.33336207,4.81448364 5.20252302,2.96630859 7.50001599,2.96630859 C9.79750897,2.96630859 11.6666699,4.81448364 11.6666699,7.08618164 L11.6666699,8.66366455 C11.6666699,10.5729785 12.2836347,12.3994336 13.4223645,13.9086914\"\r\n                    id=\"Shape\"\r\n                ></path>\r\n                <path\r\n                    d=\"M13.7705926,7.02729272 C13.7705926,7.28835319 14.0458159,7.5 14.3852963,7.5 C14.7247767,7.5 15,7.28835319 15,7.02729272 C15,5.13331221 14.0408983,3.3526869 12.2993607,2.01344415 C12.0593394,1.82886771 11.670109,1.82883619 11.4300467,2.01344415 C11.1899844,2.1980521 11.1899844,2.49733883 11.4300467,2.68194678 C12.9393902,3.84263224 13.7705926,5.38583244 13.7705926,7.02729272 L13.7705926,7.02729272 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n                <path\r\n                    d=\"M0.614703713,7.5 C0.954184083,7.5 1.22940743,7.28835245 1.22940743,7.02729106 C1.22940743,5.38585655 2.06065077,3.84265095 3.56995328,2.68196143 C3.81001557,2.49735283 3.81001557,2.19806504 3.56995328,2.01345645 C3.32993197,1.82884785 2.94070158,1.82884785 2.70063929,2.01345645 C0.959101713,3.3527039 0,5.13330392 0,7.02729106 C0,7.28835245 0.275223342,7.5 0.614703713,7.5 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n\r\n", styles: [""], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+AnnaNotifyIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaNotifyIconTemplateComponent, selector: "anna-notify-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"notifyIcon\"></ng-container>\r\n\r\n<ng-template #notifyIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Notify-buyer-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"notification\" transform=\"translate(3.000000, 1.000000)\" fill=\"#4A4A4A\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M12.6666669,8.66366455 L12.6666669,7.08618164 C12.6666669,4.78491943 11.1196383,2.8344397 9.0000114,2.19737549 L9.0000114,1.4831543 C9.0000114,0.665343018 8.32711346,8.52651283e-13 7.50001599,8.52651283e-13 C6.67291852,8.52651283e-13 6.00002058,0.665343018 6.00002058,1.4831543 L6.00002058,2.19737549 C3.8803604,2.8344397 2.33336513,4.78488647 2.33336513,7.08618164 L2.33336513,8.66366455 C2.33336513,10.685105 1.55410085,12.6018677 0.139138508,14.060896 C0.000472265053,14.2038721 -0.0384942824,14.4148425 0.0401054772,14.5970398 C0.118705237,14.7792371 0.299704683,14.8974609 0.500037404,14.8974609 L5.05032349,14.8974609 C5.28258944,16.0243945 6.29271969,16.875 7.50001599,16.875 C8.70734563,16.875 9.71740921,16.0243945 9.9497085,14.8974609 L14.5,14.8974609 C14.7003273,14.8974609 14.8812934,14.7792371 14.9598932,14.5970398 C15.0384929,14.4148425 14.9995264,14.2038721 14.8608935,14.060896 C13.4459311,12.6018677 12.6666669,10.685072 12.6666669,8.66366455 Z M7.00001752,1.4831543 C7.00001752,1.21055054 7.22431684,0.988769531 7.50001752,0.988769531 C7.77571515,0.988769531 8.00001752,1.21055054 8.00001752,1.4831543 L8.00001752,2.0015332 C7.8354483,1.98584473 7.66868214,1.97753906 7.50001752,1.97753906 C7.33134984,1.97753906 7.16458369,1.98584473 7.00001752,2.0015332 L7.00001752,1.4831543 Z M7.50001599,15.8862305 C6.84818465,15.8862305 6.29241969,15.4728918 6.08602032,14.8974609 L8.91401167,14.8974609 C8.7076123,15.4728918 8.15184733,15.8862305 7.50001599,15.8862305 L7.50001599,15.8862305 Z M1.57770077,13.9086914 C2.71639729,12.3994336 3.33336207,10.5729785 3.33336207,8.66366455 L3.33336207,7.08618164 C3.33336207,4.81448364 5.20252302,2.96630859 7.50001599,2.96630859 C9.79750897,2.96630859 11.6666699,4.81448364 11.6666699,7.08618164 L11.6666699,8.66366455 C11.6666699,10.5729785 12.2836347,12.3994336 13.4223645,13.9086914\"\r\n                    id=\"Shape\"\r\n                ></path>\r\n                <path\r\n                    d=\"M13.7705926,7.02729272 C13.7705926,7.28835319 14.0458159,7.5 14.3852963,7.5 C14.7247767,7.5 15,7.28835319 15,7.02729272 C15,5.13331221 14.0408983,3.3526869 12.2993607,2.01344415 C12.0593394,1.82886771 11.670109,1.82883619 11.4300467,2.01344415 C11.1899844,2.1980521 11.1899844,2.49733883 11.4300467,2.68194678 C12.9393902,3.84263224 13.7705926,5.38583244 13.7705926,7.02729272 L13.7705926,7.02729272 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n                <path\r\n                    d=\"M0.614703713,7.5 C0.954184083,7.5 1.22940743,7.28835245 1.22940743,7.02729106 C1.22940743,5.38585655 2.06065077,3.84265095 3.56995328,2.68196143 C3.81001557,2.49735283 3.81001557,2.19806504 3.56995328,2.01345645 C3.32993197,1.82884785 2.94070158,1.82884785 2.70063929,2.01345645 C0.959101713,3.3527039 0,5.13330392 0,7.02729106 C0,7.28835245 0.275223342,7.5 0.614703713,7.5 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n\r\n", styles: [""], directives: [{ type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaNotifyIconTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anna-notify-icon-template', template: "<ng-container [ngTemplateOutlet]=\"notifyIcon\"></ng-container>\r\n\r\n<ng-template #notifyIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Notify-buyer-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <g id=\"notification\" transform=\"translate(3.000000, 1.000000)\" fill=\"#4A4A4A\" fill-rule=\"nonzero\">\r\n                <path\r\n                    d=\"M12.6666669,8.66366455 L12.6666669,7.08618164 C12.6666669,4.78491943 11.1196383,2.8344397 9.0000114,2.19737549 L9.0000114,1.4831543 C9.0000114,0.665343018 8.32711346,8.52651283e-13 7.50001599,8.52651283e-13 C6.67291852,8.52651283e-13 6.00002058,0.665343018 6.00002058,1.4831543 L6.00002058,2.19737549 C3.8803604,2.8344397 2.33336513,4.78488647 2.33336513,7.08618164 L2.33336513,8.66366455 C2.33336513,10.685105 1.55410085,12.6018677 0.139138508,14.060896 C0.000472265053,14.2038721 -0.0384942824,14.4148425 0.0401054772,14.5970398 C0.118705237,14.7792371 0.299704683,14.8974609 0.500037404,14.8974609 L5.05032349,14.8974609 C5.28258944,16.0243945 6.29271969,16.875 7.50001599,16.875 C8.70734563,16.875 9.71740921,16.0243945 9.9497085,14.8974609 L14.5,14.8974609 C14.7003273,14.8974609 14.8812934,14.7792371 14.9598932,14.5970398 C15.0384929,14.4148425 14.9995264,14.2038721 14.8608935,14.060896 C13.4459311,12.6018677 12.6666669,10.685072 12.6666669,8.66366455 Z M7.00001752,1.4831543 C7.00001752,1.21055054 7.22431684,0.988769531 7.50001752,0.988769531 C7.77571515,0.988769531 8.00001752,1.21055054 8.00001752,1.4831543 L8.00001752,2.0015332 C7.8354483,1.98584473 7.66868214,1.97753906 7.50001752,1.97753906 C7.33134984,1.97753906 7.16458369,1.98584473 7.00001752,2.0015332 L7.00001752,1.4831543 Z M7.50001599,15.8862305 C6.84818465,15.8862305 6.29241969,15.4728918 6.08602032,14.8974609 L8.91401167,14.8974609 C8.7076123,15.4728918 8.15184733,15.8862305 7.50001599,15.8862305 L7.50001599,15.8862305 Z M1.57770077,13.9086914 C2.71639729,12.3994336 3.33336207,10.5729785 3.33336207,8.66366455 L3.33336207,7.08618164 C3.33336207,4.81448364 5.20252302,2.96630859 7.50001599,2.96630859 C9.79750897,2.96630859 11.6666699,4.81448364 11.6666699,7.08618164 L11.6666699,8.66366455 C11.6666699,10.5729785 12.2836347,12.3994336 13.4223645,13.9086914\"\r\n                    id=\"Shape\"\r\n                ></path>\r\n                <path\r\n                    d=\"M13.7705926,7.02729272 C13.7705926,7.28835319 14.0458159,7.5 14.3852963,7.5 C14.7247767,7.5 15,7.28835319 15,7.02729272 C15,5.13331221 14.0408983,3.3526869 12.2993607,2.01344415 C12.0593394,1.82886771 11.670109,1.82883619 11.4300467,2.01344415 C11.1899844,2.1980521 11.1899844,2.49733883 11.4300467,2.68194678 C12.9393902,3.84263224 13.7705926,5.38583244 13.7705926,7.02729272 L13.7705926,7.02729272 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n                <path\r\n                    d=\"M0.614703713,7.5 C0.954184083,7.5 1.22940743,7.28835245 1.22940743,7.02729106 C1.22940743,5.38585655 2.06065077,3.84265095 3.56995328,2.68196143 C3.81001557,2.49735283 3.81001557,2.19806504 3.56995328,2.01345645 C3.32993197,1.82884785 2.94070158,1.82884785 2.70063929,2.01345645 C0.959101713,3.3527039 0,5.13330392 0,7.02729106 C0,7.28835245 0.275223342,7.5 0.614703713,7.5 Z\"\r\n                    id=\"Path\"\r\n                ></path>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n\r\n", styles: [""] }]
@@ -2427,7 +2435,7 @@ class AnnaPayForPerformanceIconTemplateComponent {
     }
 }
 AnnaPayForPerformanceIconTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaPayForPerformanceIconTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaPayForPerformanceIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaPayForPerformanceIconTemplateComponent, selector: "anna-pay-for-performance-icon-template", inputs: { color: "color", width: "width", height: "height" }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"PayForPerformanceIcon\"\r\n              [ngTemplateOutletContext]=\"{  color: color,width: width,height:height}\"> \r\n</ng-container>\r\n\r\n<ng-template #PayForPerformanceIcon let-color=\"color\" let-width=\"width\" let-height=\"height\">\r\n  <svg [attr.width]=\"width\" [attr.height]=\"height\" viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"02.-PAY-FOR-PERFORMANCE-MARKED\" transform=\"translate(-100.000000, -537.000000)\" [attr.fill]=\"color\" fill-rule=\"nonzero\">\r\n            <g id=\"PFP\" transform=\"translate(100.000000, 537.000000)\">\r\n                <path d=\"M20,3.125 L20,8.3984375 C20,8.82995605 19.6502686,9.1796875 19.21875,9.1796875 C18.7872314,9.1796875 18.4375,8.82995605 18.4375,8.3984375 L18.4375,3.125 C18.4375,2.26348875 17.7365112,1.5625 16.875,1.5625 L3.125,1.5625 C2.26348875,1.5625 1.5625,2.26348875 1.5625,3.125 L1.5625,16.875 C1.5625,17.7365112 2.26348875,18.4375 3.125,18.4375 L12.96875,18.4375 C13.4002686,18.4375 13.75,18.7872314 13.75,19.21875 C13.75,19.6502686 13.4002686,20 12.96875,20 L3.125,20 C1.40182496,20 0,18.598175 0,16.875 L0,3.125 C0,1.40182496 1.40182496,0 3.125,0 L16.875,0 C18.598175,0 20,1.40182496 20,3.125 Z M15.9622314,5.43584332 C15.9447753,5.38514929 15.9230346,5.33649554 15.8936766,5.29255022 C15.8924071,5.290196 15.891455,5.28799875 15.8901855,5.28580147 C15.8589232,5.23981585 15.8206786,5.19995115 15.7789427,5.16322545 C15.7689451,5.15427945 15.7584715,5.1459612 15.7475217,5.13764299 C15.7022947,5.10280065 15.6545285,5.07203893 15.6008908,5.04975236 C15.6008908,5.04975236 15.6008908,5.04975236 15.6005734,5.04975236 C15.5488399,5.02825056 15.4929805,5.01600867 15.4358516,5.00863213 C15.4218867,5.00674875 15.4082392,5.00549317 15.3942744,5.00455147 C15.3791987,5.0036098 15.3652338,5 15.3499994,5 L13.0749975,5 C12.7161959,5 12.4249969,5.28799875 12.4249969,5.64285714 C12.4249969,5.99771553 12.7161959,6.28571429 13.0749975,6.28571429 L13.7624492,6.28571429 L11.4499961,8.53571429 C11.4415854,8.52708216 11.4320639,8.5182931 11.4230185,8.5102888 L10.4034253,7.61160714 C9.89545371,7.12554061 9.08263561,7.13071987 8.58291595,7.62416295 L3.19264032,12.9001116 C2.937623,13.1498152 2.93555998,13.557094 3.18787956,13.8094657 C3.31530888,13.9362793 3.48225238,14 3.64998933,14 C3.8153459,14 3.98054383,13.9383196 4.10733834,13.8141741 L9.5,8.53571429 C9.50840503,8.54434641 9.51792652,8.55313547 9.52697193,8.56113977 L10.5462477,9.45982143 C10.7899979,9.69320244 11.1100788,9.82142857 11.4499961,9.82142857 C11.7970545,9.82142857 12.1233243,9.68770926 12.3651702,9.44852121 L14.6999989,7.1770194 L14.6999989,7.89285714 C14.6999989,8.24771553 14.9911979,8.53571429 15.3499994,8.53571429 C15.708801,8.53571429 16,8.24771553 16,7.89285714 L16,5.64285714 C16,5.58431572 15.9895264,5.52844239 15.9746094,5.47445244 C15.9711181,5.46126884 15.9668335,5.44871304 15.9622314,5.43584332 Z M17.7789307,14.21875 L17.0629883,14.21875 C16.71875,14.21875 16.4280701,13.9146423 16.4280701,13.5546875 L16.4280701,13.2698059 C16.4280701,12.9200745 16.7010498,12.65625 17.0629883,12.65625 L17.7400207,12.65625 C17.9388428,12.65625 18.1446838,12.7894592 18.1446838,13.0123902 C18.1446838,13.4437561 18.4945679,13.7936402 18.9259338,13.7936402 C19.3574524,13.7936402 19.7071838,13.4437561 19.7071838,13.0123902 C19.7071838,12.0761109 19.0158081,11.2947082 18.1048584,11.1273193 L18.1048584,10.625 C18.1048584,10.1934814 17.755127,9.84375 17.3236084,9.84375 C16.8920898,9.84375 16.5423584,10.1934814 16.5423584,10.625 L16.5423584,11.1541748 C16.1557007,11.2454223 15.8015442,11.4382934 15.5142212,11.7193604 C15.0959778,12.1286011 14.8655701,12.6792908 14.8655701,13.2696533 L14.8655701,13.5546875 C14.8655701,14.7824097 15.8512879,15.78125 17.0629883,15.78125 L17.7789307,15.78125 C18.1373596,15.78125 18.4181213,16.053009 18.4181213,16.3999939 L18.4181213,16.5917969 C18.4181213,16.9313049 18.1433105,17.1875 17.7789307,17.1875 L16.615448,17.1875 C16.4233398,17.1875 16.2290955,17.0666504 16.2290955,16.8359375 C16.2290955,16.4044189 15.879364,16.0546875 15.4478455,16.0546875 C15.0163269,16.0546875 14.6665955,16.4044189 14.6665955,16.8359375 C14.6665955,17.8851318 15.4847717,18.7117004 16.5423584,18.7481689 L16.5423584,19.1796875 C16.5423584,19.6112061 16.8920898,19.9609375 17.3236084,19.9609375 C17.755127,19.9609375 18.1048584,19.6112061 18.1048584,19.1796875 L18.1048584,18.7272644 C19.1795349,18.5771179 19.9806213,17.6931763 19.9806213,16.5917969 L19.9806213,16.3999939 C19.9806213,15.8096313 19.7496033,15.2581787 19.3299866,14.8472595 C18.9161682,14.4419861 18.3653259,14.21875 17.7789307,14.21875 Z\" id=\"Shape-Copy-9\"></path>\r\n            </g>\r\n        </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>", styles: [""], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AnnaPayForPerformanceIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaPayForPerformanceIconTemplateComponent, selector: "anna-pay-for-performance-icon-template", inputs: { color: "color", width: "width", height: "height" }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"PayForPerformanceIcon\"\r\n              [ngTemplateOutletContext]=\"{  color: color,width: width,height:height}\"> \r\n</ng-container>\r\n\r\n<ng-template #PayForPerformanceIcon let-color=\"color\" let-width=\"width\" let-height=\"height\">\r\n  <svg [attr.width]=\"width\" [attr.height]=\"height\" viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"02.-PAY-FOR-PERFORMANCE-MARKED\" transform=\"translate(-100.000000, -537.000000)\" [attr.fill]=\"color\" fill-rule=\"nonzero\">\r\n            <g id=\"PFP\" transform=\"translate(100.000000, 537.000000)\">\r\n                <path d=\"M20,3.125 L20,8.3984375 C20,8.82995605 19.6502686,9.1796875 19.21875,9.1796875 C18.7872314,9.1796875 18.4375,8.82995605 18.4375,8.3984375 L18.4375,3.125 C18.4375,2.26348875 17.7365112,1.5625 16.875,1.5625 L3.125,1.5625 C2.26348875,1.5625 1.5625,2.26348875 1.5625,3.125 L1.5625,16.875 C1.5625,17.7365112 2.26348875,18.4375 3.125,18.4375 L12.96875,18.4375 C13.4002686,18.4375 13.75,18.7872314 13.75,19.21875 C13.75,19.6502686 13.4002686,20 12.96875,20 L3.125,20 C1.40182496,20 0,18.598175 0,16.875 L0,3.125 C0,1.40182496 1.40182496,0 3.125,0 L16.875,0 C18.598175,0 20,1.40182496 20,3.125 Z M15.9622314,5.43584332 C15.9447753,5.38514929 15.9230346,5.33649554 15.8936766,5.29255022 C15.8924071,5.290196 15.891455,5.28799875 15.8901855,5.28580147 C15.8589232,5.23981585 15.8206786,5.19995115 15.7789427,5.16322545 C15.7689451,5.15427945 15.7584715,5.1459612 15.7475217,5.13764299 C15.7022947,5.10280065 15.6545285,5.07203893 15.6008908,5.04975236 C15.6008908,5.04975236 15.6008908,5.04975236 15.6005734,5.04975236 C15.5488399,5.02825056 15.4929805,5.01600867 15.4358516,5.00863213 C15.4218867,5.00674875 15.4082392,5.00549317 15.3942744,5.00455147 C15.3791987,5.0036098 15.3652338,5 15.3499994,5 L13.0749975,5 C12.7161959,5 12.4249969,5.28799875 12.4249969,5.64285714 C12.4249969,5.99771553 12.7161959,6.28571429 13.0749975,6.28571429 L13.7624492,6.28571429 L11.4499961,8.53571429 C11.4415854,8.52708216 11.4320639,8.5182931 11.4230185,8.5102888 L10.4034253,7.61160714 C9.89545371,7.12554061 9.08263561,7.13071987 8.58291595,7.62416295 L3.19264032,12.9001116 C2.937623,13.1498152 2.93555998,13.557094 3.18787956,13.8094657 C3.31530888,13.9362793 3.48225238,14 3.64998933,14 C3.8153459,14 3.98054383,13.9383196 4.10733834,13.8141741 L9.5,8.53571429 C9.50840503,8.54434641 9.51792652,8.55313547 9.52697193,8.56113977 L10.5462477,9.45982143 C10.7899979,9.69320244 11.1100788,9.82142857 11.4499961,9.82142857 C11.7970545,9.82142857 12.1233243,9.68770926 12.3651702,9.44852121 L14.6999989,7.1770194 L14.6999989,7.89285714 C14.6999989,8.24771553 14.9911979,8.53571429 15.3499994,8.53571429 C15.708801,8.53571429 16,8.24771553 16,7.89285714 L16,5.64285714 C16,5.58431572 15.9895264,5.52844239 15.9746094,5.47445244 C15.9711181,5.46126884 15.9668335,5.44871304 15.9622314,5.43584332 Z M17.7789307,14.21875 L17.0629883,14.21875 C16.71875,14.21875 16.4280701,13.9146423 16.4280701,13.5546875 L16.4280701,13.2698059 C16.4280701,12.9200745 16.7010498,12.65625 17.0629883,12.65625 L17.7400207,12.65625 C17.9388428,12.65625 18.1446838,12.7894592 18.1446838,13.0123902 C18.1446838,13.4437561 18.4945679,13.7936402 18.9259338,13.7936402 C19.3574524,13.7936402 19.7071838,13.4437561 19.7071838,13.0123902 C19.7071838,12.0761109 19.0158081,11.2947082 18.1048584,11.1273193 L18.1048584,10.625 C18.1048584,10.1934814 17.755127,9.84375 17.3236084,9.84375 C16.8920898,9.84375 16.5423584,10.1934814 16.5423584,10.625 L16.5423584,11.1541748 C16.1557007,11.2454223 15.8015442,11.4382934 15.5142212,11.7193604 C15.0959778,12.1286011 14.8655701,12.6792908 14.8655701,13.2696533 L14.8655701,13.5546875 C14.8655701,14.7824097 15.8512879,15.78125 17.0629883,15.78125 L17.7789307,15.78125 C18.1373596,15.78125 18.4181213,16.053009 18.4181213,16.3999939 L18.4181213,16.5917969 C18.4181213,16.9313049 18.1433105,17.1875 17.7789307,17.1875 L16.615448,17.1875 C16.4233398,17.1875 16.2290955,17.0666504 16.2290955,16.8359375 C16.2290955,16.4044189 15.879364,16.0546875 15.4478455,16.0546875 C15.0163269,16.0546875 14.6665955,16.4044189 14.6665955,16.8359375 C14.6665955,17.8851318 15.4847717,18.7117004 16.5423584,18.7481689 L16.5423584,19.1796875 C16.5423584,19.6112061 16.8920898,19.9609375 17.3236084,19.9609375 C17.755127,19.9609375 18.1048584,19.6112061 18.1048584,19.1796875 L18.1048584,18.7272644 C19.1795349,18.5771179 19.9806213,17.6931763 19.9806213,16.5917969 L19.9806213,16.3999939 C19.9806213,15.8096313 19.7496033,15.2581787 19.3299866,14.8472595 C18.9161682,14.4419861 18.3653259,14.21875 17.7789307,14.21875 Z\" id=\"Shape-Copy-9\"></path>\r\n            </g>\r\n        </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>", styles: [""], directives: [{ type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaPayForPerformanceIconTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anna-pay-for-performance-icon-template', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"PayForPerformanceIcon\"\r\n              [ngTemplateOutletContext]=\"{  color: color,width: width,height:height}\"> \r\n</ng-container>\r\n\r\n<ng-template #PayForPerformanceIcon let-color=\"color\" let-width=\"width\" let-height=\"height\">\r\n  <svg [attr.width]=\"width\" [attr.height]=\"height\" viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"02.-PAY-FOR-PERFORMANCE-MARKED\" transform=\"translate(-100.000000, -537.000000)\" [attr.fill]=\"color\" fill-rule=\"nonzero\">\r\n            <g id=\"PFP\" transform=\"translate(100.000000, 537.000000)\">\r\n                <path d=\"M20,3.125 L20,8.3984375 C20,8.82995605 19.6502686,9.1796875 19.21875,9.1796875 C18.7872314,9.1796875 18.4375,8.82995605 18.4375,8.3984375 L18.4375,3.125 C18.4375,2.26348875 17.7365112,1.5625 16.875,1.5625 L3.125,1.5625 C2.26348875,1.5625 1.5625,2.26348875 1.5625,3.125 L1.5625,16.875 C1.5625,17.7365112 2.26348875,18.4375 3.125,18.4375 L12.96875,18.4375 C13.4002686,18.4375 13.75,18.7872314 13.75,19.21875 C13.75,19.6502686 13.4002686,20 12.96875,20 L3.125,20 C1.40182496,20 0,18.598175 0,16.875 L0,3.125 C0,1.40182496 1.40182496,0 3.125,0 L16.875,0 C18.598175,0 20,1.40182496 20,3.125 Z M15.9622314,5.43584332 C15.9447753,5.38514929 15.9230346,5.33649554 15.8936766,5.29255022 C15.8924071,5.290196 15.891455,5.28799875 15.8901855,5.28580147 C15.8589232,5.23981585 15.8206786,5.19995115 15.7789427,5.16322545 C15.7689451,5.15427945 15.7584715,5.1459612 15.7475217,5.13764299 C15.7022947,5.10280065 15.6545285,5.07203893 15.6008908,5.04975236 C15.6008908,5.04975236 15.6008908,5.04975236 15.6005734,5.04975236 C15.5488399,5.02825056 15.4929805,5.01600867 15.4358516,5.00863213 C15.4218867,5.00674875 15.4082392,5.00549317 15.3942744,5.00455147 C15.3791987,5.0036098 15.3652338,5 15.3499994,5 L13.0749975,5 C12.7161959,5 12.4249969,5.28799875 12.4249969,5.64285714 C12.4249969,5.99771553 12.7161959,6.28571429 13.0749975,6.28571429 L13.7624492,6.28571429 L11.4499961,8.53571429 C11.4415854,8.52708216 11.4320639,8.5182931 11.4230185,8.5102888 L10.4034253,7.61160714 C9.89545371,7.12554061 9.08263561,7.13071987 8.58291595,7.62416295 L3.19264032,12.9001116 C2.937623,13.1498152 2.93555998,13.557094 3.18787956,13.8094657 C3.31530888,13.9362793 3.48225238,14 3.64998933,14 C3.8153459,14 3.98054383,13.9383196 4.10733834,13.8141741 L9.5,8.53571429 C9.50840503,8.54434641 9.51792652,8.55313547 9.52697193,8.56113977 L10.5462477,9.45982143 C10.7899979,9.69320244 11.1100788,9.82142857 11.4499961,9.82142857 C11.7970545,9.82142857 12.1233243,9.68770926 12.3651702,9.44852121 L14.6999989,7.1770194 L14.6999989,7.89285714 C14.6999989,8.24771553 14.9911979,8.53571429 15.3499994,8.53571429 C15.708801,8.53571429 16,8.24771553 16,7.89285714 L16,5.64285714 C16,5.58431572 15.9895264,5.52844239 15.9746094,5.47445244 C15.9711181,5.46126884 15.9668335,5.44871304 15.9622314,5.43584332 Z M17.7789307,14.21875 L17.0629883,14.21875 C16.71875,14.21875 16.4280701,13.9146423 16.4280701,13.5546875 L16.4280701,13.2698059 C16.4280701,12.9200745 16.7010498,12.65625 17.0629883,12.65625 L17.7400207,12.65625 C17.9388428,12.65625 18.1446838,12.7894592 18.1446838,13.0123902 C18.1446838,13.4437561 18.4945679,13.7936402 18.9259338,13.7936402 C19.3574524,13.7936402 19.7071838,13.4437561 19.7071838,13.0123902 C19.7071838,12.0761109 19.0158081,11.2947082 18.1048584,11.1273193 L18.1048584,10.625 C18.1048584,10.1934814 17.755127,9.84375 17.3236084,9.84375 C16.8920898,9.84375 16.5423584,10.1934814 16.5423584,10.625 L16.5423584,11.1541748 C16.1557007,11.2454223 15.8015442,11.4382934 15.5142212,11.7193604 C15.0959778,12.1286011 14.8655701,12.6792908 14.8655701,13.2696533 L14.8655701,13.5546875 C14.8655701,14.7824097 15.8512879,15.78125 17.0629883,15.78125 L17.7789307,15.78125 C18.1373596,15.78125 18.4181213,16.053009 18.4181213,16.3999939 L18.4181213,16.5917969 C18.4181213,16.9313049 18.1433105,17.1875 17.7789307,17.1875 L16.615448,17.1875 C16.4233398,17.1875 16.2290955,17.0666504 16.2290955,16.8359375 C16.2290955,16.4044189 15.879364,16.0546875 15.4478455,16.0546875 C15.0163269,16.0546875 14.6665955,16.4044189 14.6665955,16.8359375 C14.6665955,17.8851318 15.4847717,18.7117004 16.5423584,18.7481689 L16.5423584,19.1796875 C16.5423584,19.6112061 16.8920898,19.9609375 17.3236084,19.9609375 C17.755127,19.9609375 18.1048584,19.6112061 18.1048584,19.1796875 L18.1048584,18.7272644 C19.1795349,18.5771179 19.9806213,17.6931763 19.9806213,16.5917969 L19.9806213,16.3999939 C19.9806213,15.8096313 19.7496033,15.2581787 19.3299866,14.8472595 C18.9161682,14.4419861 18.3653259,14.21875 17.7789307,14.21875 Z\" id=\"Shape-Copy-9\"></path>\r\n            </g>\r\n        </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>", styles: [""] }]
@@ -2445,7 +2453,7 @@ class AnnaRejectedIconTemplateComponent {
     }
 }
 AnnaRejectedIconTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaRejectedIconTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaRejectedIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaRejectedIconTemplateComponent, selector: "anna-rejected-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"rejectedIcon\"></ng-container>\r\n\r\n<ng-template #rejectedIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Buyer-rejected-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <path\r\n                d=\"M15.7822266,4.21777344 C14.3671875,2.80276367 12.4951465,2 10.5,2 C6.37918945,2 3,5.37253906 3,9.5 C3,13.6296289 6.37133789,17 10.5,17 C14.6105273,17 18,13.6429004 18,9.5 C18,7.50485352 17.1972656,5.6327832 15.7822266,4.21777344 Z M10.5,15.2128906 C7.34220703,15.2128906 4.78710938,12.664502 4.78710938,9.5 C4.78710938,8.26950195 5.17382812,7.10055664 5.88574219,6.13375977 L13.8662402,14.1054395 C12.8993848,14.8261719 11.730498,15.2128906 10.5,15.2128906 Z M15.1054688,12.8661816 L7.13375977,4.88574219 C8.10061523,4.17382813 9.26950195,3.78710938 10.5,3.78710938 C13.6578809,3.78710938 16.2128906,6.33549805 16.2128906,9.5 C16.2128906,10.7304395 15.8261719,11.8993848 15.1054688,12.8661816 Z\"\r\n                id=\"Shape\"\r\n                fill=\"#4A4A4A\"\r\n                fill-rule=\"nonzero\"\r\n            ></path>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+AnnaRejectedIconTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnnaRejectedIconTemplateComponent, selector: "anna-rejected-icon-template", ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"rejectedIcon\"></ng-container>\r\n\r\n<ng-template #rejectedIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Buyer-rejected-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <path\r\n                d=\"M15.7822266,4.21777344 C14.3671875,2.80276367 12.4951465,2 10.5,2 C6.37918945,2 3,5.37253906 3,9.5 C3,13.6296289 6.37133789,17 10.5,17 C14.6105273,17 18,13.6429004 18,9.5 C18,7.50485352 17.1972656,5.6327832 15.7822266,4.21777344 Z M10.5,15.2128906 C7.34220703,15.2128906 4.78710938,12.664502 4.78710938,9.5 C4.78710938,8.26950195 5.17382812,7.10055664 5.88574219,6.13375977 L13.8662402,14.1054395 C12.8993848,14.8261719 11.730498,15.2128906 10.5,15.2128906 Z M15.1054688,12.8661816 L7.13375977,4.88574219 C8.10061523,4.17382813 9.26950195,3.78710938 10.5,3.78710938 C13.6578809,3.78710938 16.2128906,6.33549805 16.2128906,9.5 C16.2128906,10.7304395 15.8261719,11.8993848 15.1054688,12.8661816 Z\"\r\n                id=\"Shape\"\r\n                fill=\"#4A4A4A\"\r\n                fill-rule=\"nonzero\"\r\n            ></path>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnnaRejectedIconTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anna-rejected-icon-template', template: "<ng-container [ngTemplateOutlet]=\"rejectedIcon\"></ng-container>\r\n\r\n<ng-template #rejectedIcon>\r\n    <svg width=\"15px\" height=\"15px\" viewBox=\"0 0 20 20\">\r\n        <g id=\"Buyer-rejected-icon\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <path\r\n                d=\"M15.7822266,4.21777344 C14.3671875,2.80276367 12.4951465,2 10.5,2 C6.37918945,2 3,5.37253906 3,9.5 C3,13.6296289 6.37133789,17 10.5,17 C14.6105273,17 18,13.6429004 18,9.5 C18,7.50485352 17.1972656,5.6327832 15.7822266,4.21777344 Z M10.5,15.2128906 C7.34220703,15.2128906 4.78710938,12.664502 4.78710938,9.5 C4.78710938,8.26950195 5.17382812,7.10055664 5.88574219,6.13375977 L13.8662402,14.1054395 C12.8993848,14.8261719 11.730498,15.2128906 10.5,15.2128906 Z M15.1054688,12.8661816 L7.13375977,4.88574219 C8.10061523,4.17382813 9.26950195,3.78710938 10.5,3.78710938 C13.6578809,3.78710938 16.2128906,6.33549805 16.2128906,9.5 C16.2128906,10.7304395 15.8261719,11.8993848 15.1054688,12.8661816 Z\"\r\n                id=\"Shape\"\r\n                fill=\"#4A4A4A\"\r\n                fill-rule=\"nonzero\"\r\n            ></path>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [""] }]
@@ -3003,7 +3011,7 @@ class AnnaFilterService {
             const dataSet = new Set(data); //created a set from the data
             const toolTipdata = [...dataSet].map((x) => new tooltipModelForColumnLevelFiltering(x));
             this.tooltipMap.set(value[0], toolTipdata); //setting the key value pair in the tooltipMap
-            this.tooltipSelectedMap.set(value[0], map$1(toolTipdata, "data")); //setting the key value pair in tooltipSelectedMap
+            this.tooltipSelectedMap.set(value[0], map(toolTipdata, "data")); //setting the key value pair in tooltipSelectedMap
             return toolTipdata;
         }
     }
@@ -3330,8 +3338,8 @@ class AnnaFilterService {
         }
     }
     initializeTimeFilterData(clonedData, key = "startEndTime") {
-        let startTimeArr = map$1(clonedData, "startTime");
-        let endTimeArr = map$1(clonedData, "endTime");
+        let startTimeArr = map(clonedData, "startTime");
+        let endTimeArr = map(clonedData, "endTime");
         startTimeArr.sort((a, b) => {
             return this.dateTimeFormatService.sortByTimeAscending(a, b);
         });