@annalib/anna-core 10.6.0 → 10.7.0

package/fesm2015/annalib-anna-core.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, HostListener, Injectable, ViewChildren, ViewEncapsulation, Optional, Inject, ViewChild, forwardRef, ContentChildren, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { DatePipe, CommonModule } from '@angular/common';
-import * as i6 from '@angular/forms';
+import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i7 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -886,7 +886,7 @@ class AnnaWeekCalendarComponent {
     }
 }
 AnnaWeekCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaWeekCalendarComponent, deps: [{ token: i1.NgbCalendar }, { token: i1.NgbDatepickerConfig }, { token: AnnaDateTimeFormatService }, { token: AnnaGlobalConfigService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaWeekCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+AnnaWeekCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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"] }]
@@ -984,7 +984,7 @@ class AnnaCalendarFilterComponent {
     }
 }
 AnnaCalendarFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaCalendarFilterComponent, deps: [{ token: AnnaDateTimeFormatService }, { token: i1.NgbDatepickerConfig }], target: i0.ɵɵFactoryTarget.Component });
-AnnaCalendarFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: { maxDate: "maxDate", label: "label", minDate: "minDate", selectedFromDate: "selectedFromDate", selectedToDate: "selectedToDate" }, outputs: { selectedDate: "selectedDate", apply: "apply", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n                 \r\n<p class=\"calendar-label\">{{label | titlecase }}</p>\r\n<form>\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:15px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:29px}\n"], dependencies: [{ kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AnnaCalendarFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: { maxDate: "maxDate", label: "label", minDate: "minDate", selectedFromDate: "selectedFromDate", selectedToDate: "selectedToDate" }, outputs: { selectedDate: "selectedDate", apply: "apply", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n                 \r\n<p class=\"calendar-label\">{{label | titlecase }}</p>\r\n<form>\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:15px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:29px}\n"], dependencies: [{ kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaCalendarFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: "anna-core-calendar-filter-lib", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n                 \r\n<p class=\"calendar-label\">{{label | titlecase }}</p>\r\n<form>\r\n    <div class=\"col-12\">\r\n      <div class=\"dp-hidden position-absolute\">\r\n        <div class=\"input-group\">\r\n          <input name=\"datepicker\"\r\n                 class=\"form-control\"\r\n                 ngbDatepicker\r\n                 #datepicker=\"ngbDatepicker\"\r\n                 (dateSelect)=\"onDateSelection($event)\"\r\n                 [displayMonths]=\"1\"\r\n                 [dayTemplate]=\"t\"\r\n                 [maxDate]=\"maxDate\"\r\n                 [minDate]=\"minDate\"\r\n                 [autoClose]=\"'outside'\"\r\n                 [startDate]=\"fromDate\"\r\n                 navigation=\"select\"\r\n                 >\r\n          <ng-template #t let-date let-focused=\"focused\">\r\n            <span class=\"custom-day\"\r\n                  [class.focused]=\"focused\"\r\n                  [class.range]=\"isRange(date)\"\r\n                  [class.faded]=\"isHovered(date) || isInside(date)\"\r\n                  (mouseenter)=\"hoveredDate = date\"\r\n                  (mouseleave)=\"hoveredDate = null\">\r\n              {{ date.day }}\r\n            </span>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate\r\n               id = \"datepicker-input\"\r\n               class=\"form-control\" placeholder=\"mm/dd/yyyy\"\r\n               readonly\r\n               name=\"dpFromDate\"\r\n               [value]=\"dateToBeShownInInput\"\r\n        >\r\n        <button class=\"icon-container\" (click)=\"datepicker.toggle()\" type=\"button\"><i class=\"mdi mdi-calendar-range\"></i></button>\r\n      </div>\r\n    </div>\r\n</form>\r\n\r\n", styles: [":host::ng-deep div.ngb-dp-arrow.right{width:2.4375rem!important;background-color:#fff!important}:host::ng-deep div.ngb-dp-weekday{color:#8bac2a;border-top:1px solid rgba(183,183,183,.6);margin-top:.5rem;font-family:Roboto;font-size:.8125rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:normal}:host::ng-deep div.ngb-dp-week{background-color:#fff!important}:host::ng-deep div.ngb-dp-header{background-color:#fff!important}:host::ng-deep div.bg-primary{background-color:#d9e1e6!important;border-radius:.25rem}:host::ng-deep .ngb-dp-arrow-btn:focus{outline-width:0px}:host::ng-deep .right .ngb-dp-navigation-chevron,:host::ng-deep .ngb-dp-navigation-chevron{color:#000}:host::ng-deep .custom-select{border:1px solid rgba(183,183,183,.6);box-shadow:none}:host::ng-deep .btn:focus{box-shadow:none}.custom-day{text-align:center;padding:.185rem .25rem;color:#000;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range{background-color:#268bff;color:#fff}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}:host::ng-deep div.ngb-dp-day.disabled{cursor:not-allowed}.custom-day.faded{background-color:#268bff33;color:#000;font-weight:600}:host::ng-deep div.ngb-dp-week div.ngb-dp-day.disabled .custom-day{color:#bdbdbd;opacity:50%}.buttons{display:flex;margin:0px auto .4375rem;margin-bottom:0;justify-content:center}.buttons button.btn:disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.buttons .btn{display:inline-block;margin:8px 4px 0 8px;padding:5px 16px;text-align:center;outline:none;font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.buttons .btn:last-of-type{background-color:#268bff;color:#fff}:host::ng-deep .ngb-dp-day{font-weight:700}input#datepicker-input,button.icon-container{background:white;border:none}input#datepicker-input{color:#202b47;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#666;margin-top:7px;margin-bottom:0;text-align:left;margin-left:15px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:29px}\n"] }]
@@ -1991,6 +1991,10 @@ class AnnaNonEditableGenericTableComponent {
         this.tooltipRadioTextMap.set("AirStatus", "Aired Status");
         this.tooltipRadioTextMap.set("AirDateAndTime", "Aired Date & Time");
         this.tooltipRadioTextMap.set("AdId", "Ad-Id");
+        this.tooltipRadioTextMap.set("displayimps", "IMPS");
+        this.tooltipRadioTextMap.set("displayGrp", "GRP");
+        this.tooltipRadioTextMap.set("bookedSpotsForDisplay", "Spots");
+        this.tooltipRadioTextMap.set("displaySpots", "Spots");
     }
     generateTableDataWrapper() {
         this.showSkeletonLoading = true;
@@ -3522,7 +3526,7 @@ class AnnaNonEditableGenericTableComponent {
     }
 }
 AnnaNonEditableGenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaNonEditableGenericTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AnnaSortService }, { token: AnnaDateTimeFormatService }, { token: AnnaFilterService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaNonEditableGenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaNonEditableGenericTableComponent, selector: "anna-core-non-editable-generic-table-lib", inputs: { showSkeletonLoading: "showSkeletonLoading", tableHeaders: "tableHeaders", tableData: "tableData", clonedTableData: "clonedTableData", gtGeneralConfig: "gtGeneralConfig", totalRowInfo: "totalRowInfo", gtDimension: "gtDimension", tableClass: "tableClass", maximumRowsWhichCanBeRenderedWithoutScroll: "maximumRowsWhichCanBeRenderedWithoutScroll", limit: "limit", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone", starredInProgress: "starredInProgress", clickableRow: "clickableRow", setTableHeightWhenRowSizeIsFixed: "setTableHeightWhenRowSizeIsFixed" }, outputs: { toggleCheckbox: "toggleCheckbox", toggleRowCheckbox: "toggleRowCheckbox", toggleHeaderCheckbox: "toggleHeaderCheckbox", undoIconClicked: "undoIconClicked", filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", rowClicked: "rowClicked", radioButtonSelected: "radioButtonSelected", columnFilterOpened: "columnFilterOpened", columnFilterClosed: "columnFilterClosed", gtIconClicked: "gtIconClicked", gtSVGIconClicked: "gtSVGIconClicked", gtTextActionClicked: "gtTextActionClicked", gtViewDetailClicked: "gtViewDetailClicked", downloadSpotDetails: "downloadSpotDetails", clickableDataClicked: "clickableDataClicked", notificationIconHover: "notificationIconHover", notificationIconHoverLeave: "notificationIconHoverLeave" }, viewQueries: [{ propertyName: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft, 'clickable-row': clickableRow }\" (scroll)=\"onTableContainerScroll($event)\">\r\n    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + (includeBorderInTableHeight ? rowBorderWidth : 0)) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + ( includeBorderInTableHeight ? (2 * rowBorderWidth) : 0))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\" [ngClass]=\"tableClass\" mat-table [dataSource]=\"renderedData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length ) ||\r\n                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    \r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a *ngFor=\"let data of column.actionData\" \r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\">\r\n                                {{ data.name }}\r\n                        </a>              \r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong>{{ column.data }}</strong>\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <br>\r\n                            <span \r\n                                *ngIf=\"column.colName == 'total-potential-booked-unit' && gtGeneralConfig.component == 'RATING';\r\n                                else columnLowerData\"\r\n                                class=\"clickable-data\"\r\n                                (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                >{{ column.lowerData }}\r\n                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                <ng-container *ngIf=\"downloadInProgress \r\n                                        && selectedRowTypeForDownload == 'TOTALROW' \">\r\n                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                </ng-container>\r\n                            </span>\r\n                            <ng-template #columnLowerData>\r\n                                <span>{{ column.lowerData }}</span>\r\n                            </ng-template>\r\n                          </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage\">\r\n                          <i class=\"mi mdi-info-outline info-label\" container=\"body\"\r\n                          [ngbTooltip]=\"column.tooltipMessage\"\r\n                          tooltipClass=\"gt-total-row-tooltip\" placement=\"bottom\"></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    \r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container [matColumnDef]=\"columnDef.headerInfo[0].objectKey\" *ngFor=\"let columnDef of tableHeaders;  trackBy: trackByFn\">\r\n                <th #tableHeader nowrap mat-header-cell *matHeaderCellDef [style.width]=\"columnDef.width\">\r\n                    <div class=\"row mx-0\" *ngFor=\"let header of columnDef.headerInfo; let j = index;\">    \r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            {{ header.name }}\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'impsInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'spotsColumnEquivalizationMessageTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <!-- Active tooltip Functionality -->\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],       \r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-checkbox-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'SLIDER'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-slider-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t1=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t1, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'DATE'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"bottom auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-datepicker-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t2=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t2, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'WEEK'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"weekPickerToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t3=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t3, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'TIME'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-time-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                    </ng-container>\r\n                            \r\n                                    <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                        <span\r\n                                            *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                            [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                            class=\"material-icons custom-column-checkbox-checked\"\r\n                                            (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                        >\r\n                                            check_box\r\n                                        </span>\r\n                                        <span\r\n                                            *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                            class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                            [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                            (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                        >\r\n                                            check_box_outline_blank\r\n                                        </span>\r\n                                    </ng-container>\r\n                                    <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                        <mat-radio-group\r\n                                            *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                            [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                            [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                        >\r\n                                            <ng-container\r\n                                                *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                            >\r\n                                                <mat-radio-button\r\n                                                    value=\"{{ radioButton.value }}\"\r\n                                                    class=\"{{ radioButton.class }}\"\r\n                                                    (click)=\"\r\n                                                        radioButtonClicked(\r\n                                                            ROW_DATA,\r\n                                                            radioButton.value,\r\n                                                            ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                        )\r\n                                                    \"\r\n                                                    >{{ radioButton.label }}</mat-radio-button\r\n                                                ><br *ngIf=\"!last\" />\r\n                                            </ng-container>\r\n                                        </mat-radio-group>\r\n                                    </ng-container>\r\n                            \r\n                                    <div *ngSwitchDefault showEllipsisTextOnHover>\r\n                                        {{ ROW_DATA[subline.objectKey] }}\r\n                            \r\n                                        <ng-container\r\n                                            *ngIf=\"\r\n                                                subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                            \"\r\n                                        >\r\n                                            <i\r\n                                                class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                placement=\"bottom\"\r\n                                                container=\"body\"\r\n                                                tooltipClass=\"remarks-info-tooltip\"\r\n                                                #t=\"ngbTooltip\"\r\n                                            ></i>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            </td>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && !(isNoDataToDisplaySubject$ | async)\">\r\n                                <div showEllipsisTextOnHover *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                    <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"\r\n                                            ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\" placement=\"bottom\" container=\"body\"\r\n                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                            ></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                          <ng-container *ngFor=\"let action of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n\r\n                                            <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\"\r\n                                            (mouseenter)=\"mouseEnterOnStringTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" placement=\"bottom auto\" container=\"body\"\r\n                                            [autoClose]=\"true\" tooltipClass=\"team-user-tooltip remove-on-scroll-class\" [ngbTooltip]=\"userLoggedInDetails\">\r\n                                             </i>\r\n\r\n                                            <ng-container *ngIf=\"action.showObjectKey\">\r\n                                               {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                            </ng-container>\r\n\r\n                                          </ng-container>\r\n                                        </ng-container>\r\n    \r\n                                        \r\n                                        <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                            <p [innerHTML]=\"ROW_DATA.message\"></p>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                            <anna-core-anna-icon-column [componentName]=\"gtGeneralConfig.component\" [objectKey]=\"subline.objectKey\" [dataObject]=\"ROW_DATA\" (onColumnIconClicked)=\"svgIconClicked($event)\"></anna-core-anna-icon-column>\r\n                                        </ng-container>                                       \r\n    \r\n                                        <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                          <ng-container *ngFor=\"let text of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n                                            <button *ngIf=\"text.showTooltip\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\"\r\n                                              class=\"{{text.class}}\" (mouseenter)=\"mouseEnterOnTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\"\r\n                                              [ngbTooltip]=\"textActionTooltipTemplate\" placement=\"bottom\" container=\"body\"\r\n                                              tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\">\r\n                                              {{ text.name}}\r\n                                            </button>\r\n                                        \r\n                                            <button *ngIf=\"!text.showTooltip\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\"\r\n                                              class=\"{{text.class}}\">\r\n                                              {{text.name}}\r\n                                            </button>\r\n                                          </ng-container>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        false\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        true\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                          <a  \r\n                                              *ngFor=\"let text of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\" \r\n                                              [class]=\"text.class\"\r\n                                              (click)=\"onClickableDataClicked(ROW_DATA, text.id)\">\r\n                                              {{ text.name }}\r\n                                          </a>\r\n                                          <span \r\n                                              *ngIf=\"subline.objectKey == 'displayBookedUnits' && gtGeneralConfig.component == 'RATING'\"\r\n                                              class=\"clickable-data\"\r\n                                              (click)=\"spotDetailsDownloadClicked('DATAROW', ROW_DATA)\"\r\n                                              [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                              >{{ ROW_DATA.displayBookedUnits}}\r\n                                              <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                              <ng-container *ngIf=\"downloadInProgress \r\n                                                      && ROW_DATA.inventoryCodeId == selectedInventoryIdForDownload \r\n                                                      && ROW_DATA.demographic == selectedDemographicForDownload \">\r\n                                                  <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                              </ng-container>\r\n                                          </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'STRING___ICON_OR_TEXT_ACTION'\">\r\n                                          <ng-container *ngFor=\"let action of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n                                            <span ngbTooltip=\"{{ action.additionalTextBeforeLink }}\" placement=\"bottom\" container=\"body\"\r\n                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\" [disableTooltip]=\"!action.enableTooltipForAdditionalText\">\r\n                                            {{ action.additionalTextBeforeLink }}\r\n                                            </span>\r\n                                        \r\n                                            <ng-container *ngIf=\"action && action.typeOfData== 'STRING'\">\r\n                                              {{ action.data }}\r\n                                            </ng-container>\r\n                                      \r\n                                            <a [id]=\"action.id\" *ngIf=\"action.showLink\" (click)=\"textActionClicked(ROW_DATA, action.id)\" [class]=\"action.linkClass\" \r\n                                              [ngClass]=\"{'disabled': action.disabledLink}\">{{action.data}}\r\n                                            </a>\r\n                                        \r\n                                            <ng-container *ngIf=\"action.showTooltip\">\r\n                                              <ng-container *ngIf=\"action.tooltipData.tooltipTableBody && action.tooltipData.tooltipTableBody.length\">\r\n                                      \r\n                                                <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                                (mouseenter)=\"mouseEnterOnStringTextActionTypeContainingTable(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" placement=\"bottom auto\" container=\"body\"\r\n                                                [autoClose]=\"true\" tooltipClass=\"tooltip-containing-table remove-on-scroll-class\" [ngbTooltip]=\"tooltipContainingTableTemplate\">\r\n                                                 </i>\r\n                                              </ng-container>\r\n                                      \r\n                                              <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                                (click)=\"iconClickedOnStringIconActionType(ROW_DATA, action.id)\"\r\n                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                (mouseenter)=\"mouseEnterOnStringTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" \r\n                                                [placement]=\"action.tooltipPlacement ? action.tooltipPlacement : 'bottom auto'\" container=\"body\"\r\n                                                [autoClose]=\"true\" tooltipClass=\"team-user-tooltip remove-on-scroll-class {{ action['tooltipClass'] }}\" [ngbTooltip]=\"userLoggedInDetails\">\r\n                                                 </i>\r\n                                              </ng-container>\r\n                                      \r\n                                            </ng-container>\r\n                                      \r\n                                            <ng-container *ngIf=\"!action.showTooltip\">\r\n                                              <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                              (click)=\"iconClickedOnStringIconActionType(ROW_DATA, action.id)\">\r\n                                              </i>\r\n                                            </ng-container>                                          \r\n                                        \r\n                                          </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                            <span [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"></span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                                <span>{{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}</span>\r\n                                                <i\r\n                                                    *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    [ngbTooltip]=\"sellerHierarchyTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    triggers=\"manual\"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"hierarchy-tooltip\"\r\n                                                    (mouseenter)=\"bindTheValueToSellerGroupTooltip(ROW_DATA.sellerGroupHierarchy, info)\">\r\n                                                </i>\r\n\r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedRatingDifference\"\r\n                                                >\r\n                                                </i>\r\n                                            \r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedImpDifference\"\r\n                                                >\r\n                                                </i>\r\n\r\n                                            </ng-container>\r\n                                            <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                                <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                        {{ ROW_DATA.descriptionMessage }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum != '-' && ROW_DATA.descriptionEmailReferenceNum != ''\">\r\n                                                        Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                </p>\r\n                                                <a\r\n                                                    href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                    target=\"_blank\"\r\n                                                    *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                                >\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                </a>\r\n                                                <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                                    <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                      <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">View details</button>\r\n                                                    </a>                \r\n                                                </ng-container>\r\n                                               \r\n                                                <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl != '-' && ROW_DATA.descriptionEmailUrl != ''\">\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                                </a>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n    \r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\r\n                                <div>\r\n                                    {{null}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </div>\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" [marginTop]=\"marginTop\" *ngIf=\"(isNoDataToDisplaySubject$ | async)\"> </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n        <anna-core-sort-lib  [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n                </p>\r\n            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n            <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length && tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' + selectedCheckboxOptionsCount + ')' }}</span>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>   \r\n        </div>\r\n    </div>\r\n    <!-- <button class=\"column-clear-all align-center\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n        Clear filter\r\n    </button> -->\r\n        \r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <section class=\"min-maxContainer\">\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMinValue\"\r\n                (ngModelChange)=\"minValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMinValueError}\"\r\n                placeholder=\"Min\"\r\n            />\r\n            <span>To</span>\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMaxValue\"\r\n                (ngModelChange)=\"maxValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMaxValueError}\"\r\n                placeholder=\"Max\"\r\n            />\r\n        </section>\r\n        <div class=\"sidebar-slider\">\r\n            <ngx-slider\r\n                [ngClass]=\"{'show-min': sliderMinValue != options.floor, 'show-max': sliderMaxValue != options.ceil}\"\r\n                class=\"filter-slider\"\r\n                [value]=\"sliderMinValue\"\r\n                [highValue]=\"sliderMaxValue\"\r\n                [options]=\"options\"\r\n            ></ngx-slider>\r\n        </div>\r\n    </ng-container>\r\n    \r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelSliderFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n            (click)=\"applySliderFilter()\"\r\n            [disabled]=\"disableSliderApplyButton\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template>\r\n\r\n<!-- Week Picker Template -->\r\n<ng-template #weekPickerToolTip>\r\n    <div class=\"weekpicker-container\">\r\n        <anna-core-week-calendar-filter-lib\r\n            [week-calendar-config]=\"gtGeneralConfig.multiWeekPickerConfig\"\r\n            (apply)=\"applyWeekFilter($event)\"\r\n            [from-date]=\"calendarMinEnabledDate\"\r\n            [to-date]=\"calendarMaxEnabledDate\"\r\n        >\r\n        </anna-core-week-calendar-filter-lib>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Time Filter Template -->\r\n<ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <!-- Multi time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Multi</p>\r\n            </div>\r\n            <!-- Zero time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Zero</p>\r\n            </div>\r\n            <!-- Enter time range option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n  <p style=\"padding: 0.5rem; color: black;white-space: nowrap;\">This preemption is rejected and not marked for credit.</p>\r\n</ng-template>\r\n\r\n<ng-template #ratingInfoTooltip>\r\n    <p class=\"first-row\">Shows 'Booked Rating' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\">Shows 'Projected Rating' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #impsInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked IMPS' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected IMPS' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #spotsColumnEquivalizationMessageTooltip>\r\n    <p class=\"spot-column-tooltip-message\" >This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.</p>\r\n</ng-template>\r\n\r\n<ng-template #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <section class = \"hierarchy-table-container\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.InventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.Program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #circularProgressBar>\r\n    <circle-progress\r\n        [percent]=\"percentDone\"\r\n        [radius]=\"5\"\r\n        [showTitle]=\"false\"\r\n        [showUnits]=\"false\"\r\n        [showSubtitle]=\"false\"\r\n        [outerStrokeWidth]=\"3\"\r\n        [innerStrokeWidth]=\"3\"\r\n        [space]=\"-3\"\r\n        [outerStrokeColor]=\"'#268bff'\"\r\n        [innerStrokeColor]=\"'#d5d5d5'\"\r\n        [animationDuration]=\"10\"\r\n    ></circle-progress>\r\n</ng-template>\r\n\r\n\r\n<ng-template #userLoggedInDetails>\r\n  <div class=\"tooltip-div-container\">\r\n    <ng-container *ngFor=\"let data of textActionTooltip\">\r\n        <span *ngIf=\"data.key != 'read'\">        \r\n      {{ data.key }} <b> {{data.value}}</b>\r\n        </span>\r\n        <span *ngIf=\"data.key == 'read'\">        \r\n           <b> {{data.value}}</b>\r\n        </span>\r\n   </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #markAsReadTip>\r\n    <div class=\"tooltip-div-container\">\r\n      <ng-container *ngFor=\"let data of textActionTooltip\">\r\n        {{data.value}}\r\n     </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n<ng-template #textActionTooltipTemplate>\r\n  <ng-container *ngFor=\"let data of textActionTooltip\">\r\n     {{ data.key }} <b> {{data.value}}</b>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n  <div *ngIf=\"tooltipContainingTable\" class=\"tooltip-div-container\">\r\n    <ul>\r\n      <li *ngFor=\"let headerMsg of tooltipContainingTable.tableHeaderMsg\">\r\n        <b> {{headerMsg}}  </b>\r\n      </li>\r\n    </ul>\r\n\r\n    <table class=\"tooltip-table\">\r\n      <thead>\r\n        <tr>\r\n          <th *ngFor=\"let header of tooltipContainingTable.tooltipTableHeader\">\r\n            {{ header}}\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let rows of tooltipContainingTable.tooltipTableBody\">\r\n          <td *ngFor=\"let data of rows\">\r\n            {{ data }}\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n\r\n    <ul>\r\n      <li style=\"margin:0; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul>\r\n\r\n  </div>\r\n</ng-template>\r\n<ng-template #textActionTooltipTemplate>\r\n   <ng-container *ngFor=\"let data of textActionTooltip\">\r\n      {{ data.key }} <b> {{data.value}}</b>\r\n   </ng-container>\r\n</ng-template>\r\n", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}.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}.check-mark,.unread-mark{cursor:pointer}.on-hover:hover .unread-mark,.notificationHover .check-mark{opacity:0;cursor:pointer}.on-hover:hover .check-mark{opacity:1;cursor:pointer}: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;width:max-content}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt thead tr th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}: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}#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,.mdi-information,.mdi-information-outline,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{top:-1px;float:right}::ng-deep .remarks-info-tooltip .tooltip-inner{max-width:19.25rem!important}.rating-icon,.lur-violation-icon{color:#268bff;cursor:pointer;position:relative;left:-2px}::ng-deep .rating-info-tooltip .tooltip-inner{max-width:800px!important}.spots-info-icon{color:#268bff;cursor:pointer;margin:1px 0 0 -13px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -14px}::ng-deep .spot-info-tooltip .tooltip-inner{left:60px;position:relative;max-width:220px!important;background:#fff;word-break:break-word;display:flex}::ng-deep .spot-info-tooltip-for-orderlisting-table .tooltip-inner{max-width:220px!important;background:#fff;word-break:break-word;display:flex}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0;z-index:1}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!important}.clickable-data{cursor:pointer;color:#268bff!important;display:flex!important;align-items:center}.clickable-data .spot-details-download-icons{font-size:12px}.disabled-clickable-data{pointer-events:none;color:#d4d4d4!important}.spot-column-tooltip-message{color:#000;padding:10px;width:max-content;text-align:left}div.spinner-for-button-directive{position:relative;left:-1px}.clickable-row table tr.mat-row td{cursor:pointer!important}.tooltip-div-container{text-align:left!important;padding:12px 4px;color:#4a4a4a!important;font-size:12px!important;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.mdi-information,.mdi-information-outline{left:3px;top:1px}.mdi-information-outline{position:static}::ng-deep .team-user-tooltip.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .team-user-tooltip .tooltip-inner{opacity:1!important;width:-moz-fit-content!important;width:fit-content!important;max-width:520px!important;border-radius:2px;padding:0 4px!important}::ng-deep .team-user-tooltip .tooltip-inner .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .gt-icon-column-tooltip{opacity:1!important}::ng-deep .gt-icon-column-tooltip .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .gt-icon-column-tooltip.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .gt-icon-column-tooltip .tooltip-inner{width:100%}::ng-deep .tooltip-containing-table{opacity:1!important}::ng-deep .tooltip-containing-table .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .tooltip-containing-table.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .tooltip-containing-table li{margin:0!important;padding:0!important}::ng-deep .tooltip-containing-table ul{margin:0!important;padding-left:8px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 10px;width:100%}table.tooltip-table th,table.tooltip-table td{padding:2px 8px;line-height:normal}table.tooltip-table thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important;border:none}table.tooltip-table thead tr th{color:#5e5e5e!important;font-size:12px;font-weight:500;font-family:Roboto;line-height:1.67;background-color:#ededed;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}table.tooltip-table thead tr th div.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}table.tooltip-table tbody tr td{color:#5e5e5e!important;font-size:12px;font-weight:500;font-family:Roboto;line-height:1.67}table.tooltip-table tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.tooltip-table tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i13.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { kind: "directive", type: showEllipsisTextOnHoverDirective, selector: "[showEllipsisTextOnHover]" }, { kind: "component", type: AnnaIconColumnComponent, selector: "anna-core-anna-icon-column", inputs: ["componentName", "objectKey", "dataObject"], outputs: ["onColumnIconClicked"] }, { kind: "component", type: AnnaWeekCalendarComponent, selector: "anna-core-week-calendar-filter-lib", inputs: ["from-date", "to-date", "disabled-dates", "maxDate", "minDate", "week-calendar-config"], outputs: ["apply", "toggle-calendar"] }, { kind: "component", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AnnaNonEditableGenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaNonEditableGenericTableComponent, selector: "anna-core-non-editable-generic-table-lib", inputs: { showSkeletonLoading: "showSkeletonLoading", tableHeaders: "tableHeaders", tableData: "tableData", clonedTableData: "clonedTableData", gtGeneralConfig: "gtGeneralConfig", totalRowInfo: "totalRowInfo", gtDimension: "gtDimension", tableClass: "tableClass", maximumRowsWhichCanBeRenderedWithoutScroll: "maximumRowsWhichCanBeRenderedWithoutScroll", limit: "limit", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone", starredInProgress: "starredInProgress", clickableRow: "clickableRow", setTableHeightWhenRowSizeIsFixed: "setTableHeightWhenRowSizeIsFixed" }, outputs: { toggleCheckbox: "toggleCheckbox", toggleRowCheckbox: "toggleRowCheckbox", toggleHeaderCheckbox: "toggleHeaderCheckbox", undoIconClicked: "undoIconClicked", filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", rowClicked: "rowClicked", radioButtonSelected: "radioButtonSelected", columnFilterOpened: "columnFilterOpened", columnFilterClosed: "columnFilterClosed", gtIconClicked: "gtIconClicked", gtSVGIconClicked: "gtSVGIconClicked", gtTextActionClicked: "gtTextActionClicked", gtViewDetailClicked: "gtViewDetailClicked", downloadSpotDetails: "downloadSpotDetails", clickableDataClicked: "clickableDataClicked", notificationIconHover: "notificationIconHover", notificationIconHoverLeave: "notificationIconHoverLeave" }, viewQueries: [{ propertyName: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft, 'clickable-row': clickableRow }\" (scroll)=\"onTableContainerScroll($event)\">\r\n    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + (includeBorderInTableHeight ? rowBorderWidth : 0)) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + ( includeBorderInTableHeight ? (2 * rowBorderWidth) : 0))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\" [ngClass]=\"tableClass\" mat-table [dataSource]=\"renderedData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length ) ||\r\n                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    \r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a *ngFor=\"let data of column.actionData\" \r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\">\r\n                                {{ data.name }}\r\n                        </a>              \r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong>{{ column.data }}</strong>\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <br>\r\n                            <span \r\n                                *ngIf=\"column.colName == 'total-potential-booked-unit' && gtGeneralConfig.component == 'RATING';\r\n                                else columnLowerData\"\r\n                                class=\"clickable-data\"\r\n                                (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                >{{ column.lowerData }}\r\n                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                <ng-container *ngIf=\"downloadInProgress \r\n                                        && selectedRowTypeForDownload == 'TOTALROW' \">\r\n                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                </ng-container>\r\n                            </span>\r\n                            <ng-template #columnLowerData>\r\n                                <span>{{ column.lowerData }}</span>\r\n                            </ng-template>\r\n                          </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage\">\r\n                          <i class=\"mi mdi-info-outline info-label\" container=\"body\"\r\n                          [ngbTooltip]=\"column.tooltipMessage\"\r\n                          tooltipClass=\"gt-total-row-tooltip\" placement=\"bottom\"></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    \r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container [matColumnDef]=\"columnDef.headerInfo[0].objectKey\" *ngFor=\"let columnDef of tableHeaders;  trackBy: trackByFn\">\r\n                <th #tableHeader nowrap mat-header-cell *matHeaderCellDef [style.width]=\"columnDef.width\">\r\n                    <div class=\"row mx-0\" *ngFor=\"let header of columnDef.headerInfo; let j = index;\">    \r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            {{ header.name }}\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'impsInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'spotsColumnEquivalizationMessageTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <!-- Active tooltip Functionality -->\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],       \r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-checkbox-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'SLIDER'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-slider-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t1=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t1, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'DATE'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"bottom auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-datepicker-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t2=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t2, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'WEEK'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"weekPickerToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t3=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t3, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'TIME'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-time-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                    </ng-container>\r\n                            \r\n                                    <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                        <span\r\n                                            *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                            [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                            class=\"material-icons custom-column-checkbox-checked\"\r\n                                            (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                        >\r\n                                            check_box\r\n                                        </span>\r\n                                        <span\r\n                                            *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                            class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                            [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                            (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                        >\r\n                                            check_box_outline_blank\r\n                                        </span>\r\n                                    </ng-container>\r\n                                    <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                        <mat-radio-group\r\n                                            *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                            [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                            [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                        >\r\n                                            <ng-container\r\n                                                *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                            >\r\n                                                <mat-radio-button\r\n                                                    value=\"{{ radioButton.value }}\"\r\n                                                    class=\"{{ radioButton.class }}\"\r\n                                                    (click)=\"\r\n                                                        radioButtonClicked(\r\n                                                            ROW_DATA,\r\n                                                            radioButton.value,\r\n                                                            ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                        )\r\n                                                    \"\r\n                                                    >{{ radioButton.label }}</mat-radio-button\r\n                                                ><br *ngIf=\"!last\" />\r\n                                            </ng-container>\r\n                                        </mat-radio-group>\r\n                                    </ng-container>\r\n                            \r\n                                    <div *ngSwitchDefault showEllipsisTextOnHover>\r\n                                        {{ ROW_DATA[subline.objectKey] }}\r\n                            \r\n                                        <ng-container\r\n                                            *ngIf=\"\r\n                                                subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                            \"\r\n                                        >\r\n                                            <i\r\n                                                class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                placement=\"bottom\"\r\n                                                container=\"body\"\r\n                                                tooltipClass=\"remarks-info-tooltip\"\r\n                                                #t=\"ngbTooltip\"\r\n                                            ></i>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            </td>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && !(isNoDataToDisplaySubject$ | async)\">\r\n                                <div showEllipsisTextOnHover *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                    <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"\r\n                                            ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\" placement=\"bottom\" container=\"body\"\r\n                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                            ></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                          <ng-container *ngFor=\"let action of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n\r\n                                            <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\"\r\n                                            (mouseenter)=\"mouseEnterOnStringTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" placement=\"bottom auto\" container=\"body\"\r\n                                            [autoClose]=\"true\" tooltipClass=\"team-user-tooltip remove-on-scroll-class\" [ngbTooltip]=\"userLoggedInDetails\">\r\n                                             </i>\r\n\r\n                                            <ng-container *ngIf=\"action.showObjectKey\">\r\n                                               {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                            </ng-container>\r\n\r\n                                          </ng-container>\r\n                                        </ng-container>\r\n    \r\n                                        \r\n                                        <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                            <p [innerHTML]=\"ROW_DATA.message\"></p>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                            <anna-core-anna-icon-column [componentName]=\"gtGeneralConfig.component\" [objectKey]=\"subline.objectKey\" [dataObject]=\"ROW_DATA\" (onColumnIconClicked)=\"svgIconClicked($event)\"></anna-core-anna-icon-column>\r\n                                        </ng-container>                                       \r\n    \r\n                                        <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                          <ng-container *ngFor=\"let text of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n                                            <button *ngIf=\"text.showTooltip\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\"\r\n                                              class=\"{{text.class}}\" (mouseenter)=\"mouseEnterOnTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\"\r\n                                              [ngbTooltip]=\"textActionTooltipTemplate\" placement=\"bottom\" container=\"body\"\r\n                                              tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\">\r\n                                              {{ text.name}}\r\n                                            </button>\r\n                                        \r\n                                            <button *ngIf=\"!text.showTooltip\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\"\r\n                                              class=\"{{text.class}}\">\r\n                                              {{text.name}}\r\n                                            </button>\r\n                                          </ng-container>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        false\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        true\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                          <a  \r\n                                              *ngFor=\"let text of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\" \r\n                                              [class]=\"text.class\"\r\n                                              (click)=\"onClickableDataClicked(ROW_DATA, text.id)\">\r\n                                              {{ text.name }}\r\n                                          </a>\r\n                                          <span \r\n                                              *ngIf=\"subline.objectKey == 'displayBookedUnits' && gtGeneralConfig.component == 'RATING'\"\r\n                                              class=\"clickable-data\"\r\n                                              (click)=\"spotDetailsDownloadClicked('DATAROW', ROW_DATA)\"\r\n                                              [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                              >{{ ROW_DATA.displayBookedUnits}}\r\n                                              <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                              <ng-container *ngIf=\"downloadInProgress \r\n                                                      && ROW_DATA.inventoryCodeId == selectedInventoryIdForDownload \r\n                                                      && ROW_DATA.demographic == selectedDemographicForDownload \">\r\n                                                  <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                              </ng-container>\r\n                                          </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'STRING___ICON_OR_TEXT_ACTION'\">\r\n                                          <ng-container *ngFor=\"let action of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n                                            <span ngbTooltip=\"{{ action.additionalTextBeforeLink }}\" placement=\"bottom\" container=\"body\"\r\n                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\" [disableTooltip]=\"!action.enableTooltipForAdditionalText\">\r\n                                            {{ action.additionalTextBeforeLink }}\r\n                                            </span>\r\n                                        \r\n                                            <ng-container *ngIf=\"action && action.typeOfData== 'STRING'\">\r\n                                              {{ action.data }}\r\n                                            </ng-container>\r\n                                      \r\n                                            <a [id]=\"action.id\" *ngIf=\"action.showLink\" (click)=\"textActionClicked(ROW_DATA, action.id)\" [class]=\"action.linkClass\" \r\n                                              [ngClass]=\"{'disabled': action.disabledLink}\">{{action.data}}\r\n                                            </a>\r\n                                        \r\n                                            <ng-container *ngIf=\"action.showTooltip\">\r\n                                              <ng-container *ngIf=\"action.tooltipData.tooltipTableBody && action.tooltipData.tooltipTableBody.length\">\r\n                                      \r\n                                                <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                                (mouseenter)=\"mouseEnterOnStringTextActionTypeContainingTable(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" placement=\"bottom auto\" container=\"body\"\r\n                                                [autoClose]=\"true\" tooltipClass=\"tooltip-containing-table remove-on-scroll-class\" [ngbTooltip]=\"tooltipContainingTableTemplate\">\r\n                                                 </i>\r\n                                              </ng-container>\r\n                                      \r\n                                              <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                                (click)=\"iconClickedOnStringIconActionType(ROW_DATA, action.id)\"\r\n                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                (mouseenter)=\"mouseEnterOnStringTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" \r\n                                                [placement]=\"action.tooltipPlacement ? action.tooltipPlacement : 'bottom auto'\" container=\"body\"\r\n                                                [autoClose]=\"true\" tooltipClass=\"team-user-tooltip remove-on-scroll-class {{ action['tooltipClass'] }}\" [ngbTooltip]=\"userLoggedInDetails\">\r\n                                                 </i>\r\n                                              </ng-container>\r\n                                      \r\n                                            </ng-container>\r\n                                      \r\n                                            <ng-container *ngIf=\"!action.showTooltip\">\r\n                                              <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                              (click)=\"iconClickedOnStringIconActionType(ROW_DATA, action.id)\">\r\n                                              </i>\r\n                                            </ng-container>                                          \r\n                                        \r\n                                          </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                            <span [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"></span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                                <span>{{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}</span>\r\n                                                <i\r\n                                                    *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    [ngbTooltip]=\"sellerHierarchyTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    triggers=\"manual\"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"hierarchy-tooltip\"\r\n                                                    (mouseenter)=\"bindTheValueToSellerGroupTooltip(ROW_DATA.sellerGroupHierarchy, info)\">\r\n                                                </i>\r\n\r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedRatingDifference\"\r\n                                                >\r\n                                                </i>\r\n                                            \r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedImpDifference\"\r\n                                                >\r\n                                                </i>\r\n\r\n                                            </ng-container>\r\n                                            <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                                <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                        {{ ROW_DATA.descriptionMessage }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum != '-' && ROW_DATA.descriptionEmailReferenceNum != ''\">\r\n                                                        Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                </p>\r\n                                                <a\r\n                                                    href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                    target=\"_blank\"\r\n                                                    *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                                >\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                </a>\r\n                                                <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                                    <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                      <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">View details</button>\r\n                                                    </a>                \r\n                                                </ng-container>\r\n                                               \r\n                                                <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl != '-' && ROW_DATA.descriptionEmailUrl != ''\">\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                                </a>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n    \r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\r\n                                <div>\r\n                                    {{null}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </div>\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" [marginTop]=\"marginTop\" *ngIf=\"(isNoDataToDisplaySubject$ | async)\"> </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n        <anna-core-sort-lib  [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n                </p>\r\n            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n            <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length && tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' + selectedCheckboxOptionsCount + ')' }}</span>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>   \r\n        </div>\r\n    </div>\r\n    <!-- <button class=\"column-clear-all align-center\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n        Clear filter\r\n    </button> -->\r\n        \r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <section class=\"min-maxContainer\">\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMinValue\"\r\n                (ngModelChange)=\"minValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMinValueError}\"\r\n                placeholder=\"Min\"\r\n            />\r\n            <span>To</span>\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMaxValue\"\r\n                (ngModelChange)=\"maxValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMaxValueError}\"\r\n                placeholder=\"Max\"\r\n            />\r\n        </section>\r\n        <div class=\"sidebar-slider\">\r\n            <ngx-slider\r\n                [ngClass]=\"{'show-min': sliderMinValue != options.floor, 'show-max': sliderMaxValue != options.ceil}\"\r\n                class=\"filter-slider\"\r\n                [value]=\"sliderMinValue\"\r\n                [highValue]=\"sliderMaxValue\"\r\n                [options]=\"options\"\r\n            ></ngx-slider>\r\n        </div>\r\n    </ng-container>\r\n    \r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelSliderFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n            (click)=\"applySliderFilter()\"\r\n            [disabled]=\"disableSliderApplyButton\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template>\r\n\r\n<!-- Week Picker Template -->\r\n<ng-template #weekPickerToolTip>\r\n    <div class=\"weekpicker-container\">\r\n        <anna-core-week-calendar-filter-lib\r\n            [week-calendar-config]=\"gtGeneralConfig.multiWeekPickerConfig\"\r\n            (apply)=\"applyWeekFilter($event)\"\r\n            [from-date]=\"calendarMinEnabledDate\"\r\n            [to-date]=\"calendarMaxEnabledDate\"\r\n        >\r\n        </anna-core-week-calendar-filter-lib>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Time Filter Template -->\r\n<ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <!-- Multi time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Multi</p>\r\n            </div>\r\n            <!-- Zero time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Zero</p>\r\n            </div>\r\n            <!-- Enter time range option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n  <p style=\"padding: 0.5rem; color: black;white-space: nowrap;\">This preemption is rejected and not marked for credit.</p>\r\n</ng-template>\r\n\r\n<ng-template #ratingInfoTooltip>\r\n    <p class=\"first-row\">Shows 'Booked Rating' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\">Shows 'Projected Rating' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #impsInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked IMPS' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected IMPS' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #spotsColumnEquivalizationMessageTooltip>\r\n    <p class=\"spot-column-tooltip-message\" >This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.</p>\r\n</ng-template>\r\n\r\n<ng-template #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <section class = \"hierarchy-table-container\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.InventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.Program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #circularProgressBar>\r\n    <circle-progress\r\n        [percent]=\"percentDone\"\r\n        [radius]=\"5\"\r\n        [showTitle]=\"false\"\r\n        [showUnits]=\"false\"\r\n        [showSubtitle]=\"false\"\r\n        [outerStrokeWidth]=\"3\"\r\n        [innerStrokeWidth]=\"3\"\r\n        [space]=\"-3\"\r\n        [outerStrokeColor]=\"'#268bff'\"\r\n        [innerStrokeColor]=\"'#d5d5d5'\"\r\n        [animationDuration]=\"10\"\r\n    ></circle-progress>\r\n</ng-template>\r\n\r\n\r\n<ng-template #userLoggedInDetails>\r\n  <div class=\"tooltip-div-container\">\r\n    <ng-container *ngFor=\"let data of textActionTooltip\">\r\n        <span *ngIf=\"data.key != 'read'\">        \r\n      {{ data.key }} <b> {{data.value}}</b>\r\n        </span>\r\n        <span *ngIf=\"data.key == 'read'\">        \r\n           <b> {{data.value}}</b>\r\n        </span>\r\n   </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #markAsReadTip>\r\n    <div class=\"tooltip-div-container\">\r\n      <ng-container *ngFor=\"let data of textActionTooltip\">\r\n        {{data.value}}\r\n     </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n<ng-template #textActionTooltipTemplate>\r\n  <ng-container *ngFor=\"let data of textActionTooltip\">\r\n     {{ data.key }} <b> {{data.value}}</b>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n  <div *ngIf=\"tooltipContainingTable\" class=\"tooltip-div-container\">\r\n    <ul>\r\n      <li *ngFor=\"let headerMsg of tooltipContainingTable.tableHeaderMsg\">\r\n        <b> {{headerMsg}}  </b>\r\n      </li>\r\n    </ul>\r\n\r\n    <table class=\"tooltip-table\">\r\n      <thead>\r\n        <tr>\r\n          <th *ngFor=\"let header of tooltipContainingTable.tooltipTableHeader\">\r\n            {{ header}}\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let rows of tooltipContainingTable.tooltipTableBody\">\r\n          <td *ngFor=\"let data of rows\">\r\n            {{ data }}\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n\r\n    <ul>\r\n      <li style=\"margin:0; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul>\r\n\r\n  </div>\r\n</ng-template>\r\n<ng-template #textActionTooltipTemplate>\r\n   <ng-container *ngFor=\"let data of textActionTooltip\">\r\n      {{ data.key }} <b> {{data.value}}</b>\r\n   </ng-container>\r\n</ng-template>\r\n", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}.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}.check-mark,.unread-mark{cursor:pointer}.on-hover:hover .unread-mark,.notificationHover .check-mark{opacity:0;cursor:pointer}.on-hover:hover .check-mark{opacity:1;cursor:pointer}: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;width:max-content}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt thead tr th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}: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}#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,.mdi-information,.mdi-information-outline,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{top:-1px;float:right}::ng-deep .remarks-info-tooltip .tooltip-inner{max-width:19.25rem!important}.rating-icon,.lur-violation-icon{color:#268bff;cursor:pointer;position:relative;left:-2px}::ng-deep .rating-info-tooltip .tooltip-inner{max-width:800px!important}.spots-info-icon{color:#268bff;cursor:pointer;margin:1px 0 0 -13px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -14px}::ng-deep .spot-info-tooltip .tooltip-inner{left:60px;position:relative;max-width:220px!important;background:#fff;word-break:break-word;display:flex}::ng-deep .spot-info-tooltip-for-orderlisting-table .tooltip-inner{max-width:220px!important;background:#fff;word-break:break-word;display:flex}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0;z-index:1}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!important}.clickable-data{cursor:pointer;color:#268bff!important;display:flex!important;align-items:center}.clickable-data .spot-details-download-icons{font-size:12px}.disabled-clickable-data{pointer-events:none;color:#d4d4d4!important}.spot-column-tooltip-message{color:#000;padding:10px;width:max-content;text-align:left}div.spinner-for-button-directive{position:relative;left:-1px}.clickable-row table tr.mat-row td{cursor:pointer!important}.tooltip-div-container{text-align:left!important;padding:12px 4px;color:#4a4a4a!important;font-size:12px!important;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.mdi-information,.mdi-information-outline{left:3px;top:1px}.mdi-information-outline{position:static}::ng-deep .team-user-tooltip.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .team-user-tooltip .tooltip-inner{opacity:1!important;width:-moz-fit-content!important;width:fit-content!important;max-width:520px!important;border-radius:2px;padding:0 4px!important}::ng-deep .team-user-tooltip .tooltip-inner .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .gt-icon-column-tooltip{opacity:1!important}::ng-deep .gt-icon-column-tooltip .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .gt-icon-column-tooltip.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .gt-icon-column-tooltip .tooltip-inner{width:100%}::ng-deep .tooltip-containing-table{opacity:1!important}::ng-deep .tooltip-containing-table .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .tooltip-containing-table.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .tooltip-containing-table li{margin:0!important;padding:0!important}::ng-deep .tooltip-containing-table ul{margin:0!important;padding-left:8px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 10px;width:100%}table.tooltip-table th,table.tooltip-table td{padding:2px 8px;line-height:normal}table.tooltip-table thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important;border:none}table.tooltip-table thead tr th{color:#5e5e5e!important;font-size:12px;font-weight:500;font-family:Roboto;line-height:1.67;background-color:#ededed;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}table.tooltip-table thead tr th div.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}table.tooltip-table tbody tr td{color:#5e5e5e!important;font-size:12px;font-weight:500;font-family:Roboto;line-height:1.67}table.tooltip-table tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.tooltip-table tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.ɵa, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["appearance", "animation", "theme", "loadingText", "count", "ariaLabel"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i13.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { kind: "directive", type: showEllipsisTextOnHoverDirective, selector: "[showEllipsisTextOnHover]" }, { kind: "component", type: AnnaIconColumnComponent, selector: "anna-core-anna-icon-column", inputs: ["componentName", "objectKey", "dataObject"], outputs: ["onColumnIconClicked"] }, { kind: "component", type: AnnaWeekCalendarComponent, selector: "anna-core-week-calendar-filter-lib", inputs: ["from-date", "to-date", "disabled-dates", "maxDate", "minDate", "week-calendar-config"], outputs: ["apply", "toggle-calendar"] }, { kind: "component", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaNonEditableGenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anna-core-non-editable-generic-table-lib', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container {{gtGeneralConfig?.tableOuterContainerName}}\" [ngClass]=\"{ 'scroll-left-shadow-effect': isScrolledLeft, 'clickable-row': clickableRow }\" (scroll)=\"onTableContainerScroll($event)\">\r\n    <div\r\n        [class]=\"gtGeneralConfig.tableContainerName\"\r\n        class=\"horizontal-scroll-for-table-container\"\r\n        [ngStyle]=\"{\r\n            height:\r\n                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll\r\n                    ? 'calc(' +\r\n                      ((gtDimension.rowHeight + (includeBorderInTableHeight ? rowBorderWidth : 0)) * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight + ( includeBorderInTableHeight ? (2 * rowBorderWidth) : 0))) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <table class=\"gt\" [ngClass]=\"tableClass\" mat-table [dataSource]=\"renderedData\">\r\n            <tr\r\n                class=\"header-row\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"tableColumns; sticky: true\"\r\n                [style.height.px]=\"gtDimension.headerHeight\"\r\n            ></tr>\r\n            <tr\r\n                class=\"total-row\"\r\n                mat-header-row\r\n                [style.height.px]=\"gtDimension.rowHeight\"\r\n                *matHeaderRowDef=\"totalRowColumns; sticky: true\"\r\n                [class.hidden]=\"\r\n                    showSkeletonLoading ||\r\n                    (!showSkeletonLoading && !tableData.length ) ||\r\n                    (isNoDataToDisplaySubject$ | async) || \r\n                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)\r\n                \"\r\n            ></tr>\r\n            <tr\r\n                [class]=\"rowData.gtClass\"\r\n                [ngClass]=\"{'no-border-tr': (isNoDataToDisplaySubject$ | async)}\"\r\n                mat-row\r\n                *matRowDef=\"let rowData; columns: tableColumns\"\r\n                [style.height.px]=\"gtDimension.rowHeight\"(click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container [matColumnDef]=\"column.colName\" *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\">\r\n                <td mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.colspan\" class=\"{{column.class}}\">\r\n                    \r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a *ngFor=\"let data of column.actionData\" \r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\">\r\n                                {{ data.name }}\r\n                        </a>              \r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong>{{ column.data }}</strong>\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <br>\r\n                            <span \r\n                                *ngIf=\"column.colName == 'total-potential-booked-unit' && gtGeneralConfig.component == 'RATING';\r\n                                else columnLowerData\"\r\n                                class=\"clickable-data\"\r\n                                (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                >{{ column.lowerData }}\r\n                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                <ng-container *ngIf=\"downloadInProgress \r\n                                        && selectedRowTypeForDownload == 'TOTALROW' \">\r\n                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                </ng-container>\r\n                            </span>\r\n                            <ng-template #columnLowerData>\r\n                                <span>{{ column.lowerData }}</span>\r\n                            </ng-template>\r\n                          </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage\">\r\n                          <i class=\"mi mdi-info-outline info-label\" container=\"body\"\r\n                          [ngbTooltip]=\"column.tooltipMessage\"\r\n                          tooltipClass=\"gt-total-row-tooltip\" placement=\"bottom\"></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    \r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container [matColumnDef]=\"columnDef.headerInfo[0].objectKey\" *ngFor=\"let columnDef of tableHeaders;  trackBy: trackByFn\">\r\n                <th #tableHeader nowrap mat-header-cell *matHeaderCellDef [style.width]=\"columnDef.width\">\r\n                    <div class=\"row mx-0\" *ngFor=\"let header of columnDef.headerInfo; let j = index;\">    \r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            {{ header.name }}\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'impsInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'spotsColumnEquivalizationMessageTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ratingInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'rateInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'completedRevBookedColumnTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </p>\r\n\r\n                        <ng-container *ngIf=\"header.typeOfHeaderData === 'CHECKBOX'\">\r\n                            <span\r\n                                *ngIf=\"gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box\r\n                            </span>\r\n                            <span\r\n                                *ngIf=\"!gtGeneralConfig.isHeaderChecked\"\r\n                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                [ngClass]=\"{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }\"\r\n                                (click)=\"selectUnselectAllRows()\"\r\n                            >\r\n                                check_box_outline_blank\r\n                            </span>\r\n                        </ng-container>\r\n\r\n                        <div *ngIf=\"gtGeneralConfig.showAllColumnFilter\" class=\"sort-filter-container\">\r\n                            <ng-container *ngIf=\"header.showTooltipIcon\">\r\n                                <!-- Active tooltip Functionality -->\r\n                                <ng-container *ngIf=\"header.filter === 'CHECKBOX'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],       \r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"bottom left-top auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-checkbox-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'SLIDER'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"sliderToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-slider-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t1=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t1, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'DATE'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"datePickerTooltip\"\r\n                                        placement=\"bottom auto\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-datepicker-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t2=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t2, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'WEEK'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"weekPickerToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t3=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t3, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"header.filter === 'TIME'\">\r\n                                    <span\r\n                                        class=\"mdi mdi-filter-variant\"\r\n                                        [ngClass]=\"{\r\n                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top\"\r\n                                        container=\"body\"\r\n                                        tooltipClass=\"non-edit-time-tooltip\"\r\n                                        [autoClose]=\"'outside'\"\r\n                                        triggers=\"manual\"\r\n                                        #t4=\"ngbTooltip\"\r\n                                        (click)=\"bindTheValueToToolTip(t4, header)\"\r\n                                        (hidden)=\"closeTooltip()\"\r\n                                    >\r\n                                    </span\r\n                                    ><br />\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!header.showTooltipIcon\">\r\n                                <span id=\"no-filter-space\"></span><br />\r\n                            </ng-container>\r\n                            <i *ngIf=\"header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'\" class=\"{{header['tooltip'].iconClass}}\"\r\n                                [ngStyle]=\"{'float': header['tooltip'].iconPosition}\"\r\n                                #t=\"ngbTooltip\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component == 'DRR'\">\r\n                    <ng-container *matCellDef=\"let ROW_DATA\">\r\n                        <ng-container *ngIf=\"showSkeletonLoading\">\r\n                            <td mat-cell>\r\n                                <ngx-skeleton-loader count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                                </ngx-skeleton-loader>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <td\r\n                            mat-cell\r\n                            *ngIf=\"!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']\"\r\n                            [attr.rowspan]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']\">\r\n                            <ng-container\r\n                            *ngFor=\"let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn\"\r\n                            >\r\n                                <ng-container [ngSwitch]=\"subline.typeOfBodyData\">\r\n                                    <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                        <i [class]=\"ROW_DATA.iconClass\"></i>\r\n                                    </ng-container>\r\n                            \r\n                                    <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                        <span\r\n                                            *ngIf=\"ROW_DATA[subline.objectKey]\"\r\n                                            [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                            class=\"material-icons custom-column-checkbox-checked\"\r\n                                            (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                        >\r\n                                            check_box\r\n                                        </span>\r\n                                        <span\r\n                                            *ngIf=\"!ROW_DATA[subline.objectKey]\"\r\n                                            class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                            [ngClass]=\"{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }\"\r\n                                            (click)=\"selectUnselectRow(ROW_DATA)\"\r\n                                        >\r\n                                            check_box_outline_blank\r\n                                        </span>\r\n                                    </ng-container>\r\n                                    <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                        <mat-radio-group\r\n                                            *ngIf=\"ROW_DATA['RadioButtonConfig']\"\r\n                                            [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                            [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                        >\r\n                                            <ng-container\r\n                                                *ngFor=\"let radioButton of ROW_DATA['RadioButtonConfig']; let last = last\"\r\n                                            >\r\n                                                <mat-radio-button\r\n                                                    value=\"{{ radioButton.value }}\"\r\n                                                    class=\"{{ radioButton.class }}\"\r\n                                                    (click)=\"\r\n                                                        radioButtonClicked(\r\n                                                            ROW_DATA,\r\n                                                            radioButton.value,\r\n                                                            ROW_DATA['RadioButtonConfig'][0].isDisabled\r\n                                                        )\r\n                                                    \"\r\n                                                    >{{ radioButton.label }}</mat-radio-button\r\n                                                ><br *ngIf=\"!last\" />\r\n                                            </ng-container>\r\n                                        </mat-radio-group>\r\n                                    </ng-container>\r\n                            \r\n                                    <div *ngSwitchDefault showEllipsisTextOnHover>\r\n                                        {{ ROW_DATA[subline.objectKey] }}\r\n                            \r\n                                        <ng-container\r\n                                            *ngIf=\"\r\n                                                subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)\r\n                                            \"\r\n                                        >\r\n                                            <i\r\n                                                class=\"mi mdi-info-outline remarks-tooltip\"\r\n                                                [ngbTooltip]=\"columnInfoTooltip\"\r\n                                                placement=\"bottom\"\r\n                                                container=\"body\"\r\n                                                tooltipClass=\"remarks-info-tooltip\"\r\n                                                #t=\"ngbTooltip\"\r\n                                            ></i>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            </td>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"gtGeneralConfig.component != 'DRR'\">\r\n                    <td mat-cell *matCellDef=\"let ROW_DATA\" [style.background]=\"ROW_DATA.backgroundColor\" \r\n                    [style.border]=\"ROW_DATA.border\"\r\n                    class=\"{{ROW_DATA.rowClass}}\"\r\n                    >\r\n                        <ngx-skeleton-loader *ngIf=\"showSkeletonLoading\" count=\"1\" [theme]=\"{ height: '10px', display: 'block' }\">\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && !(isNoDataToDisplaySubject$ | async)\">\r\n                                <div showEllipsisTextOnHover *ngFor=\"let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn\">\r\n                                    <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                        <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                            <i *ngIf=\"!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)\" [class]=\"ROW_DATA.iconClass\" (click)=\"iconClicked(ROW_DATA,ROW_DATA.iconClass)\"\r\n                                            ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\" placement=\"bottom\" container=\"body\"\r\n                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                            ></i>\r\n                                            <ng-container *ngIf=\"starredInProgress && ROW_DATA.orderId == selectedStarredOrderId\">\r\n                                                <div class=\"spinner-for-button-directive\"></div>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                          <ng-container *ngFor=\"let action of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n\r\n                                            <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\"\r\n                                            (mouseenter)=\"mouseEnterOnStringTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" placement=\"bottom auto\" container=\"body\"\r\n                                            [autoClose]=\"true\" tooltipClass=\"team-user-tooltip remove-on-scroll-class\" [ngbTooltip]=\"userLoggedInDetails\">\r\n                                             </i>\r\n\r\n                                            <ng-container *ngIf=\"action.showObjectKey\">\r\n                                               {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                            </ng-container>\r\n\r\n                                          </ng-container>\r\n                                        </ng-container>\r\n    \r\n                                        \r\n                                        <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                            <p [innerHTML]=\"ROW_DATA.message\"></p>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                            <anna-core-anna-icon-column [componentName]=\"gtGeneralConfig.component\" [objectKey]=\"subline.objectKey\" [dataObject]=\"ROW_DATA\" (onColumnIconClicked)=\"svgIconClicked($event)\"></anna-core-anna-icon-column>\r\n                                        </ng-container>                                       \r\n    \r\n                                        <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                          <ng-container *ngFor=\"let text of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n                                            <button *ngIf=\"text.showTooltip\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\"\r\n                                              class=\"{{text.class}}\" (mouseenter)=\"mouseEnterOnTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\"\r\n                                              [ngbTooltip]=\"textActionTooltipTemplate\" placement=\"bottom\" container=\"body\"\r\n                                              tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\">\r\n                                              {{ text.name}}\r\n                                            </button>\r\n                                        \r\n                                            <button *ngIf=\"!text.showTooltip\" (click)=\"textActionClicked(ROW_DATA,text.id)\" [disabled]=\"text.isDisabled\"\r\n                                              class=\"{{text.class}}\">\r\n                                              {{text.name}}\r\n                                            </button>\r\n                                          </ng-container>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CHECKBOX'\">\r\n                                            <span\r\n                                                *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                class=\"material-icons custom-column-checkbox-checked\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        false\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box\r\n                                            </span>\r\n                                            <span\r\n                                                *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                class=\"material-icons custom-column-checkbox-unchecked\"\r\n                                                [ngClass]=\"{\r\n                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                }\"\r\n                                                (click)=\"\r\n                                                    selectOrUnselectCheckbox(\r\n                                                        ROW_DATA,\r\n                                                        columnDef.headerInfo[subLineIndex].objectKey,\r\n                                                        true\r\n                                                    )\r\n                                                \"\r\n                                            >\r\n                                                check_box_outline_blank\r\n                                            </span>\r\n                                        </ng-container>\r\n    \r\n                                        <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                          <a  \r\n                                              *ngFor=\"let text of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\" \r\n                                              [class]=\"text.class\"\r\n                                              (click)=\"onClickableDataClicked(ROW_DATA, text.id)\">\r\n                                              {{ text.name }}\r\n                                          </a>\r\n                                          <span \r\n                                              *ngIf=\"subline.objectKey == 'displayBookedUnits' && gtGeneralConfig.component == 'RATING'\"\r\n                                              class=\"clickable-data\"\r\n                                              (click)=\"spotDetailsDownloadClicked('DATAROW', ROW_DATA)\"\r\n                                              [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                                              >{{ ROW_DATA.displayBookedUnits}}\r\n                                              <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                              <ng-container *ngIf=\"downloadInProgress \r\n                                                      && ROW_DATA.inventoryCodeId == selectedInventoryIdForDownload \r\n                                                      && ROW_DATA.demographic == selectedDemographicForDownload \">\r\n                                                  <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                              </ng-container>\r\n                                          </span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'STRING___ICON_OR_TEXT_ACTION'\">\r\n                                          <ng-container *ngFor=\"let action of ROW_DATA[columnDef.headerInfo[subLineIndex].actionKey]\">\r\n                                            <span ngbTooltip=\"{{ action.additionalTextBeforeLink }}\" placement=\"bottom\" container=\"body\"\r\n                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\" [disableTooltip]=\"!action.enableTooltipForAdditionalText\">\r\n                                            {{ action.additionalTextBeforeLink }}\r\n                                            </span>\r\n                                        \r\n                                            <ng-container *ngIf=\"action && action.typeOfData== 'STRING'\">\r\n                                              {{ action.data }}\r\n                                            </ng-container>\r\n                                      \r\n                                            <a [id]=\"action.id\" *ngIf=\"action.showLink\" (click)=\"textActionClicked(ROW_DATA, action.id)\" [class]=\"action.linkClass\" \r\n                                              [ngClass]=\"{'disabled': action.disabledLink}\">{{action.data}}\r\n                                            </a>\r\n                                        \r\n                                            <ng-container *ngIf=\"action.showTooltip\">\r\n                                              <ng-container *ngIf=\"action.tooltipData.tooltipTableBody && action.tooltipData.tooltipTableBody.length\">\r\n                                      \r\n                                                <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                                (mouseenter)=\"mouseEnterOnStringTextActionTypeContainingTable(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" placement=\"bottom auto\" container=\"body\"\r\n                                                [autoClose]=\"true\" tooltipClass=\"tooltip-containing-table remove-on-scroll-class\" [ngbTooltip]=\"tooltipContainingTableTemplate\">\r\n                                                 </i>\r\n                                              </ng-container>\r\n                                      \r\n                                              <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                                (click)=\"iconClickedOnStringIconActionType(ROW_DATA, action.id)\"\r\n                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                (mouseenter)=\"mouseEnterOnStringTextActionType(ROW_DATA, columnDef.headerInfo[subLineIndex].tooltipKey)\" \r\n                                                [placement]=\"action.tooltipPlacement ? action.tooltipPlacement : 'bottom auto'\" container=\"body\"\r\n                                                [autoClose]=\"true\" tooltipClass=\"team-user-tooltip remove-on-scroll-class {{ action['tooltipClass'] }}\" [ngbTooltip]=\"userLoggedInDetails\">\r\n                                                 </i>\r\n                                              </ng-container>\r\n                                      \r\n                                            </ng-container>\r\n                                      \r\n                                            <ng-container *ngIf=\"!action.showTooltip\">\r\n                                              <i *ngIf=\"action.showIcon\" [class]=\"action.iconClass\" [ngClass]=\"{'disabled': action.disabledIcon}\"\r\n                                              (click)=\"iconClickedOnStringIconActionType(ROW_DATA, action.id)\">\r\n                                              </i>\r\n                                            </ng-container>                                          \r\n                                        \r\n                                          </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                            <span [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"></span>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngSwitchDefault>\r\n                                            <ng-container *ngIf=\"subline.objectKey != 'description'\">\r\n                                                <span>{{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}</span>\r\n                                                <i\r\n                                                    *ngIf=\"subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    [ngbTooltip]=\"sellerHierarchyTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    triggers=\"manual\"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"hierarchy-tooltip\"\r\n                                                    (mouseenter)=\"bindTheValueToSellerGroupTooltip(ROW_DATA.sellerGroupHierarchy, info)\">\r\n                                                </i>\r\n\r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedRatingDifference\"\r\n                                                >\r\n                                                </i>\r\n                                            \r\n                                                <i *ngIf=\"subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] \"\r\n                                                    class=\"mi mdi-info-outline seller-tooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    (mouseenter)=\"setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\"\r\n                                                    tooltipClass=\"posted-avg-tooltip\"\r\n                                                    [ngbTooltip]=\"postedImpDifference\"\r\n                                                >\r\n                                                </i>\r\n\r\n                                            </ng-container>\r\n                                            <ng-container *ngIf=\"subline.objectKey == 'description'\">\r\n                                                <p *ngIf=\"ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum\">\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                        {{ ROW_DATA.descriptionMessage }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                    <ng-container *ngIf=\"ROW_DATA.descriptionEmailReferenceNum != '-' && ROW_DATA.descriptionEmailReferenceNum != ''\">\r\n                                                        Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}\r\n                                                        <br />\r\n                                                    </ng-container>\r\n                                                </p>\r\n                                                <a\r\n                                                    href=\"{{ ROW_DATA.descriptionDetailsUrl }}\"\r\n                                                    target=\"_blank\"\r\n                                                    *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\"\r\n                                                >\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                </a>\r\n                                                <ng-container *ngIf=\"ROW_DATA.activityname.toLowerCase() == 'order onboarded'\">\r\n                                                    <a *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\" (click)=\"viewDetailsClicked(ROW_DATA)\">\r\n                                                      <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">View details</button>\r\n                                                    </a>                \r\n                                                </ng-container>\r\n                                               \r\n                                                <a href=\"{{ ROW_DATA.descriptionEmailUrl }}\" target=\"_blank\" *ngIf=\"ROW_DATA.descriptionEmailUrl != '-' && ROW_DATA.descriptionEmailUrl != ''\">\r\n                                                    <button class=\"btn viewDetailsAndEmailBtn\">View email</button>\r\n                                                </a>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n    \r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"(isNoDataToDisplaySubject$ | async)\">\r\n                                <div>\r\n                                    {{null}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </table>\r\n    </div>\r\n    <anna-core-no-data-lib [width]=\"noDataWidth\" [marginTop]=\"marginTop\" *ngIf=\"(isNoDataToDisplaySubject$ | async)\"> </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n        <anna-core-sort-lib  [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <p class=\"d-flex justify-content-between\">\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n            <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n        </p>\r\n        <p class=\"search-box\">\r\n            <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n            <input\r\n                type=\"text\"\r\n                placeholder=\"Search\"\r\n                class=\"search-input\"\r\n                style=\"margin-left: 2px; border: none; padding: 0px\"\r\n                [(ngModel)]=\"searchItem\"\r\n                (ngModelChange)=\"searchForTheItem($event)\"\r\n            />\r\n            <i class=\"mdi mdi-close search-bar-close\" [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n        </p>\r\n        <div style=\"position:relative\">\r\n            <!-- Track By func -->\r\n            <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\" class=\"dropdown-data-container\">\r\n                <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\" (click)=\"selectUnselectCheckbox(option)\">\r\n                    <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                    <span *ngIf=\"!option.isSelected\" role=\"button\" class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                    <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n                </p>\r\n            </cdk-virtual-scroll-viewport>\r\n            <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableCheckboxApply }\"\r\n            (click)=\"applyFilters()\"\r\n            [disabled]=\"disableCheckboxApply\"\r\n        >\r\n            Apply\r\n            <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length && tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' + selectedCheckboxOptionsCount + ')' }}</span>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>   \r\n        </div>\r\n    </div>\r\n    <!-- <button class=\"column-clear-all align-center\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n        Clear filter\r\n    </button> -->\r\n        \r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <section class=\"min-maxContainer\">\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMinValue\"\r\n                (ngModelChange)=\"minValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMinValueError}\"\r\n                placeholder=\"Min\"\r\n            />\r\n            <span>To</span>\r\n            <input\r\n                type=\"number\"\r\n                class=\"slider-text\"\r\n                step=\"{{ sliderFilterTextBoxStep }}\"\r\n                [(ngModel)]=\"sliderMaxValue\"\r\n                (ngModelChange)=\"maxValueChanged($event)\"\r\n                [ngClass]=\"{'red-border': showSliderMaxValueError}\"\r\n                placeholder=\"Max\"\r\n            />\r\n        </section>\r\n        <div class=\"sidebar-slider\">\r\n            <ngx-slider\r\n                [ngClass]=\"{'show-min': sliderMinValue != options.floor, 'show-max': sliderMaxValue != options.ceil}\"\r\n                class=\"filter-slider\"\r\n                [value]=\"sliderMinValue\"\r\n                [highValue]=\"sliderMaxValue\"\r\n                [options]=\"options\"\r\n            ></ngx-slider>\r\n        </div>\r\n    </ng-container>\r\n    \r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelSliderFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n            (click)=\"applySliderFilter()\"\r\n            [disabled]=\"disableSliderApplyButton\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template>\r\n\r\n<!-- Week Picker Template -->\r\n<ng-template #weekPickerToolTip>\r\n    <div class=\"weekpicker-container\">\r\n        <anna-core-week-calendar-filter-lib\r\n            [week-calendar-config]=\"gtGeneralConfig.multiWeekPickerConfig\"\r\n            (apply)=\"applyWeekFilter($event)\"\r\n            [from-date]=\"calendarMinEnabledDate\"\r\n            [to-date]=\"calendarMaxEnabledDate\"\r\n        >\r\n        </anna-core-week-calendar-filter-lib>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Time Filter Template -->\r\n<ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <!-- Multi time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!multiTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectMultiTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Multi</p>\r\n            </div>\r\n            <!-- Zero time option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!zeroTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectZeroTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Include Zero</p>\r\n            </div>\r\n            <!-- Enter time range option checkbox -->\r\n            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n  <p style=\"padding: 0.5rem; color: black;white-space: nowrap;\">This preemption is rejected and not marked for credit.</p>\r\n</ng-template>\r\n\r\n<ng-template #ratingInfoTooltip>\r\n    <p class=\"first-row\">Shows 'Booked Rating' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\">Shows 'Projected Rating' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #impsInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked IMPS' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected IMPS' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #spotsColumnEquivalizationMessageTooltip>\r\n    <p class=\"spot-column-tooltip-message\" >This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.</p>\r\n</ng-template>\r\n\r\n<ng-template #rateInfoTooltip>\r\n    <p class =\"first-row\" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>\r\n    <p class=\"second-row\" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>\r\n</ng-template>\r\n\r\n<ng-template #sellerHierarchyTooltip>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length > 0\">\r\n        <section class = \"hierarchy-table-container\">\r\n        <table class=\"seller-hierarchy-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th>#</th>\r\n                    <th>Inventory Codes</th>\r\n                    <th>Program/Description</th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of sellerGroupHierarchy; let tooltipIndex = index\">\r\n                    <td>{{ tooltipIndex + 1 }}</td>\r\n                    <td>\r\n                        <span>{{ data.InventoryCode }}</span>\r\n                    </td>\r\n                    <td>\r\n                        <span>{{ data.Program }}</span>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"sellerGroupHierarchy.length == 0\">\r\n        <span style=\"color: #000\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationInfoTooltip>\r\n    <p class =\"first-row\" >The values are for the entire week.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedRatingDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>\r\n</ng-template>\r\n\r\n<ng-template #ongoingRevBookedColumnTooltip>\r\n    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #completedRevBookedColumnTooltip>\r\n    <p>The Booked $ value corresponds on the last permanent revision generated</p>\r\n</ng-template>\r\n\r\n<ng-template #circularProgressBar>\r\n    <circle-progress\r\n        [percent]=\"percentDone\"\r\n        [radius]=\"5\"\r\n        [showTitle]=\"false\"\r\n        [showUnits]=\"false\"\r\n        [showSubtitle]=\"false\"\r\n        [outerStrokeWidth]=\"3\"\r\n        [innerStrokeWidth]=\"3\"\r\n        [space]=\"-3\"\r\n        [outerStrokeColor]=\"'#268bff'\"\r\n        [innerStrokeColor]=\"'#d5d5d5'\"\r\n        [animationDuration]=\"10\"\r\n    ></circle-progress>\r\n</ng-template>\r\n\r\n\r\n<ng-template #userLoggedInDetails>\r\n  <div class=\"tooltip-div-container\">\r\n    <ng-container *ngFor=\"let data of textActionTooltip\">\r\n        <span *ngIf=\"data.key != 'read'\">        \r\n      {{ data.key }} <b> {{data.value}}</b>\r\n        </span>\r\n        <span *ngIf=\"data.key == 'read'\">        \r\n           <b> {{data.value}}</b>\r\n        </span>\r\n   </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #markAsReadTip>\r\n    <div class=\"tooltip-div-container\">\r\n      <ng-container *ngFor=\"let data of textActionTooltip\">\r\n        {{data.value}}\r\n     </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n<ng-template #textActionTooltipTemplate>\r\n  <ng-container *ngFor=\"let data of textActionTooltip\">\r\n     {{ data.key }} <b> {{data.value}}</b>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n  <div *ngIf=\"tooltipContainingTable\" class=\"tooltip-div-container\">\r\n    <ul>\r\n      <li *ngFor=\"let headerMsg of tooltipContainingTable.tableHeaderMsg\">\r\n        <b> {{headerMsg}}  </b>\r\n      </li>\r\n    </ul>\r\n\r\n    <table class=\"tooltip-table\">\r\n      <thead>\r\n        <tr>\r\n          <th *ngFor=\"let header of tooltipContainingTable.tooltipTableHeader\">\r\n            {{ header}}\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let rows of tooltipContainingTable.tooltipTableBody\">\r\n          <td *ngFor=\"let data of rows\">\r\n            {{ data }}\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n\r\n    <ul>\r\n      <li style=\"margin:0; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul>\r\n\r\n  </div>\r\n</ng-template>\r\n<ng-template #textActionTooltipTemplate>\r\n   <ng-container *ngFor=\"let data of textActionTooltip\">\r\n      {{ data.key }} <b> {{data.value}}</b>\r\n   </ng-container>\r\n</ng-template>\r\n", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}.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}.check-mark,.unread-mark{cursor:pointer}.on-hover:hover .unread-mark,.notificationHover .check-mark{opacity:0;cursor:pointer}.on-hover:hover .check-mark{opacity:1;cursor:pointer}: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;width:max-content}:host ::ng-deep .gt thead tr th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt thead tr th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}: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}#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,.mdi-information,.mdi-information-outline,.seller-tooltip{font-size:.875rem;color:#268bff;position:relative;top:.1875rem;cursor:pointer}.seller-tooltip{top:-1px;float:right}::ng-deep .remarks-info-tooltip .tooltip-inner{max-width:19.25rem!important}.rating-icon,.lur-violation-icon{color:#268bff;cursor:pointer;position:relative;left:-2px}::ng-deep .rating-info-tooltip .tooltip-inner{max-width:800px!important}.spots-info-icon{color:#268bff;cursor:pointer;margin:1px 0 0 -13px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -14px}::ng-deep .spot-info-tooltip .tooltip-inner{left:60px;position:relative;max-width:220px!important;background:#fff;word-break:break-word;display:flex}::ng-deep .spot-info-tooltip-for-orderlisting-table .tooltip-inner{max-width:220px!important;background:#fff;word-break:break-word;display:flex}p.first-row{padding:.5rem .5rem 0;color:#000;white-space:nowrap;text-align:left}p.second-row{padding:2px .5rem .5rem;color:#000;white-space:nowrap;text-align:left}::ng-deep .gt-total-row-tooltip{opacity:1!important}::ng-deep .gt-total-row-tooltip .tooltip-inner{color:#000;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;background-color:#fff;padding:4px!important;width:100%;border-radius:2px!important}::ng-deep .gt-total-row-tooltip .arrow:before{border-top-color:#fff!important}.info-label{margin-left:4px;color:#268bff;vertical-align:text-top}::ng-deep .hierarchy-tooltip .tooltip-inner{padding:4px!important;max-width:22.75rem;max-height:11.25rem}table.seller-hierarchy-table{table-layout:fixed}table.seller-hierarchy-table tr th{font-family:Roboto;font-size:.75rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;color:#5e5e5e;white-space:nowrap;background:#ededed;position:sticky;box-shadow:inset 0 1px #d4d4d4;top:0;z-index:1}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{border-left:1px solid #d4d4d4}table.seller-hierarchy-table tr th:last-of-type,table.seller-hierarchy-table tr td:last-of-type{border-right:1px solid #d4d4d4;width:7.875rem!important}table.seller-hierarchy-table tr th:nth-of-type(2){width:7.75rem!important}table.seller-hierarchy-table tr td{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;box-shadow:none!important;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}table.seller-hierarchy-table tr td:nth-of-type(2),table.seller-hierarchy-table tr td:nth-of-type(3){padding-top:.25rem}table.seller-hierarchy-table tr td span{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}section.hierarchy-table-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)!important;margin-top:1.5rem}section.hierarchy-table-container::-webkit-scrollbar{width:5px;height:5px}section.hierarchy-table-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}.difference-text{padding:.5rem;color:#000;text-align:left}::ng-deep .posted-avg-tooltip .tooltip-inner{width:13.8125rem!important}::ng-deep .drrBooked-info-tooltip{transform:translate(26px,6px)}::ng-deep .drrBooked-info-tooltip .tooltip-inner{max-width:307px!important;width:242px!important;background:#fff;word-break:break-word;display:flex;padding:4px!important;text-align:left}::ng-deep .drrBooked-info-tooltip .tooltip-inner p{color:#000}::ng-deep .drrBooked-info-tooltip .arrow:before{border-right-color:#fff!important}.clickable-data{cursor:pointer;color:#268bff!important;display:flex!important;align-items:center}.clickable-data .spot-details-download-icons{font-size:12px}.disabled-clickable-data{pointer-events:none;color:#d4d4d4!important}.spot-column-tooltip-message{color:#000;padding:10px;width:max-content;text-align:left}div.spinner-for-button-directive{position:relative;left:-1px}.clickable-row table tr.mat-row td{cursor:pointer!important}.tooltip-div-container{text-align:left!important;padding:12px 4px;color:#4a4a4a!important;font-size:12px!important;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.mdi-information,.mdi-information-outline{left:3px;top:1px}.mdi-information-outline{position:static}::ng-deep .team-user-tooltip.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .team-user-tooltip.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .team-user-tooltip .tooltip-inner{opacity:1!important;width:-moz-fit-content!important;width:fit-content!important;max-width:520px!important;border-radius:2px;padding:0 4px!important}::ng-deep .team-user-tooltip .tooltip-inner .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .team-user-tooltip .tooltip-inner.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .gt-icon-column-tooltip{opacity:1!important}::ng-deep .gt-icon-column-tooltip .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .gt-icon-column-tooltip.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .gt-icon-column-tooltip.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .gt-icon-column-tooltip .tooltip-inner{width:100%}::ng-deep .tooltip-containing-table{opacity:1!important}::ng-deep .tooltip-containing-table .tooltip-inner{color:#4a4a4a;text-align:left;padding:8px!important;border-radius:.125rem;background:white!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}::ng-deep .tooltip-containing-table.bs-tooltip-top .arrow:before{border-top:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-left .arrow:before{border-left:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-bottom .arrow:before{border-bottom:6px solid white}::ng-deep .tooltip-containing-table.bs-tooltip-right .arrow:before{border-right:5px solid white}::ng-deep .tooltip-containing-table li{margin:0!important;padding:0!important}::ng-deep .tooltip-containing-table ul{margin:0!important;padding-left:8px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 10px;width:100%}table.tooltip-table th,table.tooltip-table td{padding:2px 8px;line-height:normal}table.tooltip-table thead tr th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important;border:none}table.tooltip-table thead tr th{color:#5e5e5e!important;font-size:12px;font-weight:500;font-family:Roboto;line-height:1.67;background-color:#ededed;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}table.tooltip-table thead tr th div.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}table.tooltip-table tbody tr td{color:#5e5e5e!important;font-size:12px;font-weight:500;font-family:Roboto;line-height:1.67}table.tooltip-table tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.tooltip-table tbody tr td:nth-of-type(n + 2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}\n"] }]
@@ -4739,19 +4743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class AnnaColumnDateRangeFilterComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-AnnaColumnDateRangeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnDateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaColumnDateRangeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaColumnDateRangeFilterComponent, selector: "anna-core-anna-column-date-range-filter", ngImport: i0, template: "<!-- <ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template> -->", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnDateRangeFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'anna-core-anna-column-date-range-filter', template: "<!-- <ng-template #datePickerTooltip>\r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <div class=\"datepicker-container\">\r\n            <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n                Clear filter\r\n            </button>\r\n            <anna-core-calendar-filter-lib\r\n                [minDate]=\"calendarMinEnabledDate\"\r\n                [maxDate]=\"calendarMaxEnabledDate\"\r\n                [selectedFromDate]=\"selectedMinDate\"\r\n                [selectedToDate]=\"selectedMaxDate\"\r\n                (selectedDate) = \"calendarDateChanged($event)\"\r\n                [label]=\"selectedLabel\"\r\n            >\r\n            </anna-core-calendar-filter-lib>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n        <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n    </div>\r\n    \r\n</ng-template> -->" }]
-        }], ctorParameters: function () { return []; } });
-
-class AnnaColumnCheckboxFilterComponent {
-    constructor(annaSortService, annaFilterService) {
+    constructor(annaDateTimeFormatService, annaSortService, annaFilterService) {
+        this.annaDateTimeFormatService = annaDateTimeFormatService;
         this.annaSortService = annaSortService;
         this.annaFilterService = annaFilterService;
         this.limit = 30;
@@ -4764,6 +4757,7 @@ class AnnaColumnCheckboxFilterComponent {
         this.start = 0;
         this.end = this.limit + this.start;
         this.disableColumnClearAllBtn = true;
+        this.calendarSelection = { fromDate: null, toDate: null };
     }
     ngOnInit() {
         this.populateTooltipDataBasedOnSelectedRadio(this.filterTabObjects[0]);
@@ -4781,205 +4775,93 @@ class AnnaColumnCheckboxFilterComponent {
         this.disableActiveFilterClearButton();
         this.createFilterTooltipData(header);
     }
-    getCheckboxData(header) {
-        let tooltipOptions = this.createListForCheckboxFilter(header);
-        let selectedItems = sortBy(tooltipOptions.filter(item => item.isSelected), "label");
-        let unselectedItems = sortBy(tooltipOptions.filter(item => !item.isSelected), "label");
-        this.clonedTooltipOptions = [...selectedItems, ...unselectedItems];
-        this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
-        let margin = 5;
-        let dataLength = this.tooltipOptions.length;
-        this.heightOfCheckboxTooltipFilter = dataLength > 6 ? 200 : ((26.03 * dataLength) + (margin * dataLength) + margin);
-        this.disableSelectAll = unselectedItems.length == 0;
-        this.disableClearAll = selectedItems.length == 0;
-        this.selectedCheckboxOptionsCount = selectedItems.length;
+    disableActiveFilterClearButton() {
+        let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
+        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
+        let isSortPresent = (this.annaSortService.columnSortState && this.annaSortService.columnSortState.size > 0 && currentColumnSortFilter != SortTypeEnum.DEFAULT);
+        this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
     }
-    createListForCheckboxFilter(header) {
-        let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
-        let uniqOptionData = uniq(optionData.map(item => item[header]));
-        let tooltipOptions = uniqOptionData.map((item, index) => new TooltipModel(item, index + 1));
-        this.selectUnselectListCheckbox(tooltipOptions, header);
-        let index = tooltipOptions.findIndex(item => item.value == null);
-        if (index != -1) {
-            tooltipOptions[index].label = "(Blank)";
-        }
-        return tooltipOptions;
+    getColumnSortStateForSelectedRadio() {
+        let currentColumnSortFilter = this.annaSortService.columnSortState && this.annaSortService.columnSortState.has(this.annaFilterService.selectedRadio) &&
+            this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio);
+        currentColumnSortFilter = currentColumnSortFilter ? currentColumnSortFilter : SortTypeEnum.DEFAULT;
+        return currentColumnSortFilter;
     }
-    selectUnselectListCheckbox(tooltipOptions, header) {
-        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
-            let selectedValueSet = new Set(this.annaFilterService.tooltipSelectedMap.get(header));
-            tooltipOptions.forEach(item => item.isSelected = selectedValueSet.has(item.value) ? true : false);
+    createFilterTooltipData(header) {
+        if (this.showFilterComponent) {
+            this.disableCalendarApplyBtn = true;
+            this.getCalendarData();
         }
-        else {
-            tooltipOptions.forEach(item => item.isSelected = true);
+        else if (this.showSortComponent) {
+            this.disableCalendarApplyBtn = true;
         }
     }
-    unCheckAllCheckbox() {
-        this.tooltipOptions.forEach(item => {
-            item.isSelected = false;
-            let index = this.clonedTooltipOptions.findIndex(opt => opt.id == item.id);
-            this.clonedTooltipOptions[index].isSelected = false;
-        });
-        this.selectedCheckboxOptionsCount = 0;
-        this.disableSelectAll = false;
-        this.disableClearAll = true;
-        this.disableCheckboxApply = true;
-    }
-    selectAllCheckbox() {
-        this.tooltipOptions.forEach(item => {
-            item.isSelected = true;
-            let index = this.clonedTooltipOptions.findIndex(opt => opt.id == item.id);
-            this.clonedTooltipOptions[index].isSelected = true;
-        });
-        this.selectedCheckboxOptionsCount = this.tooltipOptions.length;
-        this.disableSelectAll = true;
-        this.disableClearAll = false;
-        this.disableCheckboxFilterApplyButton();
+    getCalendarData() {
+        const parsingFormat = "MM/DD/YYYY";
+        let minMaxDate = this.createRangeForTheDateFilter();
+        this.selectRangeForTheDateFilter(minMaxDate, parsingFormat);
     }
-    searchForTheItem(str) {
-        if (str) {
-            this.tooltipOptions = cloneDeep(this.clonedTooltipOptions.filter(item => item.label.toString().toLowerCase().includes(str.toLowerCase())));
-            this.tooltipOptions.forEach(element => {
-                element.label = this.boldString(element.label, str);
-            });
-            if (this.tooltipOptions.length > 0) {
-                let unselectedItems = this.tooltipOptions.filter((item) => !item.isSelected);
-                let selectedItems = this.tooltipOptions.filter((item) => item.isSelected);
-                this.disableSelectAll = unselectedItems.length == 0;
-                this.disableClearAll = selectedItems.length == 0;
-                this.selectedCheckboxOptionsCount = selectedItems.length;
-                this.disableCheckboxApply = (selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered());
-            }
-            else {
-                this.selectedCheckboxOptionsCount = 0;
-                this.disableCheckboxApply = true;
-                this.disableClearAll = true;
-                this.disableSelectAll = true;
-            }
+    createRangeForTheDateFilter() {
+        let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+        let minMaxDate;
+        //When you want to use startDate and endDate combined as single column then use Period.
+        if (this.annaFilterService.selectedRadio == "period") {
+            minMaxDate = this.createStartEndDateRange(optionData);
         }
         else {
-            this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
-            let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
-            let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
-            this.selectedCheckboxOptionsCount = selectedItems.length;
-            this.disableSelectAll = unselectedItems.length == 0;
-            this.disableClearAll = selectedItems.length == 0;
-            this.disableCheckboxFilterApplyButton();
-        }
-    }
-    boldString(str, find) {
-        let indexes = this.getIndicesOf(find, str, false);
-        indexes.forEach((item, index) => {
-            let startIndex = item + (index * 7); //Multiplying by 7 as there are 7char: <b></b>
-            let endIndex = startIndex + find.length;
-            let strToBeReplaced = str.substring(startIndex, endIndex);
-            str = str.replace(strToBeReplaced, "<b>" + strToBeReplaced + "</b>");
-        });
-        return str;
-    }
-    getIndicesOf(searchStr, str, caseSensitive) {
-        var searchStrLen = searchStr.length;
-        if (searchStrLen == 0) {
-            return [];
-        }
-        var startIndex = 0, index, indices = [];
-        if (!caseSensitive) {
-            str = str.toLowerCase();
-            searchStr = searchStr.toLowerCase();
-        }
-        while ((index = str.indexOf(searchStr, startIndex)) > -1) {
-            indices.push(index);
-            startIndex = index + searchStrLen;
-        }
-        return indices;
-    }
-    removeBoldElementFromString(originalString) {
-        let firstRegExp = new RegExp('<b>', 'g');
-        let secondRegExp = new RegExp('</b>', 'g');
-        let ret = originalString.replace(firstRegExp, '');
-        return ret.replace(secondRegExp, '');
-    }
-    disableCheckboxFilterApplyButton() {
-        let selectedItems = this.showFilterComponent ? this.tooltipOptions.filter(item => item.isSelected) : [];
-        if (this.showFilterComponent && this.showSortComponent) {
-            let isFilterChanged = this.checkIfCheckboxTooltipIsFiltered();
-            let isSortChanged = this.checkIfSortingChanged();
-            this.disableCheckboxApply = selectedItems.length == 0 || (!isSortChanged && !isFilterChanged);
-        }
-        else if (this.showFilterComponent) {
-            this.disableCheckboxApply = selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered();
-        }
-        else if (this.showSortComponent) {
-            this.disableCheckboxApply = !this.checkIfSortingChanged();
+            minMaxDate = this.annaFilterService.returnMinAndMaxDate(optionData, this.annaFilterService.selectedRadio);
         }
+        return minMaxDate;
     }
-    checkIfSortingChanged() {
-        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
-        this.isSortChanged = this.tempSortOrder != null && this.tempSortOrder != currentColumnSortFilter;
-        return this.isSortChanged;
+    createStartEndDateRange(optionData) {
+        let minStartDate = this.annaFilterService.returnMinAndMaxDate(optionData, "startDate");
+        let maxEndDate = this.annaFilterService.returnMinAndMaxDate(optionData, "endDate");
+        return [minStartDate[0], maxEndDate[1]];
     }
-    checkIfCheckboxTooltipIsFiltered() {
-        let currentSelectedValue = [];
-        let previousSelectedValue = [];
+    selectRangeForTheDateFilter(minMaxDate, parsingFormat) {
+        this.calendarMinEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[0], parsingFormat);
+        this.calendarMaxEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[1], parsingFormat);
         if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
-            previousSelectedValue = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
-            if (!this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
-                let initialValue = sortBy(uniq(this.clonedTableData.map((item) => item[this.annaFilterService.selectedRadio])));
-                this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, initialValue);
+            let selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+            if (selectedDateObj.fromDate.isAfter(minMaxDate[0])) {
+                this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.fromDate, parsingFormat);
             }
-        }
-        else if (this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
-            previousSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
-        }
-        else {
-            previousSelectedValue = sortBy(uniq(this.clonedTableData.map(item => item[this.annaFilterService.selectedRadio])));
-            this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, previousSelectedValue);
-        }
-        if (this.tooltipOptions) {
-            currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.value));
-            if (!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
-                currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            else {
+                this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[0], parsingFormat);
+            }
+            if (selectedDateObj.toDate.isAfter(minMaxDate[1])) {
+                this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[1], parsingFormat);
+            }
+            else {
+                this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.toDate, parsingFormat);
             }
         }
-        let blankIndex = currentSelectedValue.findIndex((item) => item == null);
-        if (blankIndex != -1) {
-            currentSelectedValue = sortBy(currentSelectedValue);
+        else {
+            this.selectedMinDate = cloneDeep(this.calendarMinEnabledDate);
+            this.selectedMaxDate = cloneDeep(this.calendarMaxEnabledDate);
         }
-        this.isFilterChanged = !isEqual(currentSelectedValue, previousSelectedValue);
-        return this.isFilterChanged;
-    }
-    getColumnSortStateForSelectedRadio() {
-        let currentColumnSortFilter = this.annaSortService.columnSortState && this.annaSortService.columnSortState.has(this.annaFilterService.selectedRadio) &&
-            this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio);
-        currentColumnSortFilter = currentColumnSortFilter ? currentColumnSortFilter : SortTypeEnum.DEFAULT;
-        return currentColumnSortFilter;
+        this.calendarSelection.fromDate = cloneDeep(this.selectedMinDate);
+        this.calendarSelection.toDate = cloneDeep(this.selectedMaxDate);
     }
-    applyFilters() {
-        this.applyListFilters();
+    applyDateFilter() {
+        this.applyDateFilterOnData();
         this.applySortingOnFilteredData();
-        this.setInitialRowsForTable();
-        // this.disableEnableEachColumnTooltipIcon();
-        // this.annaFilterService.updateStateOfAllTheKeys(this.annaSortService.columnSortState);
         this.emitData();
+        this.setInitialRowsForTable();
+        this.annaFilterService.updateStateOfAllTheKeys(this.annaSortService.columnSortState);
+        this.closeTooltip.emit();
     }
-    applyListFilters() {
-        if (this.showFilterComponent && this.isFilterChanged) {
-            let currentSelectedValue = [];
-            if (this.tooltipOptions) {
-                currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.value));
-                if (!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
-                    currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
-                }
-            }
-            let blankIndex = currentSelectedValue.findIndex((item) => item == null);
-            if (blankIndex != -1) {
-                currentSelectedValue = sortBy(currentSelectedValue);
-            }
-            this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData, currentSelectedValue);
-            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedValue);
-            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
-            this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
-        }
+    updateIndex() {
+        this.start = this.end;
+        this.end = this.limit + this.start;
+    }
+    resetIndex() {
+        this.start = 0;
+        this.end = this.limit + this.start;
+    }
+    setInitialRowsForTable() {
+        this.resetIndex();
+        this.updateIndex();
     }
     applySortingOnFilteredData() {
         if (this.showSortComponent) {
@@ -4997,7 +4879,7 @@ class AnnaColumnCheckboxFilterComponent {
     updateSortMap() {
         this.annaSortService.columnSortState = new Map();
         this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
-        this.applySorting(this.annaFilterService.selectedRadio);
+        // this.applySorting(this.annaFilterService.selectedRadio);
     }
     checkIfSortingIsApplied() {
         for (let [key, value] of this.annaSortService.columnSortState.entries()) {
@@ -5009,17 +4891,783 @@ class AnnaColumnCheckboxFilterComponent {
             }
         }
     }
-    emitData() {
-        if (this.isFilterChanged && this.isSortChanged) {
+    applySorting(key) {
+        if (this.tempSortOrder == "ASC") {
+            this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true, this.tableData, key));
+        }
+        else if (this.tempSortOrder == "DESC") {
+            this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false, this.tableData, key));
+        }
+        else if (this.tempSortOrder == "DEFAULT") {
+            this.tableData = cloneDeep(this.annaSortService.noSortingAppliedData);
+        }
+    }
+    emitData() {
+        if (this.isFilterChanged && this.isSortChanged) {
+            this.filterAppliedToTable.emit(this.tableData);
+        }
+        else if (this.isFilterChanged) {
+            this.filterAppliedToTable.emit(this.tableData);
+        }
+        else if (this.isSortChanged) {
+            this.sortingAppliedToTable.emit(this.tempSortOrder);
+        }
+    }
+    cancelInDateFilter() {
+        this.closeTooltip.emit();
+    }
+    calendarDateChanged(event) {
+        this.calendarSelection = event;
+        this.disableCalendarApplyButton();
+    }
+    disableCalendarApplyButton() {
+        if (this.showFilterComponent && this.showSortComponent) {
+            let isFilterChanged = this.checkIfDateTooltipIsFiltered();
+            let isSortChanged = this.checkIfSortingChanged();
+            this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate) || (!isSortChanged && !isFilterChanged);
+        }
+        else if (this.showFilterComponent) {
+            this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate) || !this.checkIfDateTooltipIsFiltered();
+        }
+        else if (this.showSortComponent) {
+            this.disableCalendarApplyBtn = !this.checkIfSortingChanged();
+        }
+    }
+    checkIfSortingChanged() {
+        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
+        this.isSortChanged = this.tempSortOrder != null && this.tempSortOrder != currentColumnSortFilter;
+        return this.isSortChanged;
+    }
+    checkIfDateTooltipIsFiltered() {
+        let currentSelectedDate = cloneDeep(this.calendarSelection);
+        let previousSelectedDate = { fromDate: null, toDate: null };
+        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedDate = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+            if (!this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+                this.setInitialValueMapForDateFilter();
+            }
+        }
+        else if (this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        else {
+            this.setInitialValueMapForDateFilter();
+            previousSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        if (currentSelectedDate.fromDate && currentSelectedDate.toDate) {
+            let fromDate = { year: currentSelectedDate.fromDate.year, month: currentSelectedDate.fromDate.month, day: currentSelectedDate.fromDate.day };
+            let toDate = { year: currentSelectedDate.toDate.year, month: currentSelectedDate.toDate.month, day: currentSelectedDate.toDate.day };
+            if (isEqual(this.calendarMinEnabledDate, fromDate) && isEqual(this.calendarMaxEnabledDate, toDate) && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+                currentSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+            else {
+                currentSelectedDate.fromDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+                currentSelectedDate.toDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
+            }
+            this.isFilterChanged = !isEqual(previousSelectedDate, currentSelectedDate);
+        }
+        return this.isFilterChanged;
+    }
+    setInitialValueMapForDateFilter() {
+        let minMaxDate;
+        if (this.annaFilterService.selectedRadio == "period") {
+            let minStartDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "startDate");
+            let maxEndDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "endDate");
+            minMaxDate = [minStartDate[0], maxEndDate[1]];
+        }
+        else {
+            minMaxDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, this.annaFilterService.selectedRadio);
+        }
+        let selectedDate = { fromDate: minMaxDate[0], toDate: minMaxDate[1] };
+        this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, selectedDate);
+    }
+    applyDateFilterOnData() {
+        if (this.showFilterComponent && this.isFilterChanged) {
+            let currentSelectedDate = this.calendarSelection;
+            let fromDate = { year: currentSelectedDate.fromDate.year, month: currentSelectedDate.fromDate.month, day: currentSelectedDate.fromDate.day };
+            let toDate = { year: currentSelectedDate.toDate.year, month: currentSelectedDate.toDate.month, day: currentSelectedDate.toDate.day };
+            if (isEqual(this.calendarMinEnabledDate, fromDate) && isEqual(this.calendarMaxEnabledDate, toDate) && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+                currentSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+            else {
+                currentSelectedDate.fromDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+                currentSelectedDate.toDate = dayjs(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
+            }
+            this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData, currentSelectedDate);
+            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedDate);
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+            this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+        }
+    }
+    clearColumnFilter() {
+        this.annaFilterService.clearColumnFilter();
+        this.closeTooltip.emit();
+        this.tableData = cloneDeep(this.annaFilterService.filterData(this.clonedTableData, ""));
+        this.annaSortService.noSortingAppliedData = this.tableData;
+        this.checkIfSortingIsApplied();
+        this.filterAppliedToTable.emit(this.tableData);
+        this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    }
+    storeSortTypeInTempVariable(event) {
+        this.tempSortOrder = event;
+        this.disableCalendarApplyButton();
+    }
+}
+AnnaColumnDateRangeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnDateRangeFilterComponent, deps: [{ token: AnnaDateTimeFormatService }, { token: AnnaSortService }, { token: AnnaFilterService }], target: i0.ɵɵFactoryTarget.Component });
+AnnaColumnDateRangeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaColumnDateRangeFilterComponent, selector: "anna-core-anna-column-date-range-filter", inputs: { tableData: "tableData", clonedTableData: "clonedTableData", limit: "limit", filterTabObjects: "filterTabObjects" }, outputs: { filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", closeTooltip: "closeTooltip" }, ngImport: i0, template: "<div class=\"radio-container\" *ngIf=\"filterTabObjects?.length > 1\">\r\n    <div *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n    [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <div class=\"datepicker-container\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n            Clear filter\r\n        </button>\r\n        <anna-core-calendar-filter-lib [minDate]=\"calendarMinEnabledDate\" [maxDate]=\"calendarMaxEnabledDate\"\r\n            [selectedFromDate]=\"selectedMinDate\" [selectedToDate]=\"selectedMaxDate\"\r\n            (selectedDate)=\"calendarDateChanged($event)\" [label]=\"selectedLabel\">\r\n        </anna-core-calendar-filter-lib>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n    <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n</div>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AnnaCalendarFilterComponent, selector: "anna-core-calendar-filter-lib", inputs: ["maxDate", "label", "minDate", "selectedFromDate", "selectedToDate"], outputs: ["selectedDate", "apply", "cancel"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnDateRangeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'anna-core-anna-column-date-range-filter', template: "<div class=\"radio-container\" *ngIf=\"filterTabObjects?.length > 1\">\r\n    <div *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n    [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <div class=\"datepicker-container\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">\r\n            Clear filter\r\n        </button>\r\n        <anna-core-calendar-filter-lib [minDate]=\"calendarMinEnabledDate\" [maxDate]=\"calendarMaxEnabledDate\"\r\n            [selectedFromDate]=\"selectedMinDate\" [selectedToDate]=\"selectedMaxDate\"\r\n            (selectedDate)=\"calendarDateChanged($event)\" [label]=\"selectedLabel\">\r\n        </anna-core-calendar-filter-lib>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"cancelInDateFilter()\">Cancel</button>\r\n    <button class=\"button\" (click)=\"applyDateFilter()\" [ngClass]=\"{ disabled: disableCalendarApplyBtn }\"\r\n        [disabled]=\"disableCalendarApplyBtn\">Apply</button>\r\n</div>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: AnnaDateTimeFormatService }, { type: AnnaSortService }, { type: AnnaFilterService }]; }, propDecorators: { tableData: [{
+                type: Input
+            }], clonedTableData: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], filterTabObjects: [{
+                type: Input
+            }], filterAppliedToTable: [{
+                type: Output
+            }], sortingAppliedToTable: [{
+                type: Output
+            }], closeTooltip: [{
+                type: Output
+            }] } });
+
+class AnnaColumnCheckboxFilterComponent {
+    constructor(annaSortService, annaFilterService) {
+        this.annaSortService = annaSortService;
+        this.annaFilterService = annaFilterService;
+        this.limit = 30;
+        this.filterAppliedToTable = new EventEmitter();
+        this.sortingAppliedToTable = new EventEmitter();
+        this.closeTooltip = new EventEmitter();
+        this.tempSortOrder = null;
+        this.showSortComponent = false;
+        this.showFilterComponent = false;
+        this.start = 0;
+        this.end = this.limit + this.start;
+        this.disableColumnClearAllBtn = true;
+    }
+    ngOnInit() {
+        this.populateTooltipDataBasedOnSelectedRadio(this.filterTabObjects[0]);
+    }
+    populateTooltipDataBasedOnSelectedRadio(activeTab) {
+        let header = activeTab.key;
+        this.selectedLabel = activeTab.label;
+        this.searchItem = null;
+        this.showSortComponent = activeTab.isSortRequired;
+        this.showFilterComponent = activeTab.isFilterRequired;
+        this.tempSortOrder = null;
+        this.isFilterChanged = false;
+        this.isSortChanged = false;
+        this.annaFilterService.selectedRadio = header;
+        this.disableActiveFilterClearButton();
+        this.createFilterTooltipData(header);
+    }
+    getCheckboxData(header) {
+        let tooltipOptions = this.createListForCheckboxFilter(header);
+        let selectedItems = sortBy(tooltipOptions.filter(item => item.isSelected), "label");
+        let unselectedItems = sortBy(tooltipOptions.filter(item => !item.isSelected), "label");
+        this.clonedTooltipOptions = [...selectedItems, ...unselectedItems];
+        this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
+        let margin = 5;
+        let dataLength = this.tooltipOptions.length;
+        this.heightOfCheckboxTooltipFilter = dataLength > 6 ? 200 : ((26.03 * dataLength) + (margin * dataLength) + margin);
+        this.disableSelectAll = unselectedItems.length == 0;
+        this.disableClearAll = selectedItems.length == 0;
+        this.selectedCheckboxOptionsCount = selectedItems.length;
+    }
+    createListForCheckboxFilter(header) {
+        let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+        let uniqOptionData = uniq(optionData.map(item => item[header]));
+        let tooltipOptions = uniqOptionData.map((item, index) => new TooltipModel(item, index + 1));
+        this.selectUnselectListCheckbox(tooltipOptions, header);
+        let index = tooltipOptions.findIndex(item => item.value == null);
+        if (index != -1) {
+            tooltipOptions[index].label = "(Blank)";
+        }
+        return tooltipOptions;
+    }
+    selectUnselectListCheckbox(tooltipOptions, header) {
+        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+            let selectedValueSet = new Set(this.annaFilterService.tooltipSelectedMap.get(header));
+            tooltipOptions.forEach(item => item.isSelected = selectedValueSet.has(item.value) ? true : false);
+        }
+        else {
+            tooltipOptions.forEach(item => item.isSelected = true);
+        }
+    }
+    unCheckAllCheckbox() {
+        this.tooltipOptions.forEach(item => {
+            item.isSelected = false;
+            let index = this.clonedTooltipOptions.findIndex(opt => opt.id == item.id);
+            this.clonedTooltipOptions[index].isSelected = false;
+        });
+        this.selectedCheckboxOptionsCount = 0;
+        this.disableSelectAll = false;
+        this.disableClearAll = true;
+        this.disableCheckboxApply = true;
+    }
+    selectAllCheckbox() {
+        this.tooltipOptions.forEach(item => {
+            item.isSelected = true;
+            let index = this.clonedTooltipOptions.findIndex(opt => opt.id == item.id);
+            this.clonedTooltipOptions[index].isSelected = true;
+        });
+        this.selectedCheckboxOptionsCount = this.tooltipOptions.length;
+        this.disableSelectAll = true;
+        this.disableClearAll = false;
+        this.disableCheckboxFilterApplyButton();
+    }
+    searchForTheItem(str) {
+        if (str) {
+            this.tooltipOptions = cloneDeep(this.clonedTooltipOptions.filter(item => item.label.toString().toLowerCase().includes(str.toLowerCase())));
+            this.tooltipOptions.forEach(element => {
+                element.label = this.boldString(element.label, str);
+            });
+            if (this.tooltipOptions.length > 0) {
+                let unselectedItems = this.tooltipOptions.filter((item) => !item.isSelected);
+                let selectedItems = this.tooltipOptions.filter((item) => item.isSelected);
+                this.disableSelectAll = unselectedItems.length == 0;
+                this.disableClearAll = selectedItems.length == 0;
+                this.selectedCheckboxOptionsCount = selectedItems.length;
+                this.disableCheckboxApply = (selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered());
+            }
+            else {
+                this.selectedCheckboxOptionsCount = 0;
+                this.disableCheckboxApply = true;
+                this.disableClearAll = true;
+                this.disableSelectAll = true;
+            }
+        }
+        else {
+            this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
+            let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
+            let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
+            this.selectedCheckboxOptionsCount = selectedItems.length;
+            this.disableSelectAll = unselectedItems.length == 0;
+            this.disableClearAll = selectedItems.length == 0;
+            this.disableCheckboxFilterApplyButton();
+        }
+    }
+    boldString(str, find) {
+        let indexes = this.getIndicesOf(find, str, false);
+        indexes.forEach((item, index) => {
+            let startIndex = item + (index * 7); //Multiplying by 7 as there are 7char: <b></b>
+            let endIndex = startIndex + find.length;
+            let strToBeReplaced = str.substring(startIndex, endIndex);
+            str = str.replace(strToBeReplaced, "<b>" + strToBeReplaced + "</b>");
+        });
+        return str;
+    }
+    getIndicesOf(searchStr, str, caseSensitive) {
+        var searchStrLen = searchStr.length;
+        if (searchStrLen == 0) {
+            return [];
+        }
+        var startIndex = 0, index, indices = [];
+        if (!caseSensitive) {
+            str = str.toLowerCase();
+            searchStr = searchStr.toLowerCase();
+        }
+        while ((index = str.indexOf(searchStr, startIndex)) > -1) {
+            indices.push(index);
+            startIndex = index + searchStrLen;
+        }
+        return indices;
+    }
+    removeBoldElementFromString(originalString) {
+        let firstRegExp = new RegExp('<b>', 'g');
+        let secondRegExp = new RegExp('</b>', 'g');
+        let ret = originalString.replace(firstRegExp, '');
+        return ret.replace(secondRegExp, '');
+    }
+    disableCheckboxFilterApplyButton() {
+        let selectedItems = this.showFilterComponent ? this.tooltipOptions.filter(item => item.isSelected) : [];
+        if (this.showFilterComponent && this.showSortComponent) {
+            let isFilterChanged = this.checkIfCheckboxTooltipIsFiltered();
+            let isSortChanged = this.checkIfSortingChanged();
+            this.disableCheckboxApply = selectedItems.length == 0 || (!isSortChanged && !isFilterChanged);
+        }
+        else if (this.showFilterComponent) {
+            this.disableCheckboxApply = selectedItems.length == 0 || !this.checkIfCheckboxTooltipIsFiltered();
+        }
+        else if (this.showSortComponent) {
+            this.disableCheckboxApply = !this.checkIfSortingChanged();
+        }
+    }
+    checkIfSortingChanged() {
+        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
+        this.isSortChanged = this.tempSortOrder != null && this.tempSortOrder != currentColumnSortFilter;
+        return this.isSortChanged;
+    }
+    checkIfCheckboxTooltipIsFiltered() {
+        let currentSelectedValue = [];
+        let previousSelectedValue = [];
+        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedValue = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+            if (!this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+                let initialValue = sortBy(uniq(this.clonedTableData.map((item) => item[this.annaFilterService.selectedRadio])));
+                this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, initialValue);
+            }
+        }
+        else if (this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        else {
+            previousSelectedValue = sortBy(uniq(this.clonedTableData.map(item => item[this.annaFilterService.selectedRadio])));
+            this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, previousSelectedValue);
+        }
+        if (this.tooltipOptions) {
+            currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.value));
+            if (!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+                currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+        }
+        let blankIndex = currentSelectedValue.findIndex((item) => item == null);
+        if (blankIndex != -1) {
+            currentSelectedValue = sortBy(currentSelectedValue);
+        }
+        this.isFilterChanged = !isEqual(currentSelectedValue, previousSelectedValue);
+        return this.isFilterChanged;
+    }
+    getColumnSortStateForSelectedRadio() {
+        let currentColumnSortFilter = this.annaSortService.columnSortState && this.annaSortService.columnSortState.has(this.annaFilterService.selectedRadio) &&
+            this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio);
+        currentColumnSortFilter = currentColumnSortFilter ? currentColumnSortFilter : SortTypeEnum.DEFAULT;
+        return currentColumnSortFilter;
+    }
+    applyFilters() {
+        this.applyListFilters();
+        this.applySortingOnFilteredData();
+        this.setInitialRowsForTable();
+        this.emitData();
+    }
+    applyListFilters() {
+        if (this.showFilterComponent && this.isFilterChanged) {
+            let currentSelectedValue = [];
+            if (this.tooltipOptions) {
+                currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.value));
+                if (!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+                    currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+                }
+            }
+            let blankIndex = currentSelectedValue.findIndex((item) => item == null);
+            if (blankIndex != -1) {
+                currentSelectedValue = sortBy(currentSelectedValue);
+            }
+            this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData, currentSelectedValue);
+            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedValue);
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+            this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+        }
+    }
+    applySortingOnFilteredData() {
+        if (this.showSortComponent) {
+            if (this.isSortChanged) {
+                this.updateSortMap();
+            }
+            else if (this.isFilterChanged) {
+                this.checkIfSortingIsApplied();
+            }
+        }
+        else if (this.isFilterChanged) {
+            this.checkIfSortingIsApplied();
+        }
+    }
+    updateSortMap() {
+        this.annaSortService.columnSortState = new Map();
+        this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+        // this.applySorting(this.annaFilterService.selectedRadio);
+    }
+    checkIfSortingIsApplied() {
+        for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+            if (value == "ASC") {
+                this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true, this.tableData, key));
+            }
+            else if (value == "DESC") {
+                this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false, this.tableData, key));
+            }
+        }
+    }
+    emitData() {
+        if (this.isFilterChanged && this.isSortChanged) {
+            this.filterAppliedToTable.emit(this.tableData);
+        }
+        else if (this.isFilterChanged) {
+            this.filterAppliedToTable.emit(this.tableData);
+        }
+        else if (this.isSortChanged) {
+            this.sortingAppliedToTable.emit(this.tempSortOrder);
+        }
+    }
+    updateIndex() {
+        this.start = this.end;
+        this.end = this.limit + this.start;
+    }
+    setInitialRowsForTable() {
+        this.resetIndex();
+        this.updateIndex();
+    }
+    selectUnselectCheckbox(data) {
+        data.isSelected = !data.isSelected;
+        let index = this.clonedTooltipOptions.findIndex(item => item.id == data.id);
+        this.clonedTooltipOptions[index].isSelected = data.isSelected;
+        let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
+        let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
+        this.disableClearAll = selectedItems.length == 0;
+        this.disableSelectAll = unselectedItems.length == 0;
+        this.selectedCheckboxOptionsCount = selectedItems.length;
+        this.disableCheckboxFilterApplyButton();
+    }
+    closeCheckboxFilter() {
+        if (this.toolTipdata) {
+            this.revert();
+        }
+        this.closeTooltip.emit();
+    }
+    revert() {
+        this.tempTooltipData = cloneDeep(this.toolTipdata);
+        this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
+        this.toolTipdata = null;
+    }
+    clearSearchedItem() {
+        this.searchItem = "";
+        this.searchForTheItem("");
+    }
+    resetIndex() {
+        this.start = 0;
+        this.end = this.limit + this.start;
+    }
+    storeSortTypeInTempVariable(event) {
+        this.tempSortOrder = event;
+        this.disableCheckboxFilterApplyButton();
+    }
+    disableActiveFilterClearButton() {
+        let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
+        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
+        let isSortPresent = (this.annaSortService.columnSortState && this.annaSortService.columnSortState.size > 0 && currentColumnSortFilter != SortTypeEnum.DEFAULT);
+        this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
+    }
+    createFilterTooltipData(header) {
+        if (this.showFilterComponent) {
+            this.disableCheckboxApply = true;
+            this.getCheckboxData(header);
+        }
+        else if (this.showSortComponent) {
+            this.disableCheckboxApply = true;
+        }
+    }
+}
+AnnaColumnCheckboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnCheckboxFilterComponent, deps: [{ token: AnnaSortService }, { token: AnnaFilterService }], target: i0.ɵɵFactoryTarget.Component });
+AnnaColumnCheckboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaColumnCheckboxFilterComponent, selector: "anna-core-anna-column-checkbox-filter", inputs: { tableData: "tableData", clonedTableData: "clonedTableData", limit: "limit", filterTabObjects: "filterTabObjects" }, outputs: { filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", closeTooltip: "closeTooltip" }, ngImport: i0, template: "<div class=\"radio-container\" *ngIf=\"filterTabObjects.length > 1\">\r\n    <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n    <anna-core-sort-lib [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n        [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n</div>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <p class=\"d-flex justify-content-between\">\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n    </p>\r\n    <p class=\"search-box\">\r\n        <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n        <input type=\"text\" placeholder=\"Search\" class=\"search-input\"\r\n            style=\"margin-left: 2px; border: none; padding: 0px\" [(ngModel)]=\"searchItem\"\r\n            (ngModelChange)=\"searchForTheItem($event)\" />\r\n        <i class=\"mdi mdi-close search-bar-close\"\r\n            [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n    </p>\r\n    <div style=\"position:relative\">\r\n        <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\"\r\n            class=\"dropdown-data-container\">\r\n            <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\"\r\n                (click)=\"selectUnselectCheckbox(option)\">\r\n                <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!option.isSelected\" role=\"button\"\r\n                    class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n            </p>\r\n        </cdk-virtual-scroll-viewport>\r\n        <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n    <button class=\"button\" [ngClass]=\"{ disabled: disableCheckboxApply }\" (click)=\"applyFilters()\"\r\n        [disabled]=\"disableCheckboxApply\">\r\n        Apply\r\n        <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length &&\r\n            tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' +\r\n            selectedCheckboxOptionsCount + ')' }}</span>\r\n    </button>\r\n</div>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnCheckboxFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'anna-core-anna-column-checkbox-filter', template: "<div class=\"radio-container\" *ngIf=\"filterTabObjects.length > 1\">\r\n    <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n    <anna-core-sort-lib [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n        [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n</div>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <p class=\"d-flex justify-content-between\">\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n    </p>\r\n    <p class=\"search-box\">\r\n        <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n        <input type=\"text\" placeholder=\"Search\" class=\"search-input\"\r\n            style=\"margin-left: 2px; border: none; padding: 0px\" [(ngModel)]=\"searchItem\"\r\n            (ngModelChange)=\"searchForTheItem($event)\" />\r\n        <i class=\"mdi mdi-close search-bar-close\"\r\n            [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n    </p>\r\n    <div style=\"position:relative\">\r\n        <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\"\r\n            class=\"dropdown-data-container\">\r\n            <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\"\r\n                (click)=\"selectUnselectCheckbox(option)\">\r\n                <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!option.isSelected\" role=\"button\"\r\n                    class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n            </p>\r\n        </cdk-virtual-scroll-viewport>\r\n        <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n    <button class=\"button\" [ngClass]=\"{ disabled: disableCheckboxApply }\" (click)=\"applyFilters()\"\r\n        [disabled]=\"disableCheckboxApply\">\r\n        Apply\r\n        <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length &&\r\n            tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' +\r\n            selectedCheckboxOptionsCount + ')' }}</span>\r\n    </button>\r\n</div>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: AnnaSortService }, { type: AnnaFilterService }]; }, propDecorators: { tableData: [{
+                type: Input
+            }], clonedTableData: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], filterTabObjects: [{
+                type: Input
+            }], filterAppliedToTable: [{
+                type: Output
+            }], sortingAppliedToTable: [{
+                type: Output
+            }], closeTooltip: [{
+                type: Output
+            }] } });
+
+class AnnaColumnTimeFilterComponent {
+    constructor(annaSortService, annaDateTimeFormatService, annaFilterService) {
+        this.annaSortService = annaSortService;
+        this.annaDateTimeFormatService = annaDateTimeFormatService;
+        this.annaFilterService = annaFilterService;
+        this.limit = 30;
+        this.filterAppliedToTable = new EventEmitter();
+        this.sortingAppliedToTable = new EventEmitter();
+        this.closeTooltip = new EventEmitter();
+        this.tempSortOrder = null;
+        this.showSortComponent = false;
+        this.showFilterComponent = false;
+        this.start = 0;
+        this.end = this.limit + this.start;
+        this.disableColumnClearAllBtn = true;
+        this.tableColumns = [];
+        this.totalRowColumns = null;
+    }
+    ngOnInit() {
+        this.populateTooltipDataBasedOnSelectedRadio(this.filterTabObjects[0]);
+    }
+    populateTooltipDataBasedOnSelectedRadio(activeTab) {
+        let header = activeTab.key;
+        this.selectedLabel = activeTab.label;
+        this.searchItem = null;
+        this.showSortComponent = activeTab.isSortRequired;
+        this.showFilterComponent = activeTab.isFilterRequired;
+        this.tempSortOrder = null;
+        this.isFilterChanged = false;
+        this.isSortChanged = false;
+        this.annaFilterService.selectedRadio = header;
+        this.disableActiveFilterClearButton();
+        this.createFilterTooltipData(header);
+    }
+    disableActiveFilterClearButton() {
+        let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
+        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
+        let isSortPresent = (this.annaSortService.columnSortState && this.annaSortService.columnSortState.size > 0 && currentColumnSortFilter != SortTypeEnum.DEFAULT);
+        this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
+    }
+    getColumnSortStateForSelectedRadio() {
+        let currentColumnSortFilter = this.annaSortService.columnSortState && this.annaSortService.columnSortState.has(this.annaFilterService.selectedRadio) &&
+            this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio);
+        currentColumnSortFilter = currentColumnSortFilter ? currentColumnSortFilter : SortTypeEnum.DEFAULT;
+        return currentColumnSortFilter;
+    }
+    createFilterTooltipData(header) {
+        if (this.showFilterComponent) {
+            this.disableCheckboxApply = true;
+            this.getTimeFilterData(header);
+        }
+        else if (this.showSortComponent) {
+            this.disableCheckboxApply = true;
+        }
+    }
+    getTimeFilterData(header) {
+        this.startTimeHourErr = this.startTimeMinErr = this.endTimeHourErr = this.endTimeMinErr = false;
+        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+            this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
+            this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
+        }
+        else {
+            this.setInitialValueMapForTimeFilter(header);
+            this.selectedFromTime = this.annaFilterService.initialValueMap.get(header).fromTime;
+            this.selectedToTime = this.annaFilterService.initialValueMap.get(header).toTime;
+        }
+        if (this.selectedFromTime != undefined || this.selectedToTime != undefined) {
+            this.selectedFromTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedFromTime, true);
+            this.selectedToTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedToTime, true);
+            this.clonedSelectedFromTime = cloneDeep(this.selectedFromTime);
+            this.clonedSelectedToTime = cloneDeep(this.selectedToTime);
+        }
+        else {
+            this.selectedFromTime = ["-", "-", "-"];
+            this.selectedToTime = ["-", "-", "-"];
+        }
+        // if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP" || this.gtGeneralConfig.component === "ACTIVITYLOG") {
+        this.setTimeFilterDataForComponentsOtherThanRatingsPage(header);
+        // }
+        // else if (this.gtGeneralConfig.component === "RATING") {
+        //   this.setTimeFilterDataForRatingPageComponent(header);
+        // }
+    }
+    setInitialValueMapForTimeFilter(key) {
+        let data = this.clonedTableData.filter((n) => !["", "-", null, "0", "<multi>"].includes(n[key]));
+        let timeArr = map(data, key);
+        timeArr.sort((a, b) => {
+            return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+        });
+        // let obj: any = {
+        //   fromTime: timeArr[0],
+        //   toTime: timeArr[timeArr.length - 1],
+        //   includeMulti: false,
+        //   includeZero: false,
+        //   includeTimeRange: false
+        // };
+        // if (
+        //   this.gtGeneralConfig.component === "SPOTDETAILS" ||
+        //   this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP" ||
+        //   this.gtGeneralConfig.component === "ACTIVITYLOG"
+        // ) {
+        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 fromTime = timeArr[0].split(":");
+        let toTime = timeArr[timeArr.length - 1].split(":");
+        let obj = {
+            fromTime: fromTime[0] + ":" + fromTime[1] + ":00",
+            toTime: toTime[0] + ":" + toTime[1] + ":00",
+            includeMulti: includeMulti,
+            includeZero: includeZero,
+            includeTimeRange: includeTimeRange,
+        };
+        this.annaFilterService.initialValueMap.set(key, obj);
+        // }
+        // else if (this.gtGeneralConfig.component === "RATING") {
+        //     this.setInitialValueMapForRatingPageTimeFilter(key);
+        // } 
+        // else {
+        //   this.annaFilterService.initialValueMap.set(key, obj);
+        // }
+    }
+    //Need to change this method
+    setTimeFilterDataForComponentsOtherThanRatingsPage(header) {
+        this.showMultiTimeCheckbox = false;
+        this.showZeroTimeCheckbox = false;
+        this.showEnterTimeCheckbox = false;
+        this.multiTimeCheckboxChecked = false;
+        this.zeroTimeCheckboxChecked = false;
+        this.enterTimeCheckboxChecked = false;
+        let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+        let selectedObj;
+        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+            selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+        }
+        else {
+            selectedObj = this.annaFilterService.initialValueMap.get(header);
+        }
+        if (optionsData.findIndex(obj => obj[header] == "0") != -1) {
+            this.showZeroTimeCheckbox = true;
+            this.zeroTimeCheckboxChecked = selectedObj.includeZeroTime;
+        }
+        if (optionsData.findIndex(obj => obj[header] == "<multi>") != -1) {
+            this.showMultiTimeCheckbox = true;
+            this.multiTimeCheckboxChecked = selectedObj.includeMulti;
+        }
+        if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+            this.showEnterTimeCheckbox = true;
+        }
+        if (optionsData.findIndex(obj => obj[header] != "<multi>" && obj[header] != "0") != -1) {
+            this.enterTimeCheckboxChecked = selectedObj.includeTimeRange;
+        }
+    }
+    setTimeFilterDataForRatingPageComponent(header) {
+        this.showMultiTimeCheckbox = false;
+        this.showZeroTimeCheckbox = false;
+        this.showEnterTimeCheckbox = false;
+        this.multiTimeCheckboxChecked = false;
+        this.zeroTimeCheckboxChecked = false;
+        this.enterTimeCheckboxChecked = false;
+        let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+        let selectedObj;
+        if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+            selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+        }
+        else {
+            selectedObj = this.annaFilterService.initialValueMap.get(header);
+        }
+        if (optionsData.findIndex(obj => obj[header][0] == "0") != -1) {
+            this.showZeroTimeCheckbox = true;
+            this.zeroTimeCheckboxChecked = selectedObj.includeZeroTime;
+        }
+        if (optionsData.findIndex(obj => obj[header][0] == "<multi>") != -1) {
+            this.showMultiTimeCheckbox = true;
+            this.multiTimeCheckboxChecked = selectedObj.includeMulti;
+        }
+        if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+            this.showEnterTimeCheckbox = true;
+        }
+        if (optionsData.findIndex(obj => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1) {
+            this.enterTimeCheckboxChecked = selectedObj.includeTimeRange;
+        }
+    }
+    selectOrUnselectMultiTimeCheckbox() {
+        this.multiTimeCheckboxChecked = !this.multiTimeCheckboxChecked;
+        this.disableTimeFilterApplyButton();
+    }
+    selectOrUnselectZeroTimeCheckbox() {
+        this.zeroTimeCheckboxChecked = !this.zeroTimeCheckboxChecked;
+        this.disableTimeFilterApplyButton();
+    }
+    selectOrUnselectEnterTimeCheckbox() {
+        this.enterTimeCheckboxChecked = !this.enterTimeCheckboxChecked;
+        this.disableTimeFilterApplyButton();
+    }
+    checkIfTimeTooltipIsFiltered() {
+        let currentSelectedTimeFilter = {
+            fromTime: null,
+            toTime: null,
+            includeMulti: false,
+            includeZero: false,
+            includeTimeRange: false,
+        };
+        let previousSelectedTimeFilter;
+        if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedTimeFilter = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        }
+        else if (this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)) {
+            previousSelectedTimeFilter = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
+        let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
+        let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
+        let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":00";
+        currentSelectedTimeFilter = {
+            fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.multiTimeCheckboxChecked,
+            includeZero: this.zeroTimeCheckboxChecked, includeTimeRange: this.enterTimeCheckboxChecked
+        };
+        this.isFilterChanged = !isEqual(previousSelectedTimeFilter, currentSelectedTimeFilter);
+        return this.isFilterChanged;
+    }
+    disableTimeFilterApplyButton() {
+        if (this.showFilterComponent && this.showSortComponent) {
+            let isFilterChanged = this.checkIfTimeTooltipIsFiltered();
+            let isSortChanged = this.checkIfSortingChanged();
+            this.disableTimeFilterApplyBtn = !this.validateTimeFilterInput() || (!isSortChanged && !isFilterChanged);
+        }
+        else if (this.showFilterComponent) {
+            this.disableTimeFilterApplyBtn = !this.validateTimeFilterInput() || !this.checkIfTimeTooltipIsFiltered();
+        }
+        else if (this.showSortComponent) {
+            this.disableTimeFilterApplyBtn = !this.checkIfSortingChanged();
+        }
+    }
+    checkIfSortingChanged() {
+        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
+        this.isSortChanged = this.tempSortOrder != null && this.tempSortOrder != currentColumnSortFilter;
+        return this.isSortChanged;
+    }
+    validateTimeFilterInput() {
+        if (this.startTimeHourErr || this.startTimeMinErr || this.endTimeHourErr || this.endTimeMinErr) {
+            return false;
+        }
+        if ((this.showMultiTimeCheckbox && !this.multiTimeCheckboxChecked) &&
+            (this.showZeroTimeCheckbox && !this.zeroTimeCheckboxChecked) &&
+            (this.showEnterTimeCheckbox && !this.enterTimeCheckboxChecked)) {
+            return false;
+        }
+        let timeFormat = "HH:mm:ss";
+        let startTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
+        let startTime24HrFormat = startTime24HrFormatArr[0] + ":" + startTime24HrFormatArr[1] + ":00";
+        let endTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
+        let endTime24HrFormat = endTime24HrFormatArr[0] + ":" + endTime24HrFormatArr[1] + ":00";
+        return !(dayjs(startTime24HrFormat, timeFormat).isAfter(dayjs(endTime24HrFormat, timeFormat)));
+    }
+    applyTimeFilters() {
+        this.applyTimeFilterOnData();
+        this.applySortingOnFilteredData();
+        this.emitData();
+        this.setInitialRowsForTable();
+        this.annaFilterService.updateStateOfAllTheKeys(this.annaSortService.columnSortState);
+        this.closeTooltip.emit();
+    }
+    emitData() {
+        if (this.isFilterChanged && this.isSortChanged) {
             this.filterAppliedToTable.emit(this.tableData);
         }
         else if (this.isFilterChanged) {
             this.filterAppliedToTable.emit(this.tableData);
         }
         else if (this.isSortChanged) {
-            this.sortingAppliedToTable.emit(this.tableData);
+            this.sortingAppliedToTable.emit(this.tempSortOrder);
         }
     }
+    updateIndex() {
+        this.start = this.end;
+        this.end = this.limit + this.start;
+    }
+    resetIndex() {
+        this.start = 0;
+        this.end = this.limit + this.start;
+    }
+    setInitialRowsForTable() {
+        this.resetIndex();
+        this.updateIndex();
+    }
     applySorting(key) {
         if (this.tempSortOrder == "ASC") {
             this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true, this.tableData, key));
@@ -5031,70 +5679,210 @@ class AnnaColumnCheckboxFilterComponent {
             this.tableData = cloneDeep(this.annaSortService.noSortingAppliedData);
         }
     }
-    updateIndex() {
-        this.start = this.end;
-        this.end = this.limit + this.start;
+    changeStartTimeHour(increment) {
+        if (increment) {
+            this.incrementHour(this.selectedFromTime);
+        }
+        else {
+            this.decrementHour(this.selectedFromTime);
+        }
+        this.startTimeHourChange(this.selectedFromTime[0].toString());
     }
-    setInitialRowsForTable() {
-        this.resetIndex();
-        this.updateIndex();
+    changeEndTimeHour(increment) {
+        if (increment) {
+            this.incrementHour(this.selectedToTime);
+        }
+        else {
+            this.decrementHour(this.selectedToTime);
+        }
+        this.endTimeHourChange(this.selectedToTime[0].toString());
     }
-    selectUnselectCheckbox(data) {
-        data.isSelected = !data.isSelected;
-        let index = this.clonedTooltipOptions.findIndex(item => item.id == data.id);
-        this.clonedTooltipOptions[index].isSelected = data.isSelected;
-        let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
-        let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
-        this.disableClearAll = selectedItems.length == 0;
-        this.disableSelectAll = unselectedItems.length == 0;
-        this.selectedCheckboxOptionsCount = selectedItems.length;
-        this.disableCheckboxFilterApplyButton();
+    changeEndTimeMinute(increment) {
+        if (increment) {
+            this.incrementMinute(this.selectedToTime);
+        }
+        else {
+            this.decrementMinute(this.selectedToTime);
+        }
+        this.endTimeMinChange(this.selectedToTime[1].toString());
     }
-    closeCheckboxFilter() {
-        if (this.toolTipdata) {
-            this.revert();
+    changeStartTimeMinute(increment) {
+        if (increment) {
+            this.incrementMinute(this.selectedFromTime);
         }
-        this.closeTooltip.emit();
+        else {
+            this.decrementMinute(this.selectedFromTime);
+        }
+        this.startTimeMinChange(this.selectedFromTime[1].toString());
     }
-    revert() {
-        this.tempTooltipData = cloneDeep(this.toolTipdata);
-        this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
-        this.toolTipdata = null;
+    startTimeHourChange(val) {
+        if (val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12) {
+            this.startTimeHourErr = true;
+        }
+        else {
+            this.startTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
     }
-    clearSearchedItem() {
-        this.searchItem = "";
-        this.searchForTheItem("");
+    startTimeMinChange(val) {
+        if (val.length != 2 || 0 > parseInt(val) || parseInt(val) > 59) {
+            this.startTimeMinErr = true;
+        }
+        else {
+            this.startTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
     }
-    resetIndex() {
-        this.start = 0;
-        this.end = this.limit + this.start;
+    endTimeHourChange(val) {
+        if (val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12) {
+            this.endTimeHourErr = true;
+        }
+        else {
+            this.endTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
     }
-    storeSortTypeInTempVariable(event) {
-        this.tempSortOrder = event;
-        this.disableCheckboxFilterApplyButton();
+    endTimeMinChange(val) {
+        if (val.length != 2 || 0 > parseInt(val) || parseInt(val) > 59) {
+            this.endTimeMinErr = true;
+        }
+        else {
+            this.endTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
     }
-    disableActiveFilterClearButton() {
-        let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
-        let currentColumnSortFilter = this.getColumnSortStateForSelectedRadio();
-        let isSortPresent = (this.annaSortService.columnSortState && this.annaSortService.columnSortState.size > 0 && currentColumnSortFilter != SortTypeEnum.DEFAULT);
-        this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
+    incrementHour(arr) {
+        if (arr[0] == "") {
+            arr[0] = 1;
+        }
+        else if (parseInt(arr[0]) < 12) {
+            arr[0] = parseInt(arr[0]) + 1;
+        }
+        else {
+            arr[0] = 1;
+        }
     }
-    createFilterTooltipData(header) {
-        if (this.showFilterComponent) {
-            this.disableCheckboxApply = true;
-            this.getCheckboxData(header);
+    decrementHour(arr) {
+        if (arr[0] == "") {
+            arr[0] = 12;
         }
-        else if (this.showSortComponent) {
-            this.disableCheckboxApply = true;
+        else if (parseInt(arr[0]) > 1) {
+            arr[0] = parseInt(arr[0]) - 1;
+        }
+        else {
+            arr[0] = 12;
+        }
+    }
+    incrementMinute(arr) {
+        // increment to nearest proper interval(15,30,45)
+        let min = parseInt(arr[1]);
+        if (min <= 14) {
+            arr[1] = "15";
+        }
+        else if (min >= 15 && min <= 29) {
+            arr[1] = "30";
+        }
+        else if (min >= 30 && min <= 44) {
+            arr[1] = "45";
+        }
+        else if (min >= 45) {
+            arr[1] = "00";
+        }
+    }
+    decrementMinute(arr) {
+        let min = parseInt(arr[1]);
+        if (min > 0 && min <= 15) {
+            arr[1] = "00";
+        }
+        else if (min >= 16 && min <= 30) {
+            arr[1] = "15";
+        }
+        else if (min >= 31 && min <= 45) {
+            arr[1] = "30";
+        }
+        else if (min > 45 || min == 0) {
+            arr[1] = "45";
+        }
+    }
+    updateSortMap() {
+        this.annaSortService.columnSortState = new Map();
+        this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+        // this.applySorting(this.annaFilterService.selectedRadio);
+    }
+    checkIfSortingIsApplied() {
+        for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+            if (value == "ASC") {
+                this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true, this.tableData, key));
+            }
+            else if (value == "DESC") {
+                this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false, this.tableData, key));
+            }
+        }
+    }
+    applySortingOnFilteredData() {
+        if (this.showSortComponent) {
+            if (this.isSortChanged) {
+                this.updateSortMap();
+            }
+            else if (this.isFilterChanged) {
+                this.checkIfSortingIsApplied();
+            }
+        }
+        else if (this.isFilterChanged) {
+            this.checkIfSortingIsApplied();
+        }
+    }
+    applyTimeFilterOnData() {
+        if (this.showFilterComponent && this.isFilterChanged) {
+            let currentSelectedTimeFilter = {
+                fromTime: null,
+                toTime: null,
+                includeMulti: false,
+                includeZero: false,
+                includeTimeRange: false,
+            };
+            let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2], true);
+            let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
+            let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2], true);
+            let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":59";
+            currentSelectedTimeFilter = {
+                fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.multiTimeCheckboxChecked,
+                includeZero: this.zeroTimeCheckboxChecked, includeTimeRange: this.enterTimeCheckboxChecked
+            };
+            let isFiltered = this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData, currentSelectedTimeFilter);
+            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedTimeFilter);
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+            if (!isFiltered) {
+                this.annaFilterService.tooltipSelectedMap.delete(this.annaFilterService.selectedRadio);
+            }
+            this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
         }
     }
+    closeTimeFilter() {
+        this.selectedFromTime = cloneDeep(this.clonedSelectedFromTime);
+        this.selectedToTime = cloneDeep(this.clonedSelectedToTime);
+        this.closeTooltip.emit();
+    }
+    clearColumnFilter() {
+        this.annaFilterService.clearColumnFilter();
+        this.closeTooltip.emit();
+        this.tableData = cloneDeep(this.annaFilterService.filterData(this.clonedTableData, ""));
+        this.annaSortService.noSortingAppliedData = this.tableData;
+        this.checkIfSortingIsApplied();
+        this.filterAppliedToTable.emit(this.tableData);
+        this.annaFilterService.updateStateOfTheCurrentFilterTab(this.annaSortService.columnSortState);
+    }
+    storeSortTypeInTempVariable(event) {
+        this.tempSortOrder = event;
+        this.disableTimeFilterApplyButton();
+    }
 }
-AnnaColumnCheckboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnCheckboxFilterComponent, deps: [{ token: AnnaSortService }, { token: AnnaFilterService }], target: i0.ɵɵFactoryTarget.Component });
-AnnaColumnCheckboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaColumnCheckboxFilterComponent, selector: "anna-core-anna-column-checkbox-filter", inputs: { tableData: "tableData", clonedTableData: "clonedTableData", limit: "limit", filterTabObjects: "filterTabObjects" }, outputs: { filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", closeTooltip: "closeTooltip" }, ngImport: i0, template: "<div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n    <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n    <anna-core-sort-lib [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n        [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n</div>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <p class=\"d-flex justify-content-between\">\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n    </p>\r\n    <p class=\"search-box\">\r\n        <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n        <input type=\"text\" placeholder=\"Search\" class=\"search-input\"\r\n            style=\"margin-left: 2px; border: none; padding: 0px\" [(ngModel)]=\"searchItem\"\r\n            (ngModelChange)=\"searchForTheItem($event)\" />\r\n        <i class=\"mdi mdi-close search-bar-close\"\r\n            [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n    </p>\r\n    <div style=\"position:relative\">\r\n        <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\"\r\n            class=\"dropdown-data-container\">\r\n            <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\"\r\n                (click)=\"selectUnselectCheckbox(option)\">\r\n                <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!option.isSelected\" role=\"button\"\r\n                    class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n            </p>\r\n        </cdk-virtual-scroll-viewport>\r\n        <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n    <button class=\"button\" [ngClass]=\"{ disabled: disableCheckboxApply }\" (click)=\"applyFilters()\"\r\n        [disabled]=\"disableCheckboxApply\">\r\n        Apply\r\n        <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length &&\r\n            tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' +\r\n            selectedCheckboxOptionsCount + ')' }}</span>\r\n    </button>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnCheckboxFilterComponent, decorators: [{
+AnnaColumnTimeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnTimeFilterComponent, deps: [{ token: AnnaSortService }, { token: AnnaDateTimeFormatService }, { token: AnnaFilterService }], target: i0.ɵɵFactoryTarget.Component });
+AnnaColumnTimeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaColumnTimeFilterComponent, selector: "anna-core-anna-column-time-filter", inputs: { tableData: "tableData", clonedTableData: "clonedTableData", limit: "limit", filterTabObjects: "filterTabObjects" }, outputs: { filterAppliedToTable: "filterAppliedToTable", sortingAppliedToTable: "sortingAppliedToTable", closeTooltip: "closeTooltip" }, ngImport: i0, template: "<div class=\"radio-container\" *ngIf=\"filterTabObjects?.length > 1\">\r\n    <div *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n    [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear\r\n        filter</button>\r\n    <!-- <div class=\"time-filter-checkboxes\"\r\n        *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\">\r\n        <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n            <span *ngIf=\"multiTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-checked\"\r\n                (click)=\"selectOrUnselectMultiTimeCheckbox()\">\r\n                check_box\r\n            </span>\r\n            <span *ngIf=\"!multiTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-unchecked\"\r\n                (click)=\"selectOrUnselectMultiTimeCheckbox()\">\r\n                check_box_outline_blank\r\n            </span>\r\n            <p style=\"margin-left: 2px\">Include Multi</p>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n            <span *ngIf=\"zeroTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-checked\"\r\n                (click)=\"selectOrUnselectZeroTimeCheckbox()\">\r\n                check_box\r\n            </span>\r\n            <span *ngIf=\"!zeroTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-unchecked\"\r\n                (click)=\"selectOrUnselectZeroTimeCheckbox()\">\r\n                check_box_outline_blank\r\n            </span>\r\n            <p style=\"margin-left: 2px\">Include Zero</p>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n            <span *ngIf=\"enterTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-checked\"\r\n                (click)=\"selectOrUnselectEnterTimeCheckbox()\">\r\n                check_box\r\n            </span>\r\n            <span *ngIf=\"!enterTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-unchecked\"\r\n                (click)=\"selectOrUnselectEnterTimeCheckbox()\">\r\n                check_box_outline_blank\r\n            </span>\r\n            <p style=\"margin-left: 2px\">Enter time range</p>\r\n        </div>\r\n    </div> -->\r\n    <div class=\"time-label-container\">\r\n        <label>From</label>\r\n    </div>\r\n    <div class=\"time-container\">\r\n        <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\"\r\n            [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n        </div>\r\n        <span class=\"dot\">:</span>\r\n        <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\"\r\n            [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n        </div>\r\n        <div>\r\n            <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                <mat-button-toggle value=\"AM\">\r\n                    <span>AM</span>\r\n                </mat-button-toggle>\r\n                <mat-button-toggle value=\"PM\">\r\n                    <span>PM</span>\r\n                </mat-button-toggle>\r\n            </mat-button-toggle-group>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"time-label-container\">\r\n        <label>To</label>\r\n    </div>\r\n    <div class=\"time-container\">\r\n        <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\"\r\n            [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n        </div>\r\n        <span class=\"dot\">:</span>\r\n        <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\"\r\n            [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n        </div>\r\n        <div>\r\n            <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                <mat-button-toggle value=\"AM\">\r\n                    <span>AM</span>\r\n                </mat-button-toggle>\r\n                <mat-button-toggle value=\"PM\">\r\n                    <span>PM</span>\r\n                </mat-button-toggle>\r\n            </mat-button-toggle-group>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n    <button class=\"button\" [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\" (click)=\"applyTimeFilters()\"\r\n        [disabled]=\"disableTimeFilterApplyBtn\">\r\n        Apply\r\n    </button>\r\n</div>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}.redcolor-status{color:#c62a2a}#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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnTimeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'anna-core-anna-column-checkbox-filter', template: "<div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n    <div [ngClass]=\"{'full-width': filterTabObjects.length == 1}\" *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"checkbox-sort\" *ngIf=\"showSortComponent\">\r\n    <anna-core-sort-lib [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n        (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n        [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n</div>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <p class=\"d-flex justify-content-between\">\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableClearAll\" (click)=\"unCheckAllCheckbox()\">Clear all</button>\r\n        <button class=\"filter-text-btn\" [disabled]=\"disableSelectAll\" (click)=\"selectAllCheckbox()\">Select all</button>\r\n    </p>\r\n    <p class=\"search-box\">\r\n        <i class=\"mi mdi-search search-icon search-icon-position\"></i>\r\n        <input type=\"text\" placeholder=\"Search\" class=\"search-input\"\r\n            style=\"margin-left: 2px; border: none; padding: 0px\" [(ngModel)]=\"searchItem\"\r\n            (ngModelChange)=\"searchForTheItem($event)\" />\r\n        <i class=\"mdi mdi-close search-bar-close\"\r\n            [ngClass]=\"{'disable-close-icon': (!searchItem || searchItem.length == 0) }\"\r\n            (click)=\"clearSearchedItem()\"></i>\r\n\r\n    </p>\r\n    <div style=\"position:relative\">\r\n        <cdk-virtual-scroll-viewport itemSize=\"18\" [style.height.px]=\"heightOfCheckboxTooltipFilter\"\r\n            class=\"dropdown-data-container\">\r\n            <p *cdkVirtualFor=\"let option of tooltipOptions\" class=\"input example-item\"\r\n                (click)=\"selectUnselectCheckbox(option)\">\r\n                <span *ngIf=\"option.isSelected\" role=\"button\" class=\"mi mdi-check-box check-box\"></span>\r\n                <span *ngIf=\"!option.isSelected\" role=\"button\"\r\n                    class=\"mi mdi-check-box-outline-blank check-box unchecked\"></span>\r\n                <span class=\"data\" title=\"{{ option.value }}\" [innerHTML]=\"option.label\"></span>\r\n            </p>\r\n        </cdk-virtual-scroll-viewport>\r\n        <div style=\"position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none\"></div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"closeCheckboxFilter()\">Cancel</button>\r\n    <button class=\"button\" [ngClass]=\"{ disabled: disableCheckboxApply }\" (click)=\"applyFilters()\"\r\n        [disabled]=\"disableCheckboxApply\">\r\n        Apply\r\n        <span *ngIf=\"showFilterComponent\">{{ selectedCheckboxOptionsCount == tooltipOptions.length &&\r\n            tooltipOptions.length != 0 && !searchItem? 'All ('+ selectedCheckboxOptionsCount + ')': '(' +\r\n            selectedCheckboxOptionsCount + ')' }}</span>\r\n    </button>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: AnnaSortService }, { type: AnnaFilterService }]; }, propDecorators: { tableData: [{
+            args: [{ selector: 'anna-core-anna-column-time-filter', template: "<div class=\"radio-container\" *ngIf=\"filterTabObjects?.length > 1\">\r\n    <div *ngFor=\"let data of filterTabObjects\">\r\n        <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\"\r\n            [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{\r\n            data.label }}</p>\r\n    </div>\r\n</div>\r\n\r\n<anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n    [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear\r\n        filter</button>\r\n    <!-- <div class=\"time-filter-checkboxes\"\r\n        *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\">\r\n        <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showMultiTimeCheckbox\">\r\n            <span *ngIf=\"multiTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-checked\"\r\n                (click)=\"selectOrUnselectMultiTimeCheckbox()\">\r\n                check_box\r\n            </span>\r\n            <span *ngIf=\"!multiTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-unchecked\"\r\n                (click)=\"selectOrUnselectMultiTimeCheckbox()\">\r\n                check_box_outline_blank\r\n            </span>\r\n            <p style=\"margin-left: 2px\">Include Multi</p>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showZeroTimeCheckbox\">\r\n            <span *ngIf=\"zeroTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-checked\"\r\n                (click)=\"selectOrUnselectZeroTimeCheckbox()\">\r\n                check_box\r\n            </span>\r\n            <span *ngIf=\"!zeroTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-unchecked\"\r\n                (click)=\"selectOrUnselectZeroTimeCheckbox()\">\r\n                check_box_outline_blank\r\n            </span>\r\n            <p style=\"margin-left: 2px\">Include Zero</p>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n            <span *ngIf=\"enterTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-checked\"\r\n                (click)=\"selectOrUnselectEnterTimeCheckbox()\">\r\n                check_box\r\n            </span>\r\n            <span *ngIf=\"!enterTimeCheckboxChecked\" class=\"material-icons custom-column-checkbox-unchecked\"\r\n                (click)=\"selectOrUnselectEnterTimeCheckbox()\">\r\n                check_box_outline_blank\r\n            </span>\r\n            <p style=\"margin-left: 2px\">Enter time range</p>\r\n        </div>\r\n    </div> -->\r\n    <div class=\"time-label-container\">\r\n        <label>From</label>\r\n    </div>\r\n    <div class=\"time-container\">\r\n        <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\"\r\n            [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n        </div>\r\n        <span class=\"dot\">:</span>\r\n        <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\"\r\n            [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n        </div>\r\n        <div>\r\n            <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                <mat-button-toggle value=\"AM\">\r\n                    <span>AM</span>\r\n                </mat-button-toggle>\r\n                <mat-button-toggle value=\"PM\">\r\n                    <span>PM</span>\r\n                </mat-button-toggle>\r\n            </mat-button-toggle-group>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"time-label-container\">\r\n        <label>To</label>\r\n    </div>\r\n    <div class=\"time-container\">\r\n        <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\"\r\n            [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n        </div>\r\n        <span class=\"dot\">:</span>\r\n        <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\"\r\n            [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n        <div class=\"arrow-container\">\r\n            <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n            <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n        </div>\r\n        <div>\r\n            <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                <mat-button-toggle value=\"AM\">\r\n                    <span>AM</span>\r\n                </mat-button-toggle>\r\n                <mat-button-toggle value=\"PM\">\r\n                    <span>PM</span>\r\n                </mat-button-toggle>\r\n            </mat-button-toggle-group>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n    <button class=\"button\" [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\" (click)=\"applyTimeFilters()\"\r\n        [disabled]=\"disableTimeFilterApplyBtn\">\r\n        Apply\r\n    </button>\r\n</div>", styles: [".sort-btn{background:white;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.07;letter-spacing:normal;color:#1b88ff;cursor:pointer;flex:1;text-align:center}.sort-btn:last-of-type{border-right:none}.sort-btn.active{color:#202b47;text-decoration:none}p.sort-container{margin-top:8px;padding-bottom:8px;border-bottom:1px solid #e6e6e6;margin-bottom:0;display:flex}::ng-deep .tooltip-inner{max-height:22rem;background-color:#fff;border:1px solid white;border-radius:5px;box-shadow:0 2px 2px #0000003d,0 0 2px #0000001f;max-width:251px;width:100%;padding:0!important}::ng-deep .tooltip-inner div.radio-container{flex-wrap:wrap}::ng-deep .md-drppicker{box-shadow:unset!important}::ng-deep .available{color:#999}::ng-deep .bs-tooltip-bottom .arrow:before{border-bottom-color:#fff!important}::ng-deep .bs-tooltip-left .arrow:before{border-left-color:#fff!important}::ng-deep .tooltip.show{opacity:1}.input{text-align:left;margin:5px 10px 5px 5px;display:flex;align-items:center;width:230px;white-space:nowrap}.data{color:#000;font-weight:700;margin-left:5px;margin-right:5px}span.data{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.check-box{font-size:14px;cursor:pointer;position:relative;top:-1px}span.mdi-filter.active{color:#000;opacity:1!important;pointer-events:all!important}p{margin-bottom:0;line-height:initial}span.mdi-filter{color:#cbcbcb}::ng-deep .ngx-slider-pointer{top:-5px!important;width:12px!important;height:12px!important;background:#bdbdbd!important;border:1px solid #ffffff!important;box-shadow:0 1px 3px #0000004d!important;border-radius:16px!important}input:focus{outline:none}input::placeholder{color:#c8c8c8}.cancel-btn{background:#c7e1ff;color:#268bff}.apply-btn{background:#268bff;color:#fff;margin-left:.3125rem}div.radio-container{display:flex;white-space:nowrap;justify-content:space-between;background-color:#f4f4f4;border-radius:.125rem;margin:.4375rem .4375rem .25rem}div.radio-container div{flex:1;width:50%}div.radio-container div.full-width{width:100%}div.radio-container input{position:relative;top:.125rem;margin-right:.25rem}div.radio-container label{font-family:Roboto;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:0;color:#4a4a4a;margin:0;padding-left:.125rem}div.radio-container label:first-of-type{margin-right:.188rem}div.radio-container input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;width:.9375rem;height:.9375rem;padding:.125rem;background-clip:content-box;border:.125rem solid #268bff;background-color:transparent;border-radius:50%}div.radio-container input[type=radio]:checked{background-color:#268bff}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center}.buttons-container .button{padding:0 10px;margin:8px 0 0 8px;width:106px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.5rem;margin-right:.5rem}.buttons-container button.disabled{background:#bdbdbd;opacity:.5;color:#4a4a4a}.button{display:inline-block;margin:8px 4px 0 8px;padding:0 16px;border-radius:4px;text-align:center;outline:none;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:normal;border:none;color:#268bff;background-color:#e5f1ff}.search-box{display:flex;align-items:center;color:#c8c8c8;border:1px solid #e6e6e6;border-radius:.125rem;margin:.25rem .4375rem .188rem;height:1.5rem;padding:.188rem 8px .188rem .5rem}.search-box .search-bar-close{margin-left:auto;float:right}.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;width:calc(100% - 38px)}.check-box{color:#268bff}.tooltip-data-container{overflow-y:scroll;max-height:8rem}.searchbar{width:100%;display:flex;justify-content:flex-end;align-items:flex-end}.clear-button{opacity:.5;font-family:Roboto;font-size:.9375rem;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-decoration:underline;border:none;background-color:#fff;color:#4a4a4a;margin-left:.625rem;padding:0}.clear-button:focus{outline:none;box-shadow:none}.unchecked{color:#268bff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.3rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container p.input{margin-left:0}cdk-virtual-scroll-viewport.dropdown-data-container p.input span.mi{padding-left:.4375rem}cdk-virtual-scroll-viewport.dropdown-data-container p.input:hover{background-color:#ebebeb;cursor:pointer}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.188rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:lightgray}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.875rem;border:1px solid lightgray;color:gray}section.min-maxContainer span{display:inline-block;padding-left:.5rem;padding-right:.5rem;position:relative;top:.3125rem;color:#666}.time-container{width:100%;display:flex;padding:.125rem .625rem 0}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;padding-top:.375rem;padding-left:1px;margin-right:1.1875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;font-size:.5625rem}.time-container div.arrow-container i.downward{transform:rotate(180deg)}.mdi-filter{cursor:pointer}.time-label-container{display:flex;justify-content:flex-start}.time-label-container label{margin-bottom:0;color:#4a4a4a;margin-top:.125rem;margin-left:.625rem;font-weight:700}.time-heading{color:#000;font-size:.8125rem;text-align:left;padding-left:.625rem;margin-top:.625rem;font-weight:700}.column-clear-all{width:94%;text-align:center;border:none;font-size:14px;background:none;text-decoration:underline;color:#268bff}.checkbox-container{display:flex;padding-inline:.625rem}.checkbox-container .data{text-align:left}.checkbox-container:first-of-type{margin-top:.625rem;font-weight:500}.column-clear-all{width:94%;text-align:center;border:none;background:none;text-decoration:underline;color:#268bff}.column-clear-all:disabled{opacity:.5;color:#4a4a4a}.column-clear-all.align-center{text-align:center}span.mdi-filter-variant.disabled{pointer-events:none;opacity:.5}.datepicker-container{width:100%}span.mdi-filter-variant{color:#cbcbcb;cursor:pointer;font-size:.875rem}span.mdi-filter-variant.active{color:#000}p.filter-tab{font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:normal;color:#1b88ff;border-radius:5px;background-color:#f4f4f4;padding-inline:8px;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:white;text-decoration:underline;font-family:Roboto;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;border:none;color:#268bff;margin-inline:4px;margin-top:2px}button.filter-text-btn:disabled{color:#b1b1b1;cursor:not-allowed}::ng-deep .non-edit-datepicker-tooltip .tooltip-inner{max-width:310px!important;width:283px!important;overflow-y:initial!important;padding:0!important}input.slider-text::-webkit-outer-spin-button,input.slider-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.slider-text{-moz-appearance:textfield}input.slider-text.red-border{border:1px solid #f44336!important}::ng-deep .checkbox-sort p.sort-container{margin-top:8px!important;padding-bottom:8px!important}i.mdi-close{cursor:pointer}i.mdi-close.disable-close-icon{pointer-events:none;cursor:not-allowed}input.error-border{border:1px solid #f44336!important}::ng-deep .non-edit-checkbox-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-slider-tooltip .tooltip-inner{width:238px!important;padding:0!important}::ng-deep .non-edit-time-tooltip .tooltip-inner{width:250px!important;padding:0!important}::ng-deep .no-bottom-border p.sort-container{border-bottom:none!important}::ng-deep .ngx-slider-pointer-min:after{display:none}::ng-deep .ngx-slider-pointer-max:after{display:none}::ng-deep .ngx-slider span.ngx-slider-pointer{width:12px;height:12px;top:-5px;background-color:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bar{height:3px;background:#ededed}::ng-deep .ngx-slider span.ngx-slider-selection{background:#bdbdbd}::ng-deep .ngx-slider span.ngx-slider-bubble{bottom:-22px;font-size:12px;color:#333}::ng-deep .show-min.ngx-slider span.ngx-slider-model-value{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider span.ngx-slider-combined{background:white;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}.sidebar-slider{margin-bottom:6px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:1}.redcolor-status{color:#c62a2a}#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}\n"] }]
+        }], ctorParameters: function () { return [{ type: AnnaSortService }, { type: AnnaDateTimeFormatService }, { type: AnnaFilterService }]; }, propDecorators: { tableData: [{
                 type: Input
             }], clonedTableData: [{
                 type: Input
@@ -5110,18 +5898,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-class AnnaColumnTimeFilterComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-AnnaColumnTimeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnnaColumnTimeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AnnaColumnTimeFilterComponent, selector: "anna-core-anna-column-time-filter", ngImport: i0, template: "<!-- <ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <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            <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            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template> -->", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AnnaColumnTimeFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'anna-core-anna-column-time-filter', template: "<!-- <ng-template #timeFilterToolTip>\r\n    \r\n    <div class=\"radio-container\" *ngIf=\"showFilterTooltipTabs\">\r\n        <div *ngFor=\"let data of filterTabObjects\">\r\n            <p class=\"filter-tab\" [title]=\"data.label\" (click)=\"populateTooltipDataBasedOnSelectedRadio(data)\" [ngClass]=\"{'active': annaFilterService.selectedRadio == data.key}\" *ngIf=\"filterTabObjects.length > 0\">{{ data.label }}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <anna-core-sort-lib *ngIf=\"showSortComponent\" [ngClass]=\"{'no-bottom-border': !showFilterComponent}\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\" [sortObjectKey]=\"annaFilterService.selectedRadio\"></anna-core-sort-lib>\r\n    \r\n    <ng-container *ngIf=\"showFilterComponent\">\r\n        <button class=\"column-clear-all\" [disabled]=\"disableColumnClearAllBtn\" (click)=\"clearColumnFilter()\">Clear filter</button>\r\n        <div\r\n            class=\"time-filter-checkboxes\"\r\n            *ngIf=\"gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'\"\r\n        >\r\n            <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            <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            <div class=\"d-flex align-items-center\" style=\"padding: 0.5rem 0 0.5rem 0.5rem\" *ngIf=\"showEnterTimeCheckbox\">\r\n                <span\r\n                    *ngIf=\"enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-checked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box\r\n                </span>\r\n                <span\r\n                    *ngIf=\"!enterTimeCheckboxChecked\"\r\n                    class=\"material-icons custom-column-checkbox-unchecked\"\r\n                    (click)=\"selectOrUnselectEnterTimeCheckbox()\"\r\n                >\r\n                    check_box_outline_blank\r\n                </span>\r\n                <p style=\"margin-left: 2px\">Enter time range</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"time-label-container\">\r\n            <label>From</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeHourErr}\" [(ngModel)]=\"selectedFromTime[0]\" type=\"text\" (ngModelChange)=\"startTimeHourChange($event)\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': startTimeMinErr}\" [(ngModel)]=\"selectedFromTime[1]\" type=\"text\" (ngModelChange)=\"startTimeMinChange($event)\"/>\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeStartTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeStartTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedFromTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"time-label-container\">\r\n            <label>To</label>\r\n        </div>\r\n        <div class=\"time-container\">\r\n            <input class=\"form-control numberInput\" [(ngModel)]=\"selectedToTime[0]\" [ngClass]=\"{'error-border': endTimeHourErr}\" (ngModelChange)=\"endTimeHourChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeHour(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeHour(false)\"></i>\r\n            </div>\r\n            <span class=\"dot\">:</span>\r\n            <input class=\"form-control numberInput\" [ngClass]=\"{'error-border': endTimeMinErr}\" [(ngModel)]=\"selectedToTime[1]\" (ngModelChange)=\"endTimeMinChange($event)\" type=\"text\" />\r\n            <div class=\"arrow-container\">\r\n                <i class=\"mdi mdi-triangle upward\" (click)=\"changeEndTimeMinute(true)\"></i>\r\n                <i class=\"mdi mdi-triangle downward\" (click)=\"changeEndTimeMinute(false)\"></i>\r\n            </div>\r\n            <div>\r\n                <mat-button-toggle-group [(ngModel)]=\"selectedToTime[2]\" (ngModelChange)=\"disableTimeFilterApplyButton()\">\r\n                    <mat-button-toggle value=\"AM\">\r\n                        <span>AM</span>\r\n                    </mat-button-toggle>\r\n                    <mat-button-toggle value=\"PM\">\r\n                        <span>PM</span>\r\n                    </mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"buttons-container\">\r\n        <button class=\"button\" (click)=\"closeTimeFilter()\">Cancel</button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableTimeFilterApplyBtn }\"\r\n            (click)=\"applyTimeFilters()\"\r\n            [disabled]=\"disableTimeFilterApplyBtn\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template> -->" }]
-        }], ctorParameters: function () { return []; } });
-
 // Angular import statements
 class AnnaCoreModule {
 }