@annalib/anna-core 34.0.2 → 34.0.4

package/fesm2022/annalib-anna-core.mjs

@@ -1,24 +1,26 @@
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { NgTemplateOutlet, NgIf, CommonModule, NgClass, TitleCasePipe, DatePipe, NgFor, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Input, EventEmitter, Output, Injectable, HostListener, Directive, Pipe, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, EventEmitter, Output, HostListener, Directive, Injectable, Pipe, ViewChild, ViewChildren, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i7 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4$2 from '@angular/material/table';
+import * as i4$3 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i4$1 from '@angular-slider/ngx-slider';
+import * as i4$2 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
-import * as i1 from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbInputDatepicker, NgbDate, NgbDatepicker, NgbTooltip, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i8 from 'ng-circle-progress';
 import { NgCircleProgressModule } from 'ng-circle-progress';
-import * as i5$1 from 'ngx-skeleton-loader';
+import * as i3 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import * as i4$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { memoize, cloneDeep, min, max, uniq, isEqual, map, sortBy } from 'lodash-es';
 import dayjs from 'dayjs';
@@ -26,9 +28,9 @@ import customParseFormat from 'dayjs/plugin/isSameOrAfter';
 import customParseFormat$1 from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
 import minMax from 'dayjs/plugin/minMax';
-import * as i3 from '@angular/material/menu';
+import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i2$1 from '@angular/router';
+import * as i2 from '@angular/router';
 import hash from 'object-hash';
 
 class AnnaBuyerApprovalIconTemplateComponent {
@@ -137,67 +139,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Output
             }] } });
 
-class AnnaNoDataComponent {
-    constructor() {
-        this.width = "48%";
-        this.marginTop = "1.25rem";
-    }
-    ngOnInit() {
-        this.message = "No data to display";
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaNoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaNoDataComponent, isStandalone: true, selector: "anna-core-no-data-lib", inputs: { width: "width", marginTop: "marginTop" }, ngImport: i0, template: "<div\r\n    [style.marginRight]=\"width\"\r\n    [style.marginTop]=\"marginTop\"\r\n    class=\"no-data\"\r\n>\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;margin:20px;z-index:400;transform:translate(50%)}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px;font-size:var(--page-link-fs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaNoDataComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "anna-core-no-data-lib", changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\r\n    [style.marginRight]=\"width\"\r\n    [style.marginTop]=\"marginTop\"\r\n    class=\"no-data\"\r\n>\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;margin:20px;z-index:400;transform:translate(50%)}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px;font-size:var(--page-link-fs)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { width: [{
-                type: Input
-            }], marginTop: [{
-                type: Input
-            }] } });
-
-class AnnaSpinnerLoaderService {
-    constructor() {
-        this.loaderSubject = new Subject();
-        this.loaderState = this.loaderSubject.asObservable();
-    }
-    start() {
-        this.loaderSubject.next(true);
-    }
-    stop() {
-        this.loaderSubject.next(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderService, providedIn: "root" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }] });
-
-class AnnaSpinnerLoaderComponent {
-    constructor(loaderService, cdref) {
-        this.loaderService = loaderService;
-        this.cdref = cdref;
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.loaderService.loaderState.subscribe((state) => {
-            this.loading = state;
-            this.cdref.markForCheck();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderComponent, deps: [{ token: AnnaSpinnerLoaderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaSpinnerLoaderComponent, isStandalone: true, selector: "anna-core-spinner-loader", ngImport: i0, template: "<div\r\n    *ngIf=\"loading\"\r\n    class=\"loading\"\r\n>\r\n    <div class=\"app-spinner-container\">\r\n        <div class=\"ngx-foreground-spinner\">\r\n            <div class=\"sk-three-strings\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".loading{z-index:99998!important;background-color:#282828cc;cursor:progress;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "anna-core-spinner-loader", imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    *ngIf=\"loading\"\r\n    class=\"loading\"\r\n>\r\n    <div class=\"app-spinner-container\">\r\n        <div class=\"ngx-foreground-spinner\">\r\n            <div class=\"sk-three-strings\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".loading{z-index:99998!important;background-color:#282828cc;cursor:progress;opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: AnnaSpinnerLoaderService }, { type: i0.ChangeDetectorRef }] });
-
 class DigitOnlyDirective {
     constructor(el) {
         this.el = el;
@@ -266,6 +207,11 @@ class DigitOnlyDirective {
         let newValue = "";
         if (this.decimal && e.key === this.decimalSeparator) {
             newValue = this.forecastValue(e.key);
+            const onlyWhitespaceOrEmpty = newValue.trim() === this.decimalSeparator || newValue.trim() === "";
+            if (onlyWhitespaceOrEmpty || newValue.startsWith(this.decimalSeparator)) {
+                e.preventDefault();
+                return;
+            }
             if (newValue.split(this.decimalSeparator).length > 2) {
                 // has two or more decimal points
                 e.preventDefault();
@@ -462,6 +408,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ["drop", ["$event"]]
             }] } });
 
+class AnnaNoDataComponent {
+    constructor() {
+        this.width = "48%";
+        this.marginTop = "1.25rem";
+    }
+    ngOnInit() {
+        this.message = "No data to display";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaNoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaNoDataComponent, isStandalone: true, selector: "anna-core-no-data-lib", inputs: { width: "width", marginTop: "marginTop" }, ngImport: i0, template: "<div\r\n    [style.marginRight]=\"width\"\r\n    [style.marginTop]=\"marginTop\"\r\n    class=\"no-data\"\r\n>\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;margin:20px;z-index:400;transform:translate(50%)}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px;font-size:var(--page-link-fs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaNoDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "anna-core-no-data-lib", changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\r\n    [style.marginRight]=\"width\"\r\n    [style.marginTop]=\"marginTop\"\r\n    class=\"no-data\"\r\n>\r\n    <label>{{ message }}</label>\r\n</div>\r\n", styles: ["div{right:0;position:absolute;margin:20px;z-index:400;transform:translate(50%)}div label{margin:0;width:auto;font-weight:500;background-color:#d3d3d3;padding:5px 18px;border-radius:4px;font-size:var(--page-link-fs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }] } });
+
+class AnnaLicensingTableComponent {
+    constructor() {
+        this.isEditMode = false;
+        this.loading = true;
+        this.defaultListing = false;
+        this.editingCurrentPlan = false;
+        this.specificationChanged = new EventEmitter();
+    }
+    onValueChange(updatedValue, featureDetails) {
+        this.specificationChanged.emit({ updatedValue, featureDetails });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaLicensingTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaLicensingTableComponent, isStandalone: true, selector: "anna-core-licensing-table", inputs: { plans: "plans", isEditMode: "isEditMode", loading: "loading", defaultListing: "defaultListing", editingCurrentPlan: "editingCurrentPlan", maxValueForEvaluationPlanPOD: "maxValueForEvaluationPlanPOD" }, outputs: { specificationChanged: "specificationChanged" }, ngImport: i0, template: "<table class=\"header-section\">\r\n    <thead>\r\n        <tr>\r\n            <th><div>FEATURE</div></th>\r\n            <ng-container *ngIf=\"loading\">\r\n                <ng-container *ngIf=\"defaultListing\">\r\n                    <div class=\"skeleton-loader\">\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!defaultListing\">\r\n                    <div class=\"skeleton-loader\">\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!loading && plans?.length\">\r\n                <th *ngFor=\"let plan of plans\">\r\n                    {{ plan?.PlanName }}\r\n                    <ng-container *ngIf=\"plans.length === 1\">\r\n                        <p *ngIf=\"isEditMode\">\r\n                            {{ editingCurrentPlan ? \"Current plan\" : \"Upcoming Plan\" }}\r\n                        </p>\r\n                        <p *ngIf=\"!isEditMode\">\r\n                            {{ !plan?.PlanExpiryDays || plan?.PlanExpiryDays >= 0 ? \"Current plan\" : \"Expired Plan\" }}\r\n                        </p>\r\n                    </ng-container>\r\n                </th>\r\n            </ng-container>\r\n        </tr>\r\n    </thead>\r\n</table>\r\n<div class=\"scrollable-tbody\">\r\n    <ng-container *ngIf=\"loading\">\r\n        <ngx-skeleton-loader\r\n            count=\"1\"\r\n            [theme]=\"{ marginTop: '10px', marginBottom: '0', height: defaultListing ? '490px' : '430px' }\"\r\n        >\r\n        </ngx-skeleton-loader>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading && plans?.length\">\r\n        <table>\r\n            <tbody>\r\n                <tr *ngFor=\"let feature of plans[0]?.FeatureDetails; let featureIndex = index\">\r\n                    <td>\r\n                        <strong>{{ feature.FeatureName }}</strong> {{ feature.FeatureDescription }}\r\n                    </td>\r\n                    <td *ngFor=\"let plan of plans; let planIndex = index\">\r\n                        <ng-container *ngIf=\"plan.FeatureDetails[featureIndex] as featureDetails\">\r\n                            <ng-container *ngIf=\"!featureDetails.Specification.length\">\r\n                                <i\r\n                                    *ngIf=\"featureDetails.IsEnabled\"\r\n                                    class=\"mdi mdi-checkbox-marked-circle\"\r\n                                ></i>\r\n                                <i\r\n                                    *ngIf=\"!featureDetails.IsEnabled\"\r\n                                    class=\"mdi mdi-close\"\r\n                                ></i>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"featureDetails.Specification.length\">\r\n                                <ng-container *ngFor=\"let spec of featureDetails.Specification\">\r\n                                    <ng-container *ngIf=\"spec.JsonType === 'PAY_PER_USE'\">\r\n                                        <div *ngIf=\"isEditMode\">\r\n                                            <input\r\n                                                annaCoreDigitOnly\r\n                                                type=\"number\"\r\n                                                [ngModel]=\"spec.Json.TotalCount\"\r\n                                                (ngModelChange)=\"onValueChange($event, featureDetails)\"\r\n                                                [attr.min]=\"spec.JsonCloned.TotalCount\"\r\n                                                [attr.max]=\"maxValueForEvaluationPlanPOD || null\"\r\n                                                [ngClass]=\"{\r\n                                                    'red-border':\r\n                                                        spec.Json.TotalCount < spec.JsonCloned.TotalCount ||\r\n                                                        (maxValueForEvaluationPlanPOD &&\r\n                                                            spec.Json.TotalCount > maxValueForEvaluationPlanPOD)\r\n                                                }\"\r\n                                            />\r\n                                            Orders\r\n                                            <i\r\n                                                class=\"mdi mdi-alert-octagon\"\r\n                                                *ngIf=\"\r\n                                                    spec.Json.TotalCount < spec.JsonCloned.TotalCount ||\r\n                                                    (maxValueForEvaluationPlanPOD && spec.Json.TotalCount > maxValueForEvaluationPlanPOD)\r\n                                                \"\r\n                                                matTooltipPosition=\"above\"\r\n                                                matTooltip=\"The value must be at least the chosen plan's limit and no more than the next plan's limit.\"\r\n                                            ></i>\r\n                                        </div>\r\n                                        <div *ngIf=\"!isEditMode\">\r\n                                            <p>\r\n                                                {{ spec.Json.TotalCount }} Orders\r\n                                                <span *ngIf=\"spec.Json.ConsumedCount\"\r\n                                                    >|\r\n                                                    {{ spec.Json.TotalCount - spec.Json.ConsumedCount }}\r\n                                                    Remaining</span\r\n                                                >\r\n                                            </p>\r\n                                            <span\r\n                                                class=\"customized-text\"\r\n                                                *ngIf=\"spec.IsCustomized\"\r\n                                                >(Customized)</span\r\n                                            >\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading && !plans?.length\">\r\n        <anna-core-no-data-lib [width]=\"'50%'\"></anna-core-no-data-lib>\r\n    </ng-container>\r\n</div>\r\n", styles: ["table.header-section{border-collapse:separate;border-spacing:0 8px;width:100%;border-top:1px solid #9b1cd5;border-bottom:1px solid #9b1cd5}.scrollable-tbody table{border-collapse:collapse;width:100%}tr{height:40px}tr .skeleton-loader{display:flex;justify-content:flex-end}tr ::ng-deep ngx-skeleton-loader{border:1px solid #304598;border-radius:8px;width:153px;height:52px;display:inline-block;margin-right:8px}tr ::ng-deep ngx-skeleton-loader:nth-of-type(1) div{background-color:#f5f7ff}tr ::ng-deep ngx-skeleton-loader:nth-of-type(2) div{background-color:#dfe6ff}tr ::ng-deep ngx-skeleton-loader:nth-of-type(3) div{background-color:#c6d2ff}tr ::ng-deep ngx-skeleton-loader:last-of-type{margin-right:0}th{padding:8px 8px 8px 0;text-align:left;font-family:Roboto;font-size:16px;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;position:sticky;top:0;background-color:#fff;z-index:1}th:not(:first-child){border:1px solid #304598;border-radius:8px;padding-left:8px;width:137px;height:35px}th:not(:first-child) p{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;margin-bottom:0}th:nth-of-type(2){background-color:#f5f7ff}th:nth-of-type(3){background-color:#dfe6ff}th:nth-of-type(4){background-color:#c6d2ff}td{border-bottom:1px solid #d3d3d3;padding:8px 8px 8px 0;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}td p{margin-bottom:0}td input{width:30px}td .mdi-checkbox-marked-circle{font-size:14px;color:#304598;position:relative}td .mdi-close{color:#bdbdbd}td .mdi-alert-octagon{color:#f44336!important;cursor:pointer}td .red-border{border:1px solid #f44336;outline:#f44336}td:not(:first-child){width:142px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.customized-text{color:#a7a7a7;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[annaCoreDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaLicensingTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "anna-core-licensing-table", standalone: true, imports: [CommonModule, FormsModule, NgxSkeletonLoaderModule, DigitOnlyDirective, MatTooltipModule, AnnaNoDataComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"header-section\">\r\n    <thead>\r\n        <tr>\r\n            <th><div>FEATURE</div></th>\r\n            <ng-container *ngIf=\"loading\">\r\n                <ng-container *ngIf=\"defaultListing\">\r\n                    <div class=\"skeleton-loader\">\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!defaultListing\">\r\n                    <div class=\"skeleton-loader\">\r\n                        <ngx-skeleton-loader\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '100%', borderRadius: '8px', marginBottom: '0px' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!loading && plans?.length\">\r\n                <th *ngFor=\"let plan of plans\">\r\n                    {{ plan?.PlanName }}\r\n                    <ng-container *ngIf=\"plans.length === 1\">\r\n                        <p *ngIf=\"isEditMode\">\r\n                            {{ editingCurrentPlan ? \"Current plan\" : \"Upcoming Plan\" }}\r\n                        </p>\r\n                        <p *ngIf=\"!isEditMode\">\r\n                            {{ !plan?.PlanExpiryDays || plan?.PlanExpiryDays >= 0 ? \"Current plan\" : \"Expired Plan\" }}\r\n                        </p>\r\n                    </ng-container>\r\n                </th>\r\n            </ng-container>\r\n        </tr>\r\n    </thead>\r\n</table>\r\n<div class=\"scrollable-tbody\">\r\n    <ng-container *ngIf=\"loading\">\r\n        <ngx-skeleton-loader\r\n            count=\"1\"\r\n            [theme]=\"{ marginTop: '10px', marginBottom: '0', height: defaultListing ? '490px' : '430px' }\"\r\n        >\r\n        </ngx-skeleton-loader>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading && plans?.length\">\r\n        <table>\r\n            <tbody>\r\n                <tr *ngFor=\"let feature of plans[0]?.FeatureDetails; let featureIndex = index\">\r\n                    <td>\r\n                        <strong>{{ feature.FeatureName }}</strong> {{ feature.FeatureDescription }}\r\n                    </td>\r\n                    <td *ngFor=\"let plan of plans; let planIndex = index\">\r\n                        <ng-container *ngIf=\"plan.FeatureDetails[featureIndex] as featureDetails\">\r\n                            <ng-container *ngIf=\"!featureDetails.Specification.length\">\r\n                                <i\r\n                                    *ngIf=\"featureDetails.IsEnabled\"\r\n                                    class=\"mdi mdi-checkbox-marked-circle\"\r\n                                ></i>\r\n                                <i\r\n                                    *ngIf=\"!featureDetails.IsEnabled\"\r\n                                    class=\"mdi mdi-close\"\r\n                                ></i>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"featureDetails.Specification.length\">\r\n                                <ng-container *ngFor=\"let spec of featureDetails.Specification\">\r\n                                    <ng-container *ngIf=\"spec.JsonType === 'PAY_PER_USE'\">\r\n                                        <div *ngIf=\"isEditMode\">\r\n                                            <input\r\n                                                annaCoreDigitOnly\r\n                                                type=\"number\"\r\n                                                [ngModel]=\"spec.Json.TotalCount\"\r\n                                                (ngModelChange)=\"onValueChange($event, featureDetails)\"\r\n                                                [attr.min]=\"spec.JsonCloned.TotalCount\"\r\n                                                [attr.max]=\"maxValueForEvaluationPlanPOD || null\"\r\n                                                [ngClass]=\"{\r\n                                                    'red-border':\r\n                                                        spec.Json.TotalCount < spec.JsonCloned.TotalCount ||\r\n                                                        (maxValueForEvaluationPlanPOD &&\r\n                                                            spec.Json.TotalCount > maxValueForEvaluationPlanPOD)\r\n                                                }\"\r\n                                            />\r\n                                            Orders\r\n                                            <i\r\n                                                class=\"mdi mdi-alert-octagon\"\r\n                                                *ngIf=\"\r\n                                                    spec.Json.TotalCount < spec.JsonCloned.TotalCount ||\r\n                                                    (maxValueForEvaluationPlanPOD && spec.Json.TotalCount > maxValueForEvaluationPlanPOD)\r\n                                                \"\r\n                                                matTooltipPosition=\"above\"\r\n                                                matTooltip=\"The value must be at least the chosen plan's limit and no more than the next plan's limit.\"\r\n                                            ></i>\r\n                                        </div>\r\n                                        <div *ngIf=\"!isEditMode\">\r\n                                            <p>\r\n                                                {{ spec.Json.TotalCount }} Orders\r\n                                                <span *ngIf=\"spec.Json.ConsumedCount\"\r\n                                                    >|\r\n                                                    {{ spec.Json.TotalCount - spec.Json.ConsumedCount }}\r\n                                                    Remaining</span\r\n                                                >\r\n                                            </p>\r\n                                            <span\r\n                                                class=\"customized-text\"\r\n                                                *ngIf=\"spec.IsCustomized\"\r\n                                                >(Customized)</span\r\n                                            >\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading && !plans?.length\">\r\n        <anna-core-no-data-lib [width]=\"'50%'\"></anna-core-no-data-lib>\r\n    </ng-container>\r\n</div>\r\n", styles: ["table.header-section{border-collapse:separate;border-spacing:0 8px;width:100%;border-top:1px solid #9b1cd5;border-bottom:1px solid #9b1cd5}.scrollable-tbody table{border-collapse:collapse;width:100%}tr{height:40px}tr .skeleton-loader{display:flex;justify-content:flex-end}tr ::ng-deep ngx-skeleton-loader{border:1px solid #304598;border-radius:8px;width:153px;height:52px;display:inline-block;margin-right:8px}tr ::ng-deep ngx-skeleton-loader:nth-of-type(1) div{background-color:#f5f7ff}tr ::ng-deep ngx-skeleton-loader:nth-of-type(2) div{background-color:#dfe6ff}tr ::ng-deep ngx-skeleton-loader:nth-of-type(3) div{background-color:#c6d2ff}tr ::ng-deep ngx-skeleton-loader:last-of-type{margin-right:0}th{padding:8px 8px 8px 0;text-align:left;font-family:Roboto;font-size:16px;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;position:sticky;top:0;background-color:#fff;z-index:1}th:not(:first-child){border:1px solid #304598;border-radius:8px;padding-left:8px;width:137px;height:35px}th:not(:first-child) p{font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;margin-bottom:0}th:nth-of-type(2){background-color:#f5f7ff}th:nth-of-type(3){background-color:#dfe6ff}th:nth-of-type(4){background-color:#c6d2ff}td{border-bottom:1px solid #d3d3d3;padding:8px 8px 8px 0;font-family:Roboto;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}td p{margin-bottom:0}td input{width:30px}td .mdi-checkbox-marked-circle{font-size:14px;color:#304598;position:relative}td .mdi-close{color:#bdbdbd}td .mdi-alert-octagon{color:#f44336!important;cursor:pointer}td .red-border{border:1px solid #f44336;outline:#f44336}td:not(:first-child){width:142px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.customized-text{color:#a7a7a7;font-style:italic}\n"] }]
+        }], propDecorators: { plans: [{
+                type: Input
+            }], isEditMode: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], defaultListing: [{
+                type: Input
+            }], editingCurrentPlan: [{
+                type: Input
+            }], maxValueForEvaluationPlanPOD: [{
+                type: Input
+            }], specificationChanged: [{
+                type: Output
+            }] } });
+
+class AnnaSpinnerLoaderService {
+    constructor() {
+        this.loaderSubject = new Subject();
+        this.loaderState = this.loaderSubject.asObservable();
+    }
+    start() {
+        this.loaderSubject.next(true);
+    }
+    stop() {
+        this.loaderSubject.next(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class AnnaSpinnerLoaderComponent {
+    constructor(loaderService, cdref) {
+        this.loaderService = loaderService;
+        this.cdref = cdref;
+        this.loading = false;
+    }
+    ngOnInit() {
+        this.loaderService.loaderState.subscribe((state) => {
+            this.loading = state;
+            this.cdref.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderComponent, deps: [{ token: AnnaSpinnerLoaderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaSpinnerLoaderComponent, isStandalone: true, selector: "anna-core-spinner-loader", ngImport: i0, template: "<div\r\n    *ngIf=\"loading\"\r\n    class=\"loading\"\r\n>\r\n    <div class=\"app-spinner-container\">\r\n        <div class=\"ngx-foreground-spinner\">\r\n            <div class=\"sk-three-strings\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".loading{z-index:99998!important;background-color:#282828cc;cursor:progress;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSpinnerLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "anna-core-spinner-loader", imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    *ngIf=\"loading\"\r\n    class=\"loading\"\r\n>\r\n    <div class=\"app-spinner-container\">\r\n        <div class=\"ngx-foreground-spinner\">\r\n            <div class=\"sk-three-strings\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".loading{z-index:99998!important;background-color:#282828cc;cursor:progress;opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: AnnaSpinnerLoaderService }, { type: i0.ChangeDetectorRef }] });
+
 class FixedRowsPopupTableDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -1057,11 +1097,11 @@ class AnnaCalendarFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaCalendarFilterComponent, deps: [{ token: AnnaDateTimeFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaCalendarFilterComponent, isStandalone: true, selector: "anna-core-calendar-filter-lib", inputs: { maxDate: "maxDate", autoClose: "autoClose", label: "label", minDate: "minDate", showLabel: "showLabel", dateFormat: "dateFormat", placeholder: "placeholder", disabled: "disabled", selectedFromDate: "selectedFromDate", selectedToDate: "selectedToDate", disableFunction: "disableFunction", showFooterTemplate: "showFooterTemplate", placement: "placement" }, outputs: { selectedDate: "selectedDate", apply: "apply", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n\r\n<p\r\n    class=\"calendar-label\"\r\n    *ngIf=\"showLabel\"\r\n>\r\n    {{ label | titlecase }}\r\n</p>\r\n<form>\r\n    <div class=\"padding-class\">\r\n        <div class=\"dp-hidden position-absolute\">\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                    (dateSelect)=\"onDateSelection($event)\"\r\n                    [displayMonths]=\"1\"\r\n                    [dayTemplate]=\"t\"\r\n                    [maxDate]=\"maxDate\"\r\n                    [minDate]=\"minDate\"\r\n                    [autoClose]=\"autoClose\"\r\n                    [startDate]=\"fromDate\"\r\n                    [markDisabled]=\"disableFunction\"\r\n                    [footerTemplate]=\"footerTemplate\"\r\n                    navigation=\"select\"\r\n                    (closed)=\"datepickerClosed()\"\r\n                    [placement]=\"placement\"\r\n                />\r\n                <ng-template\r\n                    #t\r\n                    let-date\r\n                    let-focused=\"focused\"\r\n                >\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                        (mouseenter)=\"hoveredDate = date\"\r\n                        (mouseleave)=\"hoveredDate = null\"\r\n                    >\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\r\n                #dpFromDate\r\n                id=\"datepicker-input\"\r\n                class=\"form-control\"\r\n                [placeholder]=\"placeholder\"\r\n                readonly\r\n                name=\"dpFromDate\"\r\n                [value]=\"dateToBeShownInInput\"\r\n            />\r\n            <button\r\n                class=\"icon-container\"\r\n                (click)=\"datepicker.toggle()\"\r\n                type=\"button\"\r\n                [disabled]=\"disabled\"\r\n            >\r\n                <i\r\n                    class=\"mdi mdi-calendar-range\"\r\n                    *ngIf=\"!datepicker.isOpen()\"\r\n                ></i>\r\n                <i\r\n                    class=\"mdi mdi-check\"\r\n                    *ngIf=\"datepicker.isOpen()\"\r\n                ></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ng-template #footerTemplate>\r\n    <div\r\n        class=\"buttons-container\"\r\n        *ngIf=\"showFooterTemplate\"\r\n    >\r\n        <button\r\n            class=\"button\"\r\n            (click)=\"cancelSelection(); datepicker.close()\"\r\n        >\r\n            Cancel\r\n        </button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableApplyBtn }\"\r\n            [disabled]=\"disableApplyBtn\"\r\n            (click)=\"applySelection(); datepicker.close()\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}::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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#2962ff}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}div.padding-class{padding:0 12px}:host::ng-deep div.ngb-dp-arrow{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{border-radius:0;background-color:#fff!important}:host::ng-deep div.ngb-dp-header{padding:.5rem 0 0!important;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:8px .25rem;color:#000;display:inline-block;height:2rem;width:2.2rem;font-size:var(--week-calendar-week-fs)}.custom-day.range{background-color:#268bff!important;color:#fff!important}.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!important;color:#000!important;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:#fff;border:none}input#datepicker-input{color:#202b47;cursor:default;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;padding-block:5px}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:var(--dropdown-label-fs);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:12px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:24px}:host::ng-deep ngb-datepicker-navigation-select>.form-select:focus{box-shadow:none!important;border:1px solid #c2cfd6!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday,:host::ng-deep .ngb-dp-week-number{width:2.2rem!important}:host ::ng-deep .input-group ngb-datepicker.dropdown-menu.show{margin-left:-1px!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaCalendarFilterComponent, isStandalone: true, selector: "anna-core-calendar-filter-lib", inputs: { maxDate: "maxDate", autoClose: "autoClose", label: "label", minDate: "minDate", showLabel: "showLabel", dateFormat: "dateFormat", placeholder: "placeholder", disabled: "disabled", selectedFromDate: "selectedFromDate", selectedToDate: "selectedToDate", disableFunction: "disableFunction", showFooterTemplate: "showFooterTemplate", placement: "placement" }, outputs: { selectedDate: "selectedDate", apply: "apply", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n\r\n<p\r\n    class=\"calendar-label\"\r\n    *ngIf=\"showLabel\"\r\n>\r\n    {{ label | titlecase }}\r\n</p>\r\n<form>\r\n    <div class=\"padding-class\">\r\n        <div class=\"dp-hidden position-absolute\">\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                    (dateSelect)=\"onDateSelection($event)\"\r\n                    [displayMonths]=\"1\"\r\n                    [dayTemplate]=\"t\"\r\n                    [maxDate]=\"maxDate\"\r\n                    [minDate]=\"minDate\"\r\n                    [autoClose]=\"autoClose\"\r\n                    [startDate]=\"fromDate\"\r\n                    [markDisabled]=\"disableFunction\"\r\n                    [footerTemplate]=\"footerTemplate\"\r\n                    navigation=\"select\"\r\n                    (closed)=\"datepickerClosed()\"\r\n                    [placement]=\"placement\"\r\n                />\r\n                <ng-template\r\n                    #t\r\n                    let-date\r\n                    let-focused=\"focused\"\r\n                >\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                        (mouseenter)=\"hoveredDate = date\"\r\n                        (mouseleave)=\"hoveredDate = null\"\r\n                    >\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\r\n                #dpFromDate\r\n                id=\"datepicker-input\"\r\n                class=\"form-control\"\r\n                [placeholder]=\"placeholder\"\r\n                readonly\r\n                name=\"dpFromDate\"\r\n                [value]=\"dateToBeShownInInput\"\r\n            />\r\n            <button\r\n                class=\"icon-container\"\r\n                (click)=\"datepicker.toggle()\"\r\n                type=\"button\"\r\n                [disabled]=\"disabled\"\r\n            >\r\n                <i\r\n                    class=\"mdi mdi-calendar-range\"\r\n                    *ngIf=\"!datepicker.isOpen()\"\r\n                ></i>\r\n                <i\r\n                    class=\"mdi mdi-check\"\r\n                    *ngIf=\"datepicker.isOpen()\"\r\n                ></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ng-template #footerTemplate>\r\n    <div\r\n        class=\"buttons-container\"\r\n        *ngIf=\"showFooterTemplate\"\r\n    >\r\n        <button\r\n            class=\"button\"\r\n            (click)=\"cancelSelection(); datepicker.close()\"\r\n        >\r\n            Cancel\r\n        </button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableApplyBtn }\"\r\n            [disabled]=\"disableApplyBtn\"\r\n            (click)=\"applySelection(); datepicker.close()\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}::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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#2962ff}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}div.padding-class{padding:0 12px}:host::ng-deep div.ngb-dp-arrow{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{border-radius:0;background-color:#fff!important}:host::ng-deep div.ngb-dp-header{padding:.5rem 0 0!important;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:8px .25rem;color:#000;display:inline-block;height:2rem!important;width:2.2rem!important;font-size:var(--week-calendar-week-fs)}.custom-day.range{background-color:#268bff!important;color:#fff!important}.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!important;color:#000!important;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:#fff;border:none}input#datepicker-input{color:#202b47;cursor:default;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;padding-block:5px}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:var(--dropdown-label-fs);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:12px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:24px}:host::ng-deep ngb-datepicker-navigation-select>.form-select:focus{box-shadow:none!important;border:1px solid #c2cfd6!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday,:host::ng-deep .ngb-dp-week-number{width:2.2rem!important}:host ::ng-deep .input-group ngb-datepicker.dropdown-menu.show{margin-left:-1px!important}:host ::ng-deep .input-group{flex-wrap:nowrap}:host ::ng-deep .input-group .ngb-dp-day{color:#000}:host ::ng-deep .ngb-dp-weekdays{border-top:none}:host ::ng-deep .ngb-dp-month .ngb-dp-week:last-child{padding-bottom:6px}:host ::ng-deep .input-group ngb-datepicker.dropdown-menu{box-shadow:0 6px 12px #0000002d}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaCalendarFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "anna-core-calendar-filter-lib", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, FormsModule, NgbInputDatepicker, NgClass, TitleCasePipe], template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n\r\n<p\r\n    class=\"calendar-label\"\r\n    *ngIf=\"showLabel\"\r\n>\r\n    {{ label | titlecase }}\r\n</p>\r\n<form>\r\n    <div class=\"padding-class\">\r\n        <div class=\"dp-hidden position-absolute\">\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                    (dateSelect)=\"onDateSelection($event)\"\r\n                    [displayMonths]=\"1\"\r\n                    [dayTemplate]=\"t\"\r\n                    [maxDate]=\"maxDate\"\r\n                    [minDate]=\"minDate\"\r\n                    [autoClose]=\"autoClose\"\r\n                    [startDate]=\"fromDate\"\r\n                    [markDisabled]=\"disableFunction\"\r\n                    [footerTemplate]=\"footerTemplate\"\r\n                    navigation=\"select\"\r\n                    (closed)=\"datepickerClosed()\"\r\n                    [placement]=\"placement\"\r\n                />\r\n                <ng-template\r\n                    #t\r\n                    let-date\r\n                    let-focused=\"focused\"\r\n                >\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                        (mouseenter)=\"hoveredDate = date\"\r\n                        (mouseleave)=\"hoveredDate = null\"\r\n                    >\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\r\n                #dpFromDate\r\n                id=\"datepicker-input\"\r\n                class=\"form-control\"\r\n                [placeholder]=\"placeholder\"\r\n                readonly\r\n                name=\"dpFromDate\"\r\n                [value]=\"dateToBeShownInInput\"\r\n            />\r\n            <button\r\n                class=\"icon-container\"\r\n                (click)=\"datepicker.toggle()\"\r\n                type=\"button\"\r\n                [disabled]=\"disabled\"\r\n            >\r\n                <i\r\n                    class=\"mdi mdi-calendar-range\"\r\n                    *ngIf=\"!datepicker.isOpen()\"\r\n                ></i>\r\n                <i\r\n                    class=\"mdi mdi-check\"\r\n                    *ngIf=\"datepicker.isOpen()\"\r\n                ></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ng-template #footerTemplate>\r\n    <div\r\n        class=\"buttons-container\"\r\n        *ngIf=\"showFooterTemplate\"\r\n    >\r\n        <button\r\n            class=\"button\"\r\n            (click)=\"cancelSelection(); datepicker.close()\"\r\n        >\r\n            Cancel\r\n        </button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableApplyBtn }\"\r\n            [disabled]=\"disableApplyBtn\"\r\n            (click)=\"applySelection(); datepicker.close()\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}::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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#2962ff}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}div.padding-class{padding:0 12px}:host::ng-deep div.ngb-dp-arrow{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{border-radius:0;background-color:#fff!important}:host::ng-deep div.ngb-dp-header{padding:.5rem 0 0!important;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:8px .25rem;color:#000;display:inline-block;height:2rem;width:2.2rem;font-size:var(--week-calendar-week-fs)}.custom-day.range{background-color:#268bff!important;color:#fff!important}.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!important;color:#000!important;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:#fff;border:none}input#datepicker-input{color:#202b47;cursor:default;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;padding-block:5px}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:var(--dropdown-label-fs);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:12px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:24px}:host::ng-deep ngb-datepicker-navigation-select>.form-select:focus{box-shadow:none!important;border:1px solid #c2cfd6!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday,:host::ng-deep .ngb-dp-week-number{width:2.2rem!important}:host ::ng-deep .input-group ngb-datepicker.dropdown-menu.show{margin-left:-1px!important}\n"] }]
+            args: [{ selector: "anna-core-calendar-filter-lib", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, FormsModule, NgbInputDatepicker, NgClass, TitleCasePipe], template: "<!-- container=\"body\"\r\ndatepickerClass = \"calendar-filter\" -->\r\n\r\n<p\r\n    class=\"calendar-label\"\r\n    *ngIf=\"showLabel\"\r\n>\r\n    {{ label | titlecase }}\r\n</p>\r\n<form>\r\n    <div class=\"padding-class\">\r\n        <div class=\"dp-hidden position-absolute\">\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                    (dateSelect)=\"onDateSelection($event)\"\r\n                    [displayMonths]=\"1\"\r\n                    [dayTemplate]=\"t\"\r\n                    [maxDate]=\"maxDate\"\r\n                    [minDate]=\"minDate\"\r\n                    [autoClose]=\"autoClose\"\r\n                    [startDate]=\"fromDate\"\r\n                    [markDisabled]=\"disableFunction\"\r\n                    [footerTemplate]=\"footerTemplate\"\r\n                    navigation=\"select\"\r\n                    (closed)=\"datepickerClosed()\"\r\n                    [placement]=\"placement\"\r\n                />\r\n                <ng-template\r\n                    #t\r\n                    let-date\r\n                    let-focused=\"focused\"\r\n                >\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                        (mouseenter)=\"hoveredDate = date\"\r\n                        (mouseleave)=\"hoveredDate = null\"\r\n                    >\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\r\n                #dpFromDate\r\n                id=\"datepicker-input\"\r\n                class=\"form-control\"\r\n                [placeholder]=\"placeholder\"\r\n                readonly\r\n                name=\"dpFromDate\"\r\n                [value]=\"dateToBeShownInInput\"\r\n            />\r\n            <button\r\n                class=\"icon-container\"\r\n                (click)=\"datepicker.toggle()\"\r\n                type=\"button\"\r\n                [disabled]=\"disabled\"\r\n            >\r\n                <i\r\n                    class=\"mdi mdi-calendar-range\"\r\n                    *ngIf=\"!datepicker.isOpen()\"\r\n                ></i>\r\n                <i\r\n                    class=\"mdi mdi-check\"\r\n                    *ngIf=\"datepicker.isOpen()\"\r\n                ></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<ng-template #footerTemplate>\r\n    <div\r\n        class=\"buttons-container\"\r\n        *ngIf=\"showFooterTemplate\"\r\n    >\r\n        <button\r\n            class=\"button\"\r\n            (click)=\"cancelSelection(); datepicker.close()\"\r\n        >\r\n            Cancel\r\n        </button>\r\n        <button\r\n            class=\"button\"\r\n            [ngClass]=\"{ disabled: disableApplyBtn }\"\r\n            [disabled]=\"disableApplyBtn\"\r\n            (click)=\"applySelection(); datepicker.close()\"\r\n        >\r\n            Apply\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}::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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#2962ff}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}div.padding-class{padding:0 12px}:host::ng-deep div.ngb-dp-arrow{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{border-radius:0;background-color:#fff!important}:host::ng-deep div.ngb-dp-header{padding:.5rem 0 0!important;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:8px .25rem;color:#000;display:inline-block;height:2rem!important;width:2.2rem!important;font-size:var(--week-calendar-week-fs)}.custom-day.range{background-color:#268bff!important;color:#fff!important}.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!important;color:#000!important;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:#fff;border:none}input#datepicker-input{color:#202b47;cursor:default;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;padding-block:5px}input#datepicker-input:focus{box-shadow:none}div.input-group{border:1px solid #b7b7b7;border-radius:2px}.calendar-label{font-family:Roboto;font-size:var(--dropdown-label-fs);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:12px}.dp-hidden .input-group{border-bottom:none}.dp-hidden .input-group .form-control{height:24px}:host::ng-deep ngb-datepicker-navigation-select>.form-select:focus{box-shadow:none!important;border:1px solid #c2cfd6!important}:host::ng-deep .ngb-dp-day,:host::ng-deep .ngb-dp-weekday,:host::ng-deep .ngb-dp-week-number{width:2.2rem!important}:host ::ng-deep .input-group ngb-datepicker.dropdown-menu.show{margin-left:-1px!important}:host ::ng-deep .input-group{flex-wrap:nowrap}:host ::ng-deep .input-group .ngb-dp-day{color:#000}:host ::ng-deep .ngb-dp-weekdays{border-top:none}:host ::ng-deep .ngb-dp-month .ngb-dp-week:last-child{padding-bottom:6px}:host ::ng-deep .input-group ngb-datepicker.dropdown-menu{box-shadow:0 6px 12px #0000002d}\n"] }]
         }], ctorParameters: () => [{ type: AnnaDateTimeFormatService }], propDecorators: { maxDate: [{
                 type: Input
             }], autoClose: [{
@@ -1510,13 +1550,13 @@ class AnnaWeekCalendarComponent {
     closeDatepicker(datepickerRef) {
         datepickerRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaWeekCalendarComponent, deps: [{ token: i1.NgbCalendar }, { token: i1.NgbDatepickerConfig }, { token: AnnaDateTimeFormatService }, { token: AnnaGlobalConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaWeekCalendarComponent, isStandalone: true, selector: "anna-core-week-calendar-filter-lib", inputs: { selectedFromDate: "selectedFromDate", selectedEndDate: "selectedEndDate", disabledDates: "disabledDates", maxDate: "maxDate", minDate: "minDate", config: "config" }, outputs: { applyWeekCalendarChanges: "applyWeekCalendarChanges", calendarToggled: "calendarToggled" }, usesOnChanges: true, ngImport: i0, template: "<form\r\n    class=\"form-inline\"\r\n    *ngIf=\"config.showAsDropdown\"\r\n>\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker d-none\"\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                [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 class=\"weeknumbers-label\"> &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\r\n                            class=\"material-icons next-round-btn\"\r\n                            (click)=\"previousWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n                        class=\"mdi mdi-menu-down\"\r\n                        *ngIf=\"!datepicker.isOpen()\"\r\n                        (click)=\"datepicker.open()\"\r\n                    ></i>\r\n                    <i\r\n                        class=\"mdi mdi-menu-up\"\r\n                        *ngIf=\"datepicker.isOpen()\"\r\n                        (click)=\"isDropdownOpenedForCalendar(datepicker)\"\r\n                    ></i>\r\n                    <div class=\"right\">\r\n                        <span\r\n                            class=\"material-icons round-btn\"\r\n                            (click)=\"nextWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n        class=\"form-group\"\r\n        *ngIf=\"config.selectMultipleWeeks\"\r\n    >\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\r\n                    *ngIf=\"!multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-down multiselect-input-arrow\"\r\n                ></i>\r\n                <i\r\n                    *ngIf=\"multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-up multiselect-input-arrow\"\r\n                ></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 apply-btn\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right cancel-btn\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #t\r\n    let-date\r\n    let-focused=\"focused\"\r\n    let-disabled=\"disabled\"\r\n>\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", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}: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;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!important;color:#000!important;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{background-color:#268bff!important;color:#fff!important;font-weight:600}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}: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:#fff!important}.weeknumbers-label{position:relative;left:30px;font-size:12px}.apply-btn{background-color:#268bff;color:#fff}.cancel-btn{background-color:#268bff1f;color:#268bff}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaWeekCalendarComponent, deps: [{ token: i1$1.NgbCalendar }, { token: i1$1.NgbDatepickerConfig }, { token: AnnaDateTimeFormatService }, { token: AnnaGlobalConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaWeekCalendarComponent, isStandalone: true, selector: "anna-core-week-calendar-filter-lib", inputs: { selectedFromDate: "selectedFromDate", selectedEndDate: "selectedEndDate", disabledDates: "disabledDates", maxDate: "maxDate", minDate: "minDate", config: "config" }, outputs: { applyWeekCalendarChanges: "applyWeekCalendarChanges", calendarToggled: "calendarToggled" }, usesOnChanges: true, ngImport: i0, template: "<form\r\n    class=\"form-inline\"\r\n    *ngIf=\"config.showAsDropdown\"\r\n>\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker d-none\"\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                [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 class=\"weeknumbers-label\"> &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\r\n                            class=\"material-icons next-round-btn\"\r\n                            (click)=\"previousWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n                        class=\"mdi mdi-menu-down\"\r\n                        *ngIf=\"!datepicker.isOpen()\"\r\n                        (click)=\"datepicker.open()\"\r\n                    ></i>\r\n                    <i\r\n                        class=\"mdi mdi-menu-up\"\r\n                        *ngIf=\"datepicker.isOpen()\"\r\n                        (click)=\"isDropdownOpenedForCalendar(datepicker)\"\r\n                    ></i>\r\n                    <div class=\"right\">\r\n                        <span\r\n                            class=\"material-icons round-btn\"\r\n                            (click)=\"nextWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n        class=\"form-group\"\r\n        *ngIf=\"config.selectMultipleWeeks\"\r\n    >\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\r\n                    *ngIf=\"!multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-down multiselect-input-arrow\"\r\n                ></i>\r\n                <i\r\n                    *ngIf=\"multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-up multiselect-input-arrow\"\r\n                ></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 apply-btn\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right cancel-btn\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #t\r\n    let-date\r\n    let-focused=\"focused\"\r\n    let-disabled=\"disabled\"\r\n>\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", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}: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;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!important;color:#000!important;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{background-color:#268bff!important;color:#fff!important;font-weight:600}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}: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:#fff!important}.weeknumbers-label{position:relative;left:30px;font-size:12px}.apply-btn{background-color:#268bff;color:#fff}.cancel-btn{background-color:#268bff1f;color:#268bff}:host ::ng-deep .input-group{flex-wrap:nowrap}:host ::ng-deep .input-group .ngb-dp-day{color:#000}:host ::ng-deep .ngb-dp-weekdays{border-top:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaWeekCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "anna-core-week-calendar-filter-lib", imports: [NgIf, FormsModule, NgbInputDatepicker, NgClass, NgbDatepicker], template: "<form\r\n    class=\"form-inline\"\r\n    *ngIf=\"config.showAsDropdown\"\r\n>\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker d-none\"\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                [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 class=\"weeknumbers-label\"> &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\r\n                            class=\"material-icons next-round-btn\"\r\n                            (click)=\"previousWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n                        class=\"mdi mdi-menu-down\"\r\n                        *ngIf=\"!datepicker.isOpen()\"\r\n                        (click)=\"datepicker.open()\"\r\n                    ></i>\r\n                    <i\r\n                        class=\"mdi mdi-menu-up\"\r\n                        *ngIf=\"datepicker.isOpen()\"\r\n                        (click)=\"isDropdownOpenedForCalendar(datepicker)\"\r\n                    ></i>\r\n                    <div class=\"right\">\r\n                        <span\r\n                            class=\"material-icons round-btn\"\r\n                            (click)=\"nextWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n        class=\"form-group\"\r\n        *ngIf=\"config.selectMultipleWeeks\"\r\n    >\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\r\n                    *ngIf=\"!multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-down multiselect-input-arrow\"\r\n                ></i>\r\n                <i\r\n                    *ngIf=\"multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-up multiselect-input-arrow\"\r\n                ></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 apply-btn\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right cancel-btn\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #t\r\n    let-date\r\n    let-focused=\"focused\"\r\n    let-disabled=\"disabled\"\r\n>\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", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}: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;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!important;color:#000!important;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{background-color:#268bff!important;color:#fff!important;font-weight:600}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}: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:#fff!important}.weeknumbers-label{position:relative;left:30px;font-size:12px}.apply-btn{background-color:#268bff;color:#fff}.cancel-btn{background-color:#268bff1f;color:#268bff}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgbCalendar }, { type: i1.NgbDatepickerConfig }, { type: AnnaDateTimeFormatService }, { type: AnnaGlobalConfigService }], propDecorators: { selectedFromDate: [{
+            args: [{ selector: "anna-core-week-calendar-filter-lib", imports: [NgIf, FormsModule, NgbInputDatepicker, NgClass, NgbDatepicker], template: "<form\r\n    class=\"form-inline\"\r\n    *ngIf=\"config.showAsDropdown\"\r\n>\r\n    <div class=\"form-group hidden\">\r\n        <div class=\"input-group\">\r\n            <input\r\n                name=\"datepicker d-none\"\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                [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 class=\"weeknumbers-label\"> &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\r\n                            class=\"material-icons next-round-btn\"\r\n                            (click)=\"previousWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n                        class=\"mdi mdi-menu-down\"\r\n                        *ngIf=\"!datepicker.isOpen()\"\r\n                        (click)=\"datepicker.open()\"\r\n                    ></i>\r\n                    <i\r\n                        class=\"mdi mdi-menu-up\"\r\n                        *ngIf=\"datepicker.isOpen()\"\r\n                        (click)=\"isDropdownOpenedForCalendar(datepicker)\"\r\n                    ></i>\r\n                    <div class=\"right\">\r\n                        <span\r\n                            class=\"material-icons round-btn\"\r\n                            (click)=\"nextWeek()\"\r\n                        >\r\n                            navigate_next\r\n                        </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\r\n        class=\"form-group\"\r\n        *ngIf=\"config.selectMultipleWeeks\"\r\n    >\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\r\n                    *ngIf=\"!multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-down multiselect-input-arrow\"\r\n                ></i>\r\n                <i\r\n                    *ngIf=\"multiSelectDropdownOpen\"\r\n                    class=\"mdi mdi-menu-up multiselect-input-arrow\"\r\n                ></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 apply-btn\"\r\n        (click)=\"applyChanges(); closeDatepicker(datepicker)\"\r\n    >\r\n        Apply\r\n    </button>\r\n    <button\r\n        class=\"btn btn-primary btn-sm m-2 float-right cancel-btn\"\r\n        (click)=\"revertDates(); closeDatepicker(datepicker)\"\r\n    >\r\n        Cancel\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #t\r\n    let-date\r\n    let-focused=\"focused\"\r\n    let-disabled=\"disabled\"\r\n>\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", styles: [":host ::ng-deep .ngb-dp-arrow button:disabled{color:#4a4a4a;background-color:#fff;opacity:.25;cursor:not-allowed}:host ::ng-deep .ngb-dp-arrow button:disabled .ngb-dp-navigation-chevron{color:#4a4a4a}:host ::ng-deep .ngb-dp-arrow button .ngb-dp-navigation-chevron{color:#000}: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;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!important;color:#000!important;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{background-color:#268bff!important;color:#fff!important;font-weight:600}.custom-day:hover{background-color:#d9e1e6;border-radius:.25rem;color:#bdbdbd}: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:#fff!important}.weeknumbers-label{position:relative;left:30px;font-size:12px}.apply-btn{background-color:#268bff;color:#fff}.cancel-btn{background-color:#268bff1f;color:#268bff}:host ::ng-deep .input-group{flex-wrap:nowrap}:host ::ng-deep .input-group .ngb-dp-day{color:#000}:host ::ng-deep .ngb-dp-weekdays{border-top:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgbCalendar }, { type: i1$1.NgbDatepickerConfig }, { type: AnnaDateTimeFormatService }, { type: AnnaGlobalConfigService }], propDecorators: { selectedFromDate: [{
                 type: Input
             }], selectedEndDate: [{
                 type: Input
@@ -1782,7 +1822,7 @@ class AnnaFilterService {
             const formatNumber = (num) => parseFloat(num.toFixed(2));
             if (Math.abs(data) >= 1000) {
                 const formatted = formatNumber(Math.abs(data) / 1000);
-                return `${data < 0 ? '-' : ''}${formatted}k%`;
+                return `${data < 0 ? "-" : ""}${formatted}k%`;
             }
             return `${formatNumber(data)}%`;
         };
@@ -1790,9 +1830,9 @@ class AnnaFilterService {
             const formatNumber = (num) => parseFloat(num.toFixed(2));
             if (Math.abs(data) >= 1000) {
                 const formatted = formatNumber(Math.abs(data) / 1000);
-                return `${data < 0 ? '-' : ''}$${formatted}k`;
+                return `${data < 0 ? "-" : ""}$${formatted}k`;
             }
-            return `${data < 0 ? '-' : ''}$${formatNumber(Math.abs(data))}`;
+            return `${data < 0 ? "-" : ""}$${formatNumber(Math.abs(data))}`;
         };
         this.normalTranslateFunction = (data) => {
             const formatNumber = (num) => parseFloat(num.toFixed(2));
@@ -1972,6 +2012,7 @@ class AnnaFilterService {
             "bookedGI",
             "projectedGRP",
             "projectedGI",
+            "postedGi",
             "budget",
             "bookedImps",
             "postedImps",
@@ -4019,7 +4060,7 @@ class AnnaColumnSliderFilterComponent {
         this.filterAppliedToTable.emit(this.tableData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaColumnSliderFilterComponent, deps: [{ token: AnnaFilterService }, { token: AnnaSortService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaColumnSliderFilterComponent, isStandalone: true, selector: "anna-core-anna-column-slider-filter", inputs: { filterTabObjects: "filterTabObjects", isLurAndCsrComponent: "isLurAndCsrComponent", tableData: "tableData", showFilterHeaderTabs: "showFilterHeaderTabs", clonedTableData: "clonedTableData" }, outputs: { closeTooltip: "closeTooltip", filterAppliedToTable: "filterAppliedToTable", getSortType: "getSortType", sortingAppliedToTable: "sortingAppliedToTable" }, ngImport: i0, template: "<div\r\n    class=\"radio-container\"\r\n    *ngIf=\"showFilterHeaderTabs\"\r\n>\r\n    <div *ngFor=\"let data of filterTabObjects\">\r\n        <p\r\n            class=\"filter-tab\"\r\n            [title]=\"data.label\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data, true)\"\r\n            [ngClass]=\"{ active: annaFilterService.selectedRadio === data.key }\"\r\n            *ngIf=\"filterTabObjects.length > 0\"\r\n        >\r\n            {{ data.label }}\r\n        </p>\r\n    </div>\r\n</div>\r\n\r\n<anna-core-sort-lib\r\n    *ngIf=\"showSortComponent\"\r\n    [ngClass]=\"{ 'no-bottom-border': !showFilterComponent }\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n    [sortObjectKey]=\"annaFilterService.selectedRadio\"\r\n></anna-core-sort-lib>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <button\r\n        class=\"column-clear-all\"\r\n        [disabled]=\"disableColumnClearAllBtn\"\r\n        (click)=\"clearColumnFilter()\"\r\n    >\r\n        Clear filter\r\n    </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            *ngIf=\"!showEmptySpaceForSlider && options\"\r\n            [ngClass]=\"{\r\n                'show-min': sliderMinValue !== options.floor,\r\n                'show-max': sliderMaxValue !== options.ceil\r\n            }\"\r\n            class=\"filter-slider\"\r\n            [(value)]=\"sliderEnteredMinValue\"\r\n            [(highValue)]=\"sliderEnteredMaxValue\"\r\n            [options]=\"options\"\r\n        ></ngx-slider>\r\n        <div\r\n            *ngIf=\"showEmptySpaceForSlider\"\r\n            class=\"slider-placeholder\"\r\n        ></div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button\r\n        class=\"button\"\r\n        (click)=\"cancelSliderFilter()\"\r\n    >\r\n        Cancel\r\n    </button>\r\n    <button\r\n        class=\"button\"\r\n        [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n        (click)=\"applyFilters()\"\r\n        [disabled]=\"disableSliderApplyButton\"\r\n    >\r\n        Apply\r\n    </button>\r\n</div>\r\n", styles: [".sort-btn{background:#fff;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:var(--sort-label-fs);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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#2962ff}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4$1.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaColumnSliderFilterComponent, isStandalone: true, selector: "anna-core-anna-column-slider-filter", inputs: { filterTabObjects: "filterTabObjects", isLurAndCsrComponent: "isLurAndCsrComponent", tableData: "tableData", showFilterHeaderTabs: "showFilterHeaderTabs", clonedTableData: "clonedTableData" }, outputs: { closeTooltip: "closeTooltip", filterAppliedToTable: "filterAppliedToTable", getSortType: "getSortType", sortingAppliedToTable: "sortingAppliedToTable" }, ngImport: i0, template: "<div\r\n    class=\"radio-container\"\r\n    *ngIf=\"showFilterHeaderTabs\"\r\n>\r\n    <div *ngFor=\"let data of filterTabObjects\">\r\n        <p\r\n            class=\"filter-tab\"\r\n            [title]=\"data.label\"\r\n            (click)=\"populateTooltipDataBasedOnSelectedRadio(data, true)\"\r\n            [ngClass]=\"{ active: annaFilterService.selectedRadio === data.key }\"\r\n            *ngIf=\"filterTabObjects.length > 0\"\r\n        >\r\n            {{ data.label }}\r\n        </p>\r\n    </div>\r\n</div>\r\n\r\n<anna-core-sort-lib\r\n    *ngIf=\"showSortComponent\"\r\n    [ngClass]=\"{ 'no-bottom-border': !showFilterComponent }\"\r\n    (sortOptionClicked)=\"storeSortTypeInTempVariable($event)\"\r\n    [sortObjectKey]=\"annaFilterService.selectedRadio\"\r\n></anna-core-sort-lib>\r\n\r\n<ng-container *ngIf=\"showFilterComponent\">\r\n    <button\r\n        class=\"column-clear-all\"\r\n        [disabled]=\"disableColumnClearAllBtn\"\r\n        (click)=\"clearColumnFilter()\"\r\n    >\r\n        Clear filter\r\n    </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            *ngIf=\"!showEmptySpaceForSlider && options\"\r\n            [ngClass]=\"{\r\n                'show-min': sliderMinValue !== options.floor,\r\n                'show-max': sliderMaxValue !== options.ceil\r\n            }\"\r\n            class=\"filter-slider\"\r\n            [(value)]=\"sliderEnteredMinValue\"\r\n            [(highValue)]=\"sliderEnteredMaxValue\"\r\n            [options]=\"options\"\r\n        ></ngx-slider>\r\n        <div\r\n            *ngIf=\"showEmptySpaceForSlider\"\r\n            class=\"slider-placeholder\"\r\n        ></div>\r\n    </div>\r\n</ng-container>\r\n\r\n<div class=\"buttons-container\">\r\n    <button\r\n        class=\"button\"\r\n        (click)=\"cancelSliderFilter()\"\r\n    >\r\n        Cancel\r\n    </button>\r\n    <button\r\n        class=\"button\"\r\n        [ngClass]=\"{ disabled: disableSliderApplyButton }\"\r\n        (click)=\"applyFilters()\"\r\n        [disabled]=\"disableSliderApplyButton\"\r\n    >\r\n        Apply\r\n    </button>\r\n</div>\r\n", styles: [".sort-btn{background:#fff;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:var(--sort-label-fs);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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.custom-column-checkbox-checked,.custom-column-checkbox-unchecked{font-size:.875rem;cursor:pointer}.custom-column-checkbox-checked{color:#268bff}.custom-column-checkbox-unchecked{color:#2962ff}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AnnaSortComponent, selector: "anna-core-sort-lib", inputs: ["sortObjectKey"], outputs: ["sortOptionClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgxSliderModule }, { kind: "component", type: i4$2.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaColumnSliderFilterComponent, decorators: [{
             type: Component,
@@ -4419,7 +4460,7 @@ class AnnaSingleSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSingleSelectComponent, deps: [{ token: AnnaGlobalConfigService }, { token: AnnaFilterSearchedTextPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaSingleSelectComponent, isStandalone: true, selector: "anna-core-single-select", inputs: { config: "config", loading: "loading", showAdditionalDataInSelectedText: "showAdditionalDataInSelectedText", disabled: "disabled", items: "items", selectedItem: "selectedItem", keyToUseForDisplay: "keyToUseForDisplay", keyToUseForCheckingSelectedItem: "keyToUseForCheckingSelectedItem", hideDropdownArrow: "hideDropdownArrow", borderbottomObject: "borderbottomObject", defaultDropdownHeight: "defaultDropdownHeight", itemsToHideInDropdownIds: "itemsToHideInDropdownIds", showClearSelection: "showClearSelection" }, outputs: { valueChanged: "valueChanged", dropdownClosedEvent: "dropdownClosedEvent", dropdownOpenedEvent: "dropdownOpenedEvent", clearSelectionClickedEvent: "clearSelectionClickedEvent" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button\r\n    id=\"dropdown-trigger\"\r\n    #dropdown\r\n    #t=\"matMenuTrigger\"\r\n    (menuClosed)=\"dropdownClosed()\"\r\n    (menuOpened)=\"dropdownOpened()\"\r\n    [matMenuTriggerFor]=\"contextMenu\"\r\n    [disabled]=\"disabled || loading\"\r\n>\r\n    <span\r\n        class=\"placeholder\"\r\n        *ngIf=\"!selectedItem && config\"\r\n        >{{ config.placeholder }}</span\r\n    >\r\n    <span\r\n        class=\"selected-item\"\r\n        [class]=\"selectedItem.class\"\r\n        annaCoreShowEllipsisTextOnHover\r\n        *ngIf=\"selectedItem\"\r\n    >\r\n        <ng-container *ngIf=\"(selectedItem | AnnatypeofData) === 'object'; else stringTypeTemplate\">\r\n            {{ selectedItem[keyToUseForDisplay] }}\r\n            <ng-container *ngIf=\"showAdditionalDataInSelectedText && selectedItem && selectedItem?.additionalData\">\r\n                <span [class]=\"selectedItem?.additionalClass\">{{ selectedItem?.additionalData }} </span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #stringTypeTemplate>\r\n            {{ selectedItem }}\r\n        </ng-template>\r\n    </span>\r\n    <div\r\n        *ngIf=\"loading\"\r\n        [ngClass]=\"{ 'spinner-for-button-directive': loading }\"\r\n    ></div>\r\n\r\n    <ng-container *ngIf=\"!loading && !hideDropdownArrow\">\r\n        <i\r\n            *ngIf=\"!t.menuOpen\"\r\n            class=\"mdi mdi-menu-down icon\"\r\n        ></i>\r\n        <i\r\n            *ngIf=\"t.menuOpen\"\r\n            class=\"mdi mdi-menu-up icon\"\r\n        ></i>\r\n    </ng-container>\r\n</button>\r\n<ng-content select=\".role-tooltip-icon\"></ng-content>\r\n<mat-menu\r\n    backdropClass=\"single-select-dropdown\"\r\n    [yPosition]=\"yPosition\"\r\n    #contextMenu=\"matMenu\"\r\n>\r\n    <ng-template matMenuContent>\r\n        <div\r\n            class=\"{{ config.classes }}\"\r\n            [style.width.px]=\"width\"\r\n        >\r\n            <div\r\n                class=\"gap\"\r\n                *ngIf=\"config.showSearchBar\"\r\n            ></div>\r\n            <div\r\n                *ngIf=\"showClearSelection\"\r\n                class=\"clear-selection\"\r\n            >\r\n                <a\r\n                    (click)=\"clearSelectionClicked()\"\r\n                    [ngClass]=\"{ disabled: !selectedItem }\"\r\n                    >Clear selection</a\r\n                >\r\n            </div>\r\n            <section\r\n                *ngIf=\"config.showSearchBar\"\r\n                class=\"search-bar\"\r\n            >\r\n                <i class=\"mi mdi-search search-icon\"></i>\r\n                <input\r\n                    type=\"text\"\r\n                    [(ngModel)]=\"searchFor\"\r\n                    placeholder=\"Search\"\r\n                    (ngModelChange)=\"updateHeight()\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                />\r\n            </section>\r\n            <cdk-virtual-scroll-viewport\r\n                class=\"dropdown-data-container\"\r\n                itemSize=\"18\"\r\n                [style.height.px]=\"heightOfCheckboxTooltipFilter\"\r\n            >\r\n                <ul\r\n                    class=\"single-select-ul\"\r\n                    [style.width.px]=\"width\"\r\n                >\r\n                    <ng-container *ngIf=\"items && (items[0] | AnnatypeofData) === 'object'; else stringTypeTemplate\">\r\n                        <li\r\n                            annaCoreShowEllipsisTextOnHover\r\n                            *cdkVirtualFor=\"\r\n                                let item of items | AnnafilterSearchedText: searchFor : keyToUseForDisplay;\r\n                                let last = last;\r\n                                trackBy: trackByFn\r\n                            \"\r\n                            [ngClass]=\"{\r\n                                active:\r\n                                    selectedItem &&\r\n                                    selectedItem[keyToUseForCheckingSelectedItem] ===\r\n                                        item[keyToUseForCheckingSelectedItem],\r\n                                'show-bottom-border': !last && borderbottomObject[item.id],\r\n                                disabled: item.isDisabled\r\n                            }\"\r\n                            (click)=\"itemSelected(item, $event)\"\r\n                        >\r\n                            <span [class]=\"item.class\"> {{ item[keyToUseForDisplay] }} </span>\r\n                            <ng-container *ngIf=\"item && item.additionalData\">\r\n                                <span\r\n                                    class=\"ml-0\"\r\n                                    [class]=\"item.additionalClass\"\r\n                                >\r\n                                    {{ item?.additionalData }}\r\n                                </span>\r\n                            </ng-container>\r\n                        </li>\r\n\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"noDataCase\"\r\n                            [ngTemplateOutletContext]=\"{ items: items }\"\r\n                        ></ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-template #stringTypeTemplate>\r\n                        <ng-container\r\n                            *ngFor=\"\r\n                                let item of items | AnnafilterSearchedText: searchFor : keyToUseForDisplay;\r\n                                trackBy: trackByFn\r\n                            \"\r\n                        >\r\n                            <li\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                [ngClass]=\"{ active: selectedItem && selectedItem === item }\"\r\n                                (click)=\"itemSelected(item, $event)\"\r\n                            >\r\n                                <span> {{ item }} </span>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"noDataCase\"\r\n                            [ngTemplateOutletContext]=\"{ items: items }\"\r\n                        ></ng-container>\r\n                    </ng-template>\r\n                </ul>\r\n            </cdk-virtual-scroll-viewport>\r\n        </div>\r\n    </ng-template>\r\n</mat-menu>\r\n\r\n<ng-template\r\n    #noDataCase\r\n    let-items=\"items\"\r\n>\r\n    <li\r\n        annaCoreShowEllipsisTextOnHover\r\n        *ngIf=\"(items | AnnafilterSearchedText: searchFor : keyToUseForDisplay)?.length === 0\"\r\n    >\r\n        <span> No data found </span>\r\n    </li>\r\n</ng-template>\r\n", styles: ["#dropdown-trigger{height:1.5rem;background:#fff;border-radius:2px;border:1px solid #b7b7b7;width:100%;text-align:left;display:flex;align-items:center}#dropdown-trigger:disabled{background-color:#bdbdbd;opacity:.5}#dropdown-trigger:disabled .placeholder,#dropdown-trigger:disabled .icon{color:#000}.placeholder{color:#bdbdbd;width:100%;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;opacity:1!important}.icon{font-size:1.125rem;float:right;margin-left:auto}.search-bar{margin:0 7px 8px;border:1px solid #b7b7b7;height:24px;border-radius:2px}.search-bar input{outline:none;border:none;position:relative;bottom:4px;width:calc(100% - 29px);font-size:var(--dropdown-text-fs)}.search-bar .search-icon{font-size:var(--multi-select-dropdown-checkbox-fs);color:#9b9b9b;margin:5px}.search-bar .close-icon{cursor:pointer}ul{overflow-y:auto;padding-left:0;padding-bottom:0;margin-bottom:0;max-height:calc(50vh - 80px)!important}li{list-style-type:none;cursor:pointer;padding-inline:10px;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:2.14;letter-spacing:normal;color:#4a4a4a;width:100%}ul::-webkit-scrollbar{width:4px;height:4px}ul::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)}ul::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}li:hover{background:#ebebeb}li.active{color:#fff;background:#268bff}span.selected-item{background:transparent;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;width:calc(100% - 22px);display:inline-block;vertical-align:middle}.ellipsify,li,span.selected-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::ng-deep .cdk-overlay-container{z-index:1051}span.red-color-text{color:#f44336!important}span.additional-data-color-text{color:#b7b6b6!important}span.italic{font-style:italic}.spinner-for-button-directive{left:0;margin-left:auto}.spinner-for-button-directive span.additional-data-color-text{color:#000}::ng-deep .mat-menu-panel{min-height:auto!important}.small-text li{font-size:12px!important}.ml-0{margin-left:0}#dropdown-trigger:disabled{cursor:default!important}#dropdown-trigger:disabled span{color:#4a4a4a!important;cursor:default!important}::ng-deep .mat-mdc-menu-panel.mat-elevation-z8{box-shadow:var(--dropdown-box-shadow)}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content{background-color:#fff;padding:0!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content.mdc-list{background-color:#fff}::ng-deep .mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:none!important}::ng-deep .mat-mdc-menu-panel .clear-selection{margin:0 7px!important}::ng-deep .mat-mdc-menu-panel .clear-selection a{color:var(--primary-color)!important;text-decoration:underline!important;font-size:12px!important}::ng-deep .mat-mdc-menu-panel .clear-selection a.disabled{color:#4a4a4a!important;pointer-events:none;cursor:not-allowed;opacity:.5}li{background-color:#fff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.5rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container li.disabled{opacity:.5;cursor:default}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.1875rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:#d3d3d3}::ng-deep ul.single-select-ul{max-height:none!important}li.show-bottom-border{border-bottom:1px solid #e6e6e6}::ng-deep .no-wrap-text ul li{line-height:1.41!important;padding-top:4px;padding-bottom:4px}::ng-deep .no-wrap-text ul li span{white-space:normal!important}.gap{height:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AnnaFilterSearchedTextPipe, name: "AnnafilterSearchedText" }, { kind: "pipe", type: AnnaTypeofDataPipe, name: "AnnatypeofData" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaSingleSelectComponent, isStandalone: true, selector: "anna-core-single-select", inputs: { config: "config", loading: "loading", showAdditionalDataInSelectedText: "showAdditionalDataInSelectedText", disabled: "disabled", items: "items", selectedItem: "selectedItem", keyToUseForDisplay: "keyToUseForDisplay", keyToUseForCheckingSelectedItem: "keyToUseForCheckingSelectedItem", hideDropdownArrow: "hideDropdownArrow", borderbottomObject: "borderbottomObject", defaultDropdownHeight: "defaultDropdownHeight", itemsToHideInDropdownIds: "itemsToHideInDropdownIds", showClearSelection: "showClearSelection" }, outputs: { valueChanged: "valueChanged", dropdownClosedEvent: "dropdownClosedEvent", dropdownOpenedEvent: "dropdownOpenedEvent", clearSelectionClickedEvent: "clearSelectionClickedEvent" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button\r\n    id=\"dropdown-trigger\"\r\n    #dropdown\r\n    #t=\"matMenuTrigger\"\r\n    (menuClosed)=\"dropdownClosed()\"\r\n    (menuOpened)=\"dropdownOpened()\"\r\n    [matMenuTriggerFor]=\"contextMenu\"\r\n    [disabled]=\"disabled || loading\"\r\n>\r\n    <span\r\n        class=\"placeholder\"\r\n        *ngIf=\"!selectedItem && config\"\r\n        >{{ config.placeholder }}</span\r\n    >\r\n    <span\r\n        class=\"selected-item\"\r\n        [class]=\"selectedItem.class\"\r\n        annaCoreShowEllipsisTextOnHover\r\n        *ngIf=\"selectedItem\"\r\n    >\r\n        <ng-container *ngIf=\"(selectedItem | AnnatypeofData) === 'object'; else stringTypeTemplate\">\r\n            {{ selectedItem[keyToUseForDisplay] }}\r\n            <ng-container *ngIf=\"showAdditionalDataInSelectedText && selectedItem && selectedItem?.additionalData\">\r\n                <span [class]=\"selectedItem?.additionalClass\">{{ selectedItem?.additionalData }} </span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #stringTypeTemplate>\r\n            {{ selectedItem }}\r\n        </ng-template>\r\n    </span>\r\n    <div\r\n        *ngIf=\"loading\"\r\n        [ngClass]=\"{ 'spinner-for-button-directive': loading }\"\r\n    ></div>\r\n\r\n    <ng-container *ngIf=\"!loading && !hideDropdownArrow\">\r\n        <i\r\n            *ngIf=\"!t.menuOpen\"\r\n            class=\"mdi mdi-menu-down icon\"\r\n        ></i>\r\n        <i\r\n            *ngIf=\"t.menuOpen\"\r\n            class=\"mdi mdi-menu-up icon\"\r\n        ></i>\r\n    </ng-container>\r\n</button>\r\n<ng-content select=\".role-tooltip-icon\"></ng-content>\r\n<mat-menu\r\n    backdropClass=\"single-select-dropdown\"\r\n    [yPosition]=\"yPosition\"\r\n    #contextMenu=\"matMenu\"\r\n>\r\n    <ng-template matMenuContent>\r\n        <div\r\n            class=\"{{ config.classes }}\"\r\n            [style.width.px]=\"width\"\r\n        >\r\n            <div\r\n                class=\"gap\"\r\n                *ngIf=\"config.showSearchBar\"\r\n            ></div>\r\n            <div\r\n                *ngIf=\"showClearSelection\"\r\n                class=\"clear-selection\"\r\n            >\r\n                <a\r\n                    (click)=\"clearSelectionClicked()\"\r\n                    [ngClass]=\"{ disabled: !selectedItem }\"\r\n                    >Clear selection</a\r\n                >\r\n            </div>\r\n            <section\r\n                *ngIf=\"config.showSearchBar\"\r\n                class=\"search-bar\"\r\n            >\r\n                <i class=\"mi mdi-search search-icon\"></i>\r\n                <input\r\n                    type=\"text\"\r\n                    [(ngModel)]=\"searchFor\"\r\n                    placeholder=\"Search\"\r\n                    (ngModelChange)=\"updateHeight()\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                />\r\n            </section>\r\n            <cdk-virtual-scroll-viewport\r\n                class=\"dropdown-data-container\"\r\n                itemSize=\"18\"\r\n                [style.height.px]=\"heightOfCheckboxTooltipFilter\"\r\n            >\r\n                <ul\r\n                    class=\"single-select-ul\"\r\n                    [style.width.px]=\"width\"\r\n                >\r\n                    <ng-container *ngIf=\"items && (items[0] | AnnatypeofData) === 'object'; else stringTypeTemplate\">\r\n                        <li\r\n                            annaCoreShowEllipsisTextOnHover\r\n                            *cdkVirtualFor=\"\r\n                                let item of items | AnnafilterSearchedText: searchFor : keyToUseForDisplay;\r\n                                let last = last;\r\n                                trackBy: trackByFn\r\n                            \"\r\n                            [ngClass]=\"{\r\n                                active:\r\n                                    selectedItem &&\r\n                                    selectedItem[keyToUseForCheckingSelectedItem] ===\r\n                                        item[keyToUseForCheckingSelectedItem],\r\n                                'show-bottom-border': !last && borderbottomObject[item.id],\r\n                                disabled: item.isDisabled\r\n                            }\"\r\n                            (click)=\"itemSelected(item, $event)\"\r\n                        >\r\n                            <span [class]=\"item.class\"> {{ item[keyToUseForDisplay] }} </span>\r\n                            <ng-container *ngIf=\"item && item.additionalData\">\r\n                                <span\r\n                                    class=\"ml-0\"\r\n                                    [class]=\"item.additionalClass\"\r\n                                >\r\n                                    {{ item?.additionalData }}\r\n                                </span>\r\n                            </ng-container>\r\n                        </li>\r\n\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"noDataCase\"\r\n                            [ngTemplateOutletContext]=\"{ items: items }\"\r\n                        ></ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-template #stringTypeTemplate>\r\n                        <ng-container\r\n                            *ngFor=\"\r\n                                let item of items | AnnafilterSearchedText: searchFor : keyToUseForDisplay;\r\n                                trackBy: trackByFn\r\n                            \"\r\n                        >\r\n                            <li\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                [ngClass]=\"{ active: selectedItem && selectedItem === item }\"\r\n                                (click)=\"itemSelected(item, $event)\"\r\n                            >\r\n                                <span> {{ item }} </span>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"noDataCase\"\r\n                            [ngTemplateOutletContext]=\"{ items: items }\"\r\n                        ></ng-container>\r\n                    </ng-template>\r\n                </ul>\r\n            </cdk-virtual-scroll-viewport>\r\n        </div>\r\n    </ng-template>\r\n</mat-menu>\r\n\r\n<ng-template\r\n    #noDataCase\r\n    let-items=\"items\"\r\n>\r\n    <li\r\n        annaCoreShowEllipsisTextOnHover\r\n        *ngIf=\"(items | AnnafilterSearchedText: searchFor : keyToUseForDisplay)?.length === 0\"\r\n    >\r\n        <span> No data found </span>\r\n    </li>\r\n</ng-template>\r\n", styles: ["#dropdown-trigger{height:1.5rem;background:#fff;border-radius:2px;border:1px solid #b7b7b7;width:100%;text-align:left;display:flex;align-items:center}#dropdown-trigger:disabled{background-color:#bdbdbd;opacity:.5}#dropdown-trigger:disabled .placeholder,#dropdown-trigger:disabled .icon{color:#000}.placeholder{color:#bdbdbd;width:100%;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;opacity:1!important}.icon{font-size:1.125rem;float:right;margin-left:auto}.search-bar{margin:0 7px 8px;border:1px solid #b7b7b7;height:24px;border-radius:2px}.search-bar input{outline:none;border:none;position:relative;bottom:4px;width:calc(100% - 29px);font-size:var(--dropdown-text-fs)}.search-bar .search-icon{font-size:var(--multi-select-dropdown-checkbox-fs);color:#9b9b9b;margin:5px}.search-bar .close-icon{cursor:pointer}ul{overflow-y:auto;padding-left:0;padding-bottom:0;margin-bottom:0;max-height:calc(50vh - 80px)!important}li{list-style-type:none;cursor:pointer;padding-inline:10px;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:2.14;letter-spacing:normal;color:#4a4a4a;width:100%}ul::-webkit-scrollbar{width:4px;height:4px}ul::-webkit-scrollbar-track{border:1px solid rgba(0,0,0,.1)}ul::-webkit-scrollbar-thumb{border-radius:4px;background-color:#0006!important;border:1px solid rgba(0,0,0,.2)}li:hover{background:#ebebeb}li.active{color:#fff;background:#268bff}span.selected-item{background:transparent;font-family:Roboto;font-size:var(--dropdown-text-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4a4a;width:calc(100% - 22px);display:inline-block;vertical-align:middle}.ellipsify,li,span.selected-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::ng-deep .cdk-overlay-container{z-index:1051}span.red-color-text{color:#f44336!important}span.additional-data-color-text{color:#b7b6b6!important}span.italic{font-style:italic}.spinner-for-button-directive{left:0;margin-left:auto}.spinner-for-button-directive span.additional-data-color-text{color:#000}::ng-deep .mat-menu-panel{min-height:auto!important}.small-text li{font-size:12px!important}.ml-0{margin-left:0}#dropdown-trigger:disabled{cursor:default!important}#dropdown-trigger:disabled span{color:#4a4a4a!important;cursor:default!important}::ng-deep .mat-mdc-menu-panel.mat-elevation-z8{box-shadow:var(--dropdown-box-shadow)}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content{background-color:#fff;padding:0!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content.mdc-list{background-color:#fff}::ng-deep .mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:none!important}::ng-deep .mat-mdc-menu-panel .clear-selection{margin:0 7px!important}::ng-deep .mat-mdc-menu-panel .clear-selection a{color:var(--primary-color)!important;text-decoration:underline!important;font-size:12px!important}::ng-deep .mat-mdc-menu-panel .clear-selection a.disabled{color:#4a4a4a!important;pointer-events:none;cursor:not-allowed;opacity:.5}li{background-color:#fff}cdk-virtual-scroll-viewport.dropdown-data-container{max-height:12.5rem;width:100%;overflow-y:auto;overflow-x:hidden}cdk-virtual-scroll-viewport.dropdown-data-container li.disabled{opacity:.5;cursor:default}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar{width:.1875rem}cdk-virtual-scroll-viewport.dropdown-data-container::-webkit-scrollbar-thumb{color:#d3d3d3;background:#d3d3d3}::ng-deep ul.single-select-ul{max-height:none!important}li.show-bottom-border{border-bottom:1px solid #e6e6e6}::ng-deep .no-wrap-text ul li{line-height:1.41!important;padding-top:4px;padding-bottom:4px}::ng-deep .no-wrap-text ul li span{white-space:normal!important}.gap{height:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AnnaFilterSearchedTextPipe, name: "AnnafilterSearchedText" }, { kind: "pipe", type: AnnaTypeofDataPipe, name: "AnnatypeofData" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaSingleSelectComponent, decorators: [{
             type: Component,
@@ -4552,10 +4593,16 @@ class AnnaNonEditableGenericTableComponent {
         this.cdRef.detectChanges();
     }
     ngOnChanges(changes) {
+        if (changes.showSkeletonLoading) {
+            setTimeout(() => {
+                this.setTableHeight();
+            }, 0);
+        }
         if (changes &&
             changes.gtDimension &&
             changes.gtDimension.currentValue &&
-            this.setTableHeightWhenRowSizeIsFixed) {
+            this.setTableHeightWhenRowSizeIsFixed &&
+            !changes.showSkeletonLoading) {
             this.setTableHeight();
             this.setTableBottomBorder();
         }
@@ -4637,9 +4684,14 @@ class AnnaNonEditableGenericTableComponent {
         let viewportHeight = window.innerHeight;
         const { rowHeight } = this.gtDimension;
         const { headerHeight } = this.gtDimension;
-        const { dataOnTopHeight } = this.gtDimension;
-        const { marginFromBottom } = this.gtDimension;
+        // const { dataOnTopHeight } = this.gtDimension; // not used anymore
+        // const { marginFromBottom } = this.gtDimension;
         let actualTableHeight;
+        const element = document.getElementById("generic-table-conatiner");
+        const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
+        let dataOnTopHeight = 
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        element?.getBoundingClientRect()?.top + window?.scrollY + (hasHorizontalScrollbar ? 4 : 1);
         if (this.fixNumberOfRowsForPopup) {
             const maxNoOfRowsToDisplay = viewportHeight < 740 ? 5 : 10;
             this.maximumRowsWhichCanBeRenderedWithoutScroll = maxNoOfRowsToDisplay;
@@ -4648,8 +4700,11 @@ class AnnaNonEditableGenericTableComponent {
         else {
             const minHeightForTable = headerHeight + 3 * rowHeight;
             viewportHeight = viewportHeight <= dataOnTopHeight ? dataOnTopHeight + minHeightForTable : viewportHeight;
-            const heightLeftForTable = viewportHeight - dataOnTopHeight - marginFromBottom;
+            const heightLeftForTable = viewportHeight - dataOnTopHeight;
+            // const heightLeftForTable = viewportHeight - dataOnTopHeight - marginFromBottom;
             this.maximumRowsWhichCanBeRenderedWithoutScroll = Math.ceil((heightLeftForTable - headerHeight) / rowHeight);
+            // actualTableHeight = viewportHeight - dataOnTopHeight - marginFromBottom;
+            const marginFromBottom = 20;
             actualTableHeight = viewportHeight - dataOnTopHeight - marginFromBottom;
         }
         // 10 is extra just in case, also it increase scrollbar height, if we keep limit same as maximum no of rows then scrollbar height will be less indicating there is less content to scroll.
@@ -4668,6 +4723,7 @@ class AnnaNonEditableGenericTableComponent {
         this.numberOfSkeletonRows = this.maximumRowsWhichCanBeRenderedWithoutScroll
             ? Array(this.maximumRowsWhichCanBeRenderedWithoutScroll).fill(0)
             : Array(5).fill(0);
+        this.cdRef.detectChanges();
     }
     trackByFn(index) {
         return index;
@@ -5060,6 +5116,10 @@ class AnnaNonEditableGenericTableComponent {
         this.tooltipRadioTextMap.set("airDate", "Air Date");
         this.tooltipRadioTextMap.set("projectedImps", "Projected IMPS");
         this.tooltipRadioTextMap.set("postedImps", "Posted IMPS");
+        this.tooltipRadioTextMap.set("daypart", "Daypart");
+        this.tooltipRadioTextMap.set("projectedGi", "Projected GI");
+        this.tooltipRadioTextMap.set("postedGi", "Posted GI");
+        this.tooltipRadioTextMap.set("len", "Len");
     }
     selectOrUnselectCheckbox(rowData, columnKeys, isCheckboxSelected) {
         rowData[columnKeys] = !rowData[columnKeys];
@@ -5386,7 +5446,7 @@ class AnnaNonEditableGenericTableComponent {
         this.statusNoteTooltip = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaNonEditableGenericTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AnnaSortService }, { token: AnnaDateTimeFormatService }, { token: AnnaFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaNonEditableGenericTableComponent, isStandalone: true, 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", fixNumberOfRowsForPopup: "fixNumberOfRowsForPopup", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone", starredInProgress: "starredInProgress", clickableRow: "clickableRow", setTableHeightWhenRowSizeIsFixed: "setTableHeightWhenRowSizeIsFixed", tableBorderBottomClassRequired: "tableBorderBottomClassRequired", hideSomeTds: "hideSomeTds", tdsHaveRowSpan: "tdsHaveRowSpan", multipleTablesPresent: "multipleTablesPresent", showOrHideToggleForTotalRow: "showOrHideToggleForTotalRow" }, 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", gtInnerHTMLClicked: "gtInnerHTMLClicked", downloadSpotDetails: "downloadSpotDetails", clickableDataClicked: "clickableDataClicked", totalRowIconClicked: "totalRowIconClicked", notificationIconHover: "notificationIconHover", notificationIconHoverLeave: "notificationIconHoverLeave", editableInputEdited: "editableInputEdited", radioButtonMessageIconClicked: "radioButtonMessageIconClicked", statusNotePopupOpened: "statusNotePopupOpened", singleSelectDropdownValueEmit: "singleSelectDropdownValueEmit" }, viewQueries: [{ propertyName: "tableElementRef", first: true, predicate: ["tableElementRef"], descendants: true, static: true }, { propertyName: "textActionTooltipTemplateRef", first: true, predicate: ["textActionTooltipTemplate"], descendants: true }, { propertyName: "programChangeTooltipTemplateRef", first: true, predicate: ["programChangeTooltipTemplate"], descendants: true }, { propertyName: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    id=\"generic-table-conatiner\"\r\n    #tableElementRef\r\n    class=\"table-container {{ gtGeneralConfig?.tableOuterContainerName }} {{ tableBottomBorderClass }}\"\r\n    [ngClass]=\"{\r\n        'scroll-left-shadow-effect': isScrolledLeft,\r\n        'scroll-right-shadow-effect': !isScrollEnded,\r\n        'clickable-row': clickableRow,\r\n        'no-data-table': (isNoDataToDisplaySubject$ | async),\r\n        'table-with-show-hide-total-row-toggle': showOrHideToggleForTotalRow\r\n    }\"\r\n    (scroll)=\"onTableContainerScroll($event)\"\r\n>\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 < noOfRowsToCheck\r\n                    ? 'calc(' +\r\n                      (gtDimension.rowHeight * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight)) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <button\r\n            *ngIf=\"showOrHideToggleForTotalRow && !showSkeletonLoading && (isNoDataToDisplaySubject$ | async) === false\"\r\n            [ngClass]=\"{\r\n                'shift-toggle-top-on-total-row-click': !gtGeneralConfig.totalRow\r\n            }\"\r\n            class=\"show-or-hide-toggle-btn\"\r\n            (click)=\"showHideTotalRow()\"\r\n        >\r\n            <i\r\n                class=\"mdi mdi-menu-swap\"\r\n                tooltipClass=\"show-or-hide-toggle-tooltip\"\r\n                placement=\"auto\"\r\n                container=\"body\"\r\n                [ngbTooltip]=\"showOrHideToggleForTotalRowTooltip\"\r\n            ></i>\r\n        </button>\r\n        <table\r\n            class=\"gt\"\r\n            [ngClass]=\"tableClass\"\r\n            mat-table\r\n            [dataSource]=\"renderedData\"\r\n        >\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\"\r\n                (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"column.colName\"\r\n                *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\"\r\n            >\r\n                <td\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [attr.colspan]=\"column.colspan\"\r\n                    class=\"{{ column.class }}\"\r\n                >\r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a\r\n                            *ngFor=\"let data of column.actionData\"\r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\"\r\n                        >\r\n                            {{ data.name }}\r\n                        </a>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"column['isIconColumn']\">\r\n                        <i\r\n                            class=\"{{ column?.iconData?.class }}\"\r\n                            (click)=\"iconClickedInTotalRow(column?.colName)\"\r\n                        >\r\n                        </i>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong class=\"upper-label\"\r\n                            >{{ column.data }}\r\n                            <span\r\n                                class=\"red-text-totol-row\"\r\n                                *ngIf=\"column.additionalRedTextAfterData\"\r\n                                >{{ column.additionalRedTextAfterData }}</span\r\n                            ></strong\r\n                        >\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <br />\r\n                            <span\r\n                                *ngIf=\"\r\n                                    column.colName === 'total-potential-booked-unit' &&\r\n                                        gtGeneralConfig.component === 'RATING';\r\n                                    else columnLowerData\r\n                                \"\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 && 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 class=\"lower-label\">{{ column.lowerData }}</span>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage && gtGeneralConfig.component !== 'LUR_VIOLATIONS'\">\r\n                            <i\r\n                                class=\"{{ column.tooltipIconClass }}\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"column.tooltipMessage\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"top bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"gtGeneralConfig.component === 'LUR_VIOLATIONS' && column.tooltipMessage\">\r\n                            <i\r\n                                class=\"mi mdi-info-outline info-label\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationTotalRowToolTip\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"columnDef.headerInfo[0].objectKey\"\r\n                *ngFor=\"let columnDef of tableHeaders; trackBy: trackByFn\"\r\n            >\r\n                <th\r\n                    #tableHeader\r\n                    nowrap\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [style.width]=\"columnDef.width\"\r\n                >\r\n                    <div\r\n                        class=\"row mx-0\"\r\n                        *ngFor=\"let header of columnDef.headerInfo; let j = index\"\r\n                    >\r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            <ngx-skeleton-loader\r\n                                *ngIf=\"header.name == null\"\r\n                                count=\"1\"\r\n                                [theme]=\"{\r\n                                    height: '10px',\r\n                                    display: 'block',\r\n                                    width: columnDef.width,\r\n                                    'max-width': 'calc(100% - 20px)'\r\n                                }\"\r\n                            >\r\n                            </ngx-skeleton-loader>\r\n                            <ng-container *ngIf=\"header.name\">\r\n                                {{ header.name }}\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.tooltip && header.tooltip.tooltipMessage\">\r\n                                <i\r\n                                    class=\"{{ header['tooltip'].iconClass }}\"\r\n                                    [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                    #t=\"ngbTooltip\"\r\n                                    container=\"body\"\r\n                                    [ngbTooltip]=\"header.tooltip.tooltipMessage\"\r\n                                    container=\"body\"\r\n                                    placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                    tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                                >\r\n                                </i>\r\n                            </ng-container>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'impsInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"\r\n                                    header.tooltip && header.tooltip.name === 'spotsColumnEquivalizationMessageTooltip'\r\n                                \"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'underDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"underDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'overDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"overDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ratingInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rateInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ongoingRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'completedRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRate'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRate\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRtg\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedImps'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedImps\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'automationTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"automationTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rebateImpact'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rebateImpact\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'projectedImpsRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"projectedImpsRtg\"\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\r\n                            *ngIf=\"gtGeneralConfig.showAllColumnFilter\"\r\n                            class=\"sort-filter-container\"\r\n                        >\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"{{ filterAlignment }}\"\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top auto\"\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\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'lurViolationInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *matCellDef=\"let ROW_DATA\">\r\n                    <td\r\n                        mat-cell\r\n                        [style.background]=\"ROW_DATA.backgroundColor\"\r\n                        [style.border]=\"ROW_DATA.border\"\r\n                        class=\"{{ ROW_DATA.rowClass }}\"\r\n                        [ngClass]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'TdClass']\"\r\n                        [attr.rowspan]=\"tdsHaveRowSpan ? ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan'] : 1\"\r\n                        *ngIf=\"\r\n                            !hideSomeTds ||\r\n                            (hideSomeTds && !ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td'])\r\n                        \"\r\n                    >\r\n                        <ngx-skeleton-loader\r\n                            *ngIf=\"showSkeletonLoading\"\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '10px', display: 'block', marginBottom: '0' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && (isNoDataToDisplaySubject$ | async) === false\">\r\n                                <ng-container\r\n                                    *ngFor=\"\r\n                                        let subline of columnDef.headerInfo;\r\n                                        let subLineIndex = index;\r\n                                        trackBy: trackByFn\r\n                                    \"\r\n                                >\r\n                                    <div annaCoreShowEllipsisTextOnHover>\r\n                                        <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                            <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                                <i\r\n                                                    *ngIf=\"\r\n                                                        !(\r\n                                                            starredInProgress &&\r\n                                                            ROW_DATA.orderId === selectedStarredOrderId\r\n                                                        )\r\n                                                    \"\r\n                                                    [class]=\"ROW_DATA.iconClass\"\r\n                                                    [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    (click)=\"iconClicked(ROW_DATA, ROW_DATA.iconClass)\"\r\n                                                    ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                ></i>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        starredInProgress && ROW_DATA.orderId === selectedStarredOrderId\r\n                                                    \"\r\n                                                >\r\n                                                    <div\r\n                                                        class=\"spinner-for-button-directive\"\r\n                                                        [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    ></div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\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                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"\r\n                                                            action.showTooltip && action?.tooltipData\r\n                                                                ? action.tooltipData\r\n                                                                : null\r\n                                                        \"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                                <p\r\n                                                    [innerHTML]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    (click)=\"innerHTMLCellClicked($event, ROW_DATA)\"\r\n                                                ></p>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.showObjectKey\"\r\n                                                    >\r\n                                                        {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                    </span>\r\n\r\n                                                    <span\r\n                                                        class=\"pr-4 {{ action?.additionalTextClass }}\"\r\n                                                        *ngIf=\"action?.additionalText\"\r\n                                                    >\r\n                                                        {{ action?.additionalText }}\r\n                                                    </span>\r\n\r\n                                                    <anna-core-icon-column\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.svgOrIconName\"\r\n                                                        [componentName]=\"gtGeneralConfig.component\"\r\n                                                        [dataObject]=\"ROW_DATA\"\r\n                                                        [iconToShow]=\"action.svgOrIconName\"\r\n                                                        data-html=\"true\"\r\n                                                        [ngbTooltip]=\"tipContent\"\r\n                                                        [disableTooltip]=\"!action?.svgOrIconTooltipMsg\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        (columnIconClicked)=\"\r\n                                                            svgIconClicked(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].actionKey\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-template #tipContent>\r\n                                                            <div [innerHTML]=\"action?.svgOrIconTooltipMsg\"></div\r\n                                                        ></ng-template>\r\n                                                    </anna-core-icon-column>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <button\r\n                                                        *ngIf=\"text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        [ngbTooltip]=\"textActionTooltipTemplate\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                    >\r\n                                                        {{ text.name }}\r\n                                                    </button>\r\n\r\n                                                    <button\r\n                                                        *ngIf=\"!text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                    >\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':\r\n                                                            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':\r\n                                                            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\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                        ngbTooltip=\"tooltipContainingTableTemplate\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                                <a\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                    [class]=\"text.class\"\r\n                                                    (click)=\"onClickableDataClicked(ROW_DATA, text.id)\"\r\n                                                    >{{ text.name }}</a\r\n                                                >\r\n                                                <span\r\n                                                    *ngIf=\"\r\n                                                        subline.objectKey === 'displayBookedUnits' &&\r\n                                                        gtGeneralConfig.component === 'RATING'\r\n                                                    \"\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\"\r\n                                                        >get_app</span\r\n                                                    >\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            downloadInProgress &&\r\n                                                            ROW_DATA.inventoryCodeId ===\r\n                                                                selectedInventoryIdForDownload &&\r\n                                                            ROW_DATA.demographic === selectedDemographicForDownload\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"circularProgressBar\"\r\n                                                        ></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\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [class]=\"action.additionalTextBeforeLinkClass\"\r\n                                                        [innerHtml]=\"action.additionalTextBeforeLink\"\r\n                                                        ngbTooltip=\"{{ action.additionalTextBeforeLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalText\"\r\n                                                    ></span>\r\n\r\n                                                    <ng-container *ngIf=\"action && action.typeOfData === 'STRING'\">\r\n                                                        <span\r\n                                                            class=\"text-with-icon-and-text\"\r\n                                                            [ngClass]=\"{ 'reduced-width': action.showIcon }\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            >{{ action.data }}</span\r\n                                                        >\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        [id]=\"action.id\"\r\n                                                        *ngIf=\"action.showLink\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [class]=\"action.linkClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledLink }\"\r\n                                                        >{{ action.data }}</a\r\n                                                    >\r\n                                                    <span\r\n                                                        ngbTooltip=\"{{ action.additionalTextAfterLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action.additionalTextAfterLinkClass\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalAfterText\"\r\n                                                    >\r\n                                                        {{ action.additionalTextAfterLink }}\r\n                                                    </span>\r\n\r\n                                                    <ng-container *ngIf=\"action.showTooltip\">\r\n                                                        <ng-container *ngIf=\"action.tooltipData.innerHtml\">\r\n                                                            <i\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [class]=\"action.iconClass\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                placement=\"bottom auto\"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                                [ngbTooltip]=\"tooltipContainingTableTemplate\"\r\n                                                            >\r\n                                                            </i>\r\n                                                        </ng-container>\r\n\r\n                                                        <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                            <span\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                class=\"icon-tooltip-text\"\r\n                                                                (click)=\"\r\n                                                                    iconClickedOnStringIconActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        action.id,\r\n                                                                        columnDef.headerInfo[subLineIndex]\r\n                                                                    )\r\n                                                                \"\r\n                                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                [placement]=\"\r\n                                                                    action.tooltipPlacement\r\n                                                                        ? action.tooltipPlacement\r\n                                                                        : 'bottom auto'\r\n                                                                \"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                    action.tooltipClass\r\n                                                                }}\"\r\n                                                                [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                            >\r\n                                                                <i [class]=\"action.iconClass\"> </i>\r\n                                                                {{ action.additionalTextAfterIcon ?? \"\" }}\r\n                                                            </span>\r\n                                                            <ng-container *ngIf=\"action['showSvgIcon']\">\r\n                                                                <anna-core-anna-est-icon-template\r\n                                                                    class=\"float-right\"\r\n                                                                    *ngIf=\"action['svgIconName'] === 'anna-icon'\"\r\n                                                                    (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                    (mouseenter)=\"\r\n                                                                        mouseEnterOnStringTextActionType(\r\n                                                                            ROW_DATA,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                                .tooltipKey\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [placement]=\"\r\n                                                                        action.tooltipPlacement\r\n                                                                            ? action.tooltipPlacement\r\n                                                                            : 'bottom auto'\r\n                                                                    \"\r\n                                                                    tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                        action['tooltipClass']\r\n                                                                    }}\"\r\n                                                                    [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                                    container=\"body\"\r\n                                                                    [autoClose]=\"true\"\r\n                                                                >\r\n                                                                </anna-core-anna-est-icon-template>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </ng-container>\r\n\r\n                                                    <ng-container *ngIf=\"!action.showTooltip\">\r\n                                                        <i\r\n                                                            *ngIf=\"action.showIcon\"\r\n                                                            [class]=\"action.iconClass\"\r\n                                                            [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                            (click)=\"\r\n                                                                iconClickedOnStringIconActionType(\r\n                                                                    ROW_DATA,\r\n                                                                    action.id,\r\n                                                                    columnDef.headerInfo[subLineIndex]\r\n                                                                )\r\n                                                            \"\r\n                                                        >\r\n                                                        </i>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_OR_INPUT'\">\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]?.type ===\r\n                                                            'STRING';\r\n                                                        else inputBox\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [innerHtml]=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.value\r\n                                                        \"\r\n                                                    ></span>\r\n                                                </ng-container>\r\n\r\n                                                <ng-template #inputBox>\r\n                                                    <span class=\"input-box-container\">\r\n                                                        <input\r\n                                                            placeholder=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    ?.placeholder\r\n                                                            }}\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            class=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .className\r\n                                                            }}\"\r\n                                                            (keydown)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    false\r\n                                                                )\r\n                                                            \"\r\n                                                            (paste)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    true\r\n                                                                )\r\n                                                            \"\r\n                                                            (ngModelChange)=\"\r\n                                                                editableInputValueChanged(\r\n                                                                    $event,\r\n                                                                    ROW_DATA,\r\n                                                                    columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                )\r\n                                                            \"\r\n                                                            [ngModel]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .value\r\n                                                            \"\r\n                                                            [disabled]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .disabled\r\n                                                            \"\r\n                                                            [ngClass]=\"{\r\n                                                                'red-border':\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ].hasError\r\n                                                            }\"\r\n                                                        />\r\n\r\n                                                        <ng-container\r\n                                                            *ngFor=\"\r\n                                                                let action of ROW_DATA[\r\n                                                                    columnDef.headerInfo[subLineIndex].actionKey\r\n                                                                ]\r\n                                                            \"\r\n                                                        >\r\n                                                            <i\r\n                                                                *ngIf=\"action?.showIcon\"\r\n                                                                container=\"body\"\r\n                                                                [ngbTooltip]=\"tipContent\"\r\n                                                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                                                placement=\"bottom\"\r\n                                                                class=\"{{ action?.iconClass }}\"\r\n                                                            >\r\n                                                                <ng-template #tipContent>\r\n                                                                    <div [innerHTML]=\"action?.iconTooltip\"></div\r\n                                                                ></ng-template>\r\n                                                            </i>\r\n                                                            <ng-container *ngIf=\"action?.showSvgIcon\">\r\n                                                                <anna-core-icon-column\r\n                                                                    class=\"pr-4\"\r\n                                                                    *ngIf=\"action?.svgOrIconName\"\r\n                                                                    [componentName]=\"gtGeneralConfig.component\"\r\n                                                                    [dataObject]=\"ROW_DATA\"\r\n                                                                    [iconToShow]=\"action?.svgOrIconName\"\r\n                                                                    data-html=\"true\"\r\n                                                                    [ngbTooltip]=\"tipContent\"\r\n                                                                    placement=\"auto\"\r\n                                                                    container=\"body\"\r\n                                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                                >\r\n                                                                    <ng-template #tipContent>\r\n                                                                        <div\r\n                                                                            [innerHTML]=\"action?.svgOrIconTooltipMsg\"\r\n                                                                        ></div></ng-template\r\n                                                                ></anna-core-icon-column>\r\n                                                            </ng-container>\r\n                                                            <ng-container *ngIf=\"action?.showLink\">\r\n                                                                <a\r\n                                                                    [id]=\"action?.id\"\r\n                                                                    (click)=\"\r\n                                                                        textActionClicked(\r\n                                                                            ROW_DATA,\r\n                                                                            action?.id,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [class]=\"action.linkClass\"\r\n                                                                    >{{ action?.linkText }}\r\n                                                                </a>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </span>\r\n                                                </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                                <span\r\n                                                    [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                ></span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_SELECT_DROPDOWN'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let dropdown of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ];\r\n                                                        let dropdownIndex = index\r\n                                                    \"\r\n                                                >\r\n                                                    <anna-core-single-select\r\n                                                        class=\"gt-single-select dropdown {{ dropdown?.className }}\"\r\n                                                        [ngClass]=\"{ error: !dropdown?.selectedItem }\"\r\n                                                        [items]=\"dropdown?.itemList\"\r\n                                                        [selectedItem]=\"dropdown?.selectedItem\"\r\n                                                        [config]=\"dropdown?.dropdownConfig\"\r\n                                                        (valueChanged)=\"\r\n                                                            onDropdownChanged($event, ROW_DATA, dropdownIndex)\r\n                                                        \"\r\n                                                    >\r\n                                                    </anna-core-single-select>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_RADIO'\">\r\n                                                <span\r\n                                                    *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                    }\"\r\n                                                    class=\"mdi mdi-radiobox-marked\"\r\n                                                    (click)=\"(null)\"\r\n                                                >\r\n                                                </span>\r\n                                                <span\r\n                                                    *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    class=\"mdi mdi-radiobox-blank\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            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                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                                <mat-radio-group\r\n                                                    *ngIf=\"ROW_DATA['RadioButtonConfig']; else showHyphen\"\r\n                                                    [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                    [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                                >\r\n                                                    <ng-container\r\n                                                        *ngFor=\"\r\n                                                            let radioButton of ROW_DATA['RadioButtonConfig'];\r\n                                                            let last = last\r\n                                                        \"\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 }}\r\n                                                        </mat-radio-button>\r\n                                                        <i\r\n                                                            class=\" {{ radioButton.iconClass }}\"\r\n                                                            (click)=\"radioButtonIconClicked(ROW_DATA)\"\r\n                                                        ></i>\r\n                                                        <i\r\n                                                            *ngIf=\"radioButton.tooltipMessage\"\r\n                                                            class=\"mi mdi-info-outline\"\r\n                                                            [ngbTooltip]=\"radioButton.tooltipMessage\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        ></i>\r\n                                                        <br *ngIf=\"!last\" />\r\n                                                    </ng-container>\r\n                                                </mat-radio-group>\r\n                                                <ng-template #showHyphen> - </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span class=\"action-data\"> {{ action?.dataToDisplay }}</span>\r\n                                                    <ng-container *ngIf=\"action?.additionalTextWoTooltip\">\r\n                                                        <span\r\n                                                            class=\"additional-text-wo-tooltip\"\r\n                                                            [innerHtml]=\"action.additionalTextWoTooltip\"\r\n                                                        >\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"stringWithTooltipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey,\r\n                                                                tooltipWithStringRef\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action?.tooltipIconClass\"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithStringRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                    </span>\r\n                                                    <span>{{ action?.dataToDisplayAfterTooltip }}</span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_ELLIPSIS_WITH_TABLE_TOOLTIP'\">\r\n                                                <div class=\"new-ellipsis-container\">\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"cell-value\"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                .cellValue\r\n                                                        }}\r\n                                                    </span>\r\n                                                    <span\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.showTooltip\r\n                                                        \"\r\n                                                        class=\"tooltip-text\"\r\n                                                        [ngbTooltip]=\"tableInsideTooltip\"\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=\"table-inside-tooltip remove-on-scroll-class {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipClass\r\n                                                        }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToTableTooltip(\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                                info\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipHoverText\r\n                                                        }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\">\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length <\r\n                                                        26\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    [triggers]=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        100\r\n                                                            ? 'manual'\r\n                                                            : 'hover focus'\r\n                                                    \"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"status-note-tooltip\"\r\n                                                    (mouseenter)=\"\r\n                                                        bindTheValueToStatusNote(\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                            info\r\n                                                        )\r\n                                                    \"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        25\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP_INNER_HTML'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"action-data\"\r\n                                                        [ngClass]=\"action?.showTooltip ? 'reduced-width-text' : ''\"\r\n                                                    >\r\n                                                        {{ action?.dataToDisplay }}</span\r\n                                                    >\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"innerHtmlToolTipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithInnerHtmlTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                action,\r\n                                                                tooltipWithInnerHtmlRef,\r\n                                                                !action.isManualTrigger\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"\r\n                                                            'innrHtml-tooltip-icon-marker ' + action?.tooltipIconClass\r\n                                                        \"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithInnerHtmlRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-innerHtml-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                        {{ action.tooltipMarkerText }}\r\n                                                    </span>\r\n                                                    <span *ngIf=\"action?.dataToDisplayAfterTooltip\">\r\n                                                        {{ action?.dataToDisplayAfterTooltip }}\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container\r\n                                                *ngSwitchCase=\"\r\n                                                    'ICON_CELL_AND_STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\r\n                                                \"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        title=\"\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"action.showTooltip ? action.tooltipData : null\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <ng-container *ngIf=\"action.showObjectKey\">\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length < 26\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            [autoClose]=\"true\"\r\n                                                            [triggers]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 100\r\n                                                                    ? 'manual'\r\n                                                                    : 'hover focus'\r\n                                                            \"\r\n                                                            (hidden)=\"closeTooltip()\"\r\n                                                            #info=\"ngbTooltip\"\r\n                                                            tooltipClass=\"status-note-tooltip\"\r\n                                                            (mouseenter)=\"\r\n                                                                bindTheValueToStatusNote(\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    info\r\n                                                                )\r\n                                                            \"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 25\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchDefault>\r\n                                                <ng-container *ngIf=\"subline.objectKey !== 'description'\">\r\n                                                    <span annaCoreShowEllipsisTextOnHover>{{\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                    }}</span>\r\n                                                    <!-- <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'inventoryCode' &&\r\n                                                            ROW_DATA['isSellerGroup'] &&\r\n                                                            gtGeneralConfig.component === 'RATING'\r\n                                                        \"\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 remove-on-scroll-class\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToSellerGroupTooltip(\r\n                                                                ROW_DATA.sellerGroupHierarchy,\r\n                                                                info\r\n                                                            )\r\n                                                        \" \r\n                                                    >\r\n                                                    </i>-->\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageRating' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showRatingAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedRatingDifference\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageImpression' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showImpressionAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedImpDifference\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"subline.objectKey === 'description'\">\r\n                                                    <p\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionMessage ||\r\n                                                            ROW_DATA.descriptionEmailReferenceNum\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                            {{ ROW_DATA.descriptionMessage }}\r\n                                                            <br />\r\n                                                        </ng-container>\r\n                                                        <ng-container\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== '-' &&\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== ''\r\n                                                            \"\r\n                                                        >\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=\"\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'PDF' ||\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\r\n                                                        \"\r\n                                                    >\r\n                                                        <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                    </a>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.activityname.toLowerCase() === 'order onboarded'\r\n                                                        \"\r\n                                                    >\r\n                                                        <a\r\n                                                            *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\"\r\n                                                            (click)=\"viewDetailsClicked(ROW_DATA)\"\r\n                                                        >\r\n                                                            <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">\r\n                                                                View details\r\n                                                            </button>\r\n                                                        </a>\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        href=\"{{ ROW_DATA.descriptionEmailUrl }}\"\r\n                                                        target=\"_blank\"\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionEmailUrl !== '-' &&\r\n                                                            ROW_DATA.descriptionEmailUrl !== ''\r\n                                                        \"\r\n                                                    >\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                                    </div>\r\n                                </ng-container>\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\r\n        [width]=\"noDataWidth\"\r\n        [marginTop]=\"marginTop\"\r\n        *ngIf=\"isNoDataToDisplaySubject$ | async\"\r\n    >\r\n    </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    <anna-core-anna-column-checkbox-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-checkbox-filter>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    <anna-core-anna-column-slider-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-slider-filter>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <anna-core-anna-column-date-range-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-date-range-filter>\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    <anna-core-anna-column-time-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [showAllTimeRangeCheckboxes]=\"showCheckboxesForTimeFilter\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-time-filter>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n    <p class=\"black-color-text 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\">\r\n        This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #underDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Under-delivery percentage based on booked and posted RTG/IMPS.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #overDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Over-delivery percentage based on booked and posted RTG/IMPS.\r\n    </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 annaCoreShowEllipsisTextOnHover>{{ data.InventoryCode }}</span>\r\n                        </td>\r\n                        <td>\r\n                            <span annaCoreShowEllipsisTextOnHover>{{ 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 class=\"black-color-text\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tableInsideTooltip>\r\n    <label class=\"ellipsis-tooltip-heading\">{{ ellipsisWithTooltipHeading }}</label>\r\n    <section class=\"table-inside-tooltip-container\">\r\n        <table class=\"ellipsis-tooltip-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th\r\n                        [style.width]=\"header.width\"\r\n                        *ngFor=\"let header of ellipsisWithTooltipTableHeaders\"\r\n                    >\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ header.headerName }}</span\r\n                            >\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of ellipsisWithTooltipTableData\">\r\n                    <td *ngFor=\"let header of ellipsisWithTooltipTableHeaders\">\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ data[header.objectKey] }}</span\r\n                            >\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\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\">\r\n        The difference between posted and booked average rating is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">\r\n        The difference between posted and booked average impression is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </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 #avgBookedRate>\r\n    <p>This is the booked average Rate</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedRtg>\r\n    <p>This is the booked average RTG</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedImps>\r\n    <p>This is the booked average IMP(\u2019000)</p>\r\n</ng-template>\r\n\r\n<ng-template #projectedImpsRtg>\r\n    <p>\r\n        ANNA calculates projected RTG/IMPS values using either the computed estimates or the actual posted data,\r\n        depending on what is available. If posted data has not yet been received, ANNA will use the computed estimates\r\n        as the projected value. Once the actual posted data is received, the projection will automatically update to\r\n        reflect the real, posted values. This ensures that projected data is always based on the most accurate and\r\n        up-to-date information.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #automationTooltip>\r\n    <p>\r\n        Please get the order business rules approved to automate the orders. Only for the automated orders, any approved\r\n        MGs, ADUs, or credited spots on ANNA will be fed into the traffic system i.e. ANNA revisions.\r\n        <!-- removed below line as part of enhancmennt in 14.0 releas -->\r\n        <!-- Additionally, ANNA will only enter buyer revisions into traffic for the selected\r\n        Medialine/WOC orders. -->\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #rebateImpact>\r\n    <p>Rebate impact value is for the originally ordered spot length and is not equivalized.</p>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationTotalRowToolTip>\r\n    <ul>\r\n        <li>\r\n            <strong>POLITICAL RATE VIOLATIONS:</strong>\r\n            Violations flagged when non-political spots are booked at a rate lower than the minimum booked rate for\r\n            political candidates for the same week, Inventory Code and Revenue Class.\r\n        </li>\r\n        <li>\r\n            <strong>CANDIDATE TO CANDIDATE VIOLATION:</strong>\r\n            Violations flagged when political spots are booked at different rates to other political spots for the same\r\n            week, Inventory Code and Revenue Class.\r\n        </li>\r\n    </ul>\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<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                {{ data.value }}\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=\"notification-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 #programChangeTooltipTemplate>\r\n    <div class=\"program-schedule-tooltip\">\r\n        <h2>Program Change</h2>\r\n        <p class=\"previous\">Previous:</p>\r\n        <b annaCoreShowEllipsisTextOnHover>{{ textActionTooltip.OldProgramName }}</b>\r\n\r\n        <p class=\"updated\">Updated:</p>\r\n        <b\r\n            *ngIf=\"textActionTooltip.NewProgramNames.length === 1\"\r\n            annaCoreShowEllipsisTextOnHover\r\n            >{{ textActionTooltip.NewProgramNames[0] }}</b\r\n        >\r\n        <ul *ngIf=\"textActionTooltip.NewProgramNames.length > 1\">\r\n            <li *ngFor=\"let item of textActionTooltip.NewProgramNames\">\r\n                <label class=\"dot\"></label>\r\n                <span annaCoreShowEllipsisTextOnHover>{{ item }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #showOrHideToggleForTotalRowTooltip>\r\n    <div>\r\n        {{ showOrHideToggleForTotalRow && !gtGeneralConfig.totalRow ? \"Show Total Row\" : \"Hide Total Row\" }}\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n    <div\r\n        *ngIf=\"tooltipContainingTable\"\r\n        [innerHTML]=\"tooltipContainingTable.innerHtml\"\r\n        class=\"notification-tooltip-div-container\"\r\n    >\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-top:10px; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul> -->\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\r\n<ng-template #statusNoteTooltip>\r\n    <div>\r\n        <span class=\"status-note-tooltip\">{{ statusNoteForTooltip }}</span>\r\n        <span *ngIf=\"statusNoteForPopup.length > 100\"\r\n            >...<a\r\n                class=\"view-more-comments\"\r\n                (click)=\"showEntireStatusNote()\"\r\n                >View more</a\r\n            ></span\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtmlToolTipTemplate>\r\n    <div [innerHtml]=\"toolTipInnerHtmlData\"></div>\r\n</ng-template>\r\n", styles: ["::ng-deep .show-or-hide-toggle-tooltip .tooltip-inner{max-width:229px}.show-or-hide-toggle-btn.shift-toggle-top-on-total-row-click{transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),32px)}.show-or-hide-toggle-btn{width:16px;height:16px;padding:0;margin:0;border-radius:50%;position:absolute;transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),52px);z-index:999;background-color:#d9d9d9}.show-or-hide-toggle-btn i.mdi.mdi-menu-swap{font-size:16px;display:flex}#generic-table-conatiner.table-with-show-hide-total-row-toggle .total-row td:nth-of-type(2){padding-left:16px!important}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner{max-width:600px;width:min-content}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner>div{width:max-content}::ng-deep .generic-innerHtml-table-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}::ng-deep .generic-innerHtml-table-container{max-height:8.75rem;width:min-content;overflow:auto}::ng-deep .generic-innerHtml-table-container table{table-layout:fixed;width:100%}::ng-deep .generic-innerHtml-table-container table thead tr th{background:#e9e9e9;height:22px;padding:3px 8px;position:sticky;top:0;cursor:default;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0;box-shadow:inset 1px -1px #d4d4d4,inset 0 1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table thead tr th:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 1px #d4d4d4!important}::ng-deep .generic-innerHtml-table-container table tbody tr td{padding:3px 8px;width:100%;color:#000;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;box-shadow:inset 1px -1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr td:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 0 #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr:first-of-type td{border-top:none}::ng-deep .generic-innerHtml-table-container::-webkit-scrollbar-track{margin-top:22px!important}.sort-btn{background:#fff;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:var(--sort-label-fs);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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.red-text-totol-row{color:#f44336!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}table{margin-bottom:0;table-layout:fixed;width:100%}:host ::ng-deep .gt thead{top:.1px!important;position:relative}:host ::ng-deep .gt .header-row th{border:none;background:#ededed;padding:2px 8px;line-height:normal;position:sticky;position:-webkit-sticky;top:0;box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th .upper-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt .header-row th .lower-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt .header-row th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:max-content}:host ::ng-deep .gt .header-row th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt .header-row th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}:host ::ng-deep .gt .header-row th:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th:last-of-type{box-shadow:inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr td{padding:2px 8px;border:none;box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td div:nth-child(1){color:#000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td div:nth-child(2){color:#a7a7a7;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}: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:#2962ff}:host ::ng-deep .gt .cell-value{width:calc(100% - 24px)!important;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt .tooltip-text{color:#268bff;cursor:pointer;float:right}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:first-of-type{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4}.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{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:#2962ff}.time-filter-checkboxes>div>p{color:#151b1e}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}:host ::ng-deep mat-radio-group br{margin-top:0!important}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__background{width:var(--mat-radio-size);height:var(--mat-radio-size)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__inner-circle{border-width:calc(var(--mat-radio-size) / 2)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{margin:0 0 0 4px;padding:0;top:-2px;position:relative;font-size:var(--radio-button-label-fs)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio--disabled+label{color:var(--primary-text-color-dark)!important}:host ::ng-deep mat-radio-group mat-radio-button.mat-mdc-radio-button .mdc-form-field .mdc-radio{padding:0}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{left:-94px;font-size:12px;color:#4a4a4a;position:relative}:host ::ng-deep mat-radio-group mat-radio-button .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-selected-icon-color)}::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:#fff}::ng-deep tr.gray-background-row{background:#e9e9e980!important}.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 2px 0 -14px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -2px}::ng-deep .spot-info-tooltip .tooltip-inner{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{max-width:fit-content;width:310px!important}::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:nth-child(1){width:20px}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{width:30px;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,section.table-inside-tooltip-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{margin-top:1.5rem}section.table-inside-tooltip-container::-webkit-scrollbar-track{margin-top:1.1875rem}.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;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:8px 4px;color:#4a4a4a!important;font-size:11px!important;font-family:Roboto;font-size:11px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.notification-tooltip-div-container{text-align:left!important;padding:6px 8px;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:fit-content!important;max-width:520px;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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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 ul.pl-16{padding-left:16px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 0;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}.bottom-border{border-bottom:1px solid #d4d4d4!important}i.disabled{pointer-events:none!important}.black-color-text{color:#000}.white-space-nowrap{white-space:nowrap}.ellipsis-tooltip-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}table.ellipsis-tooltip-table{table-layout:fixed;width:100%}table.ellipsis-tooltip-table thead th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important}table.ellipsis-tooltip-table thead th{background:#e9e9e9;padding:3px 8px;line-height:normal;position:sticky;top:0;cursor:default;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}table.ellipsis-tooltip-table thead th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}table.ellipsis-tooltip-table tbody td{padding:3px 8px}table.ellipsis-tooltip-table tbody td .upper-label{width:100%;color:#000;text-overflow:ellipsis;overflow:hidden;display:inline-block;white-space:nowrap;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}table.ellipsis-tooltip-table tbody td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.ellipsis-tooltip-table tbody td:nth-of-type(n+2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}.pr-4{padding-right:4px}.status-note-tooltip{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;color:#4a4a4a;white-space:normal!important}.view-more-comments{display:block;color:#268bff;font-family:Roboto;font-size:.75rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;cursor:pointer;margin-left:2px}td.mat-column-isOrderStarred:has(.disabled-starring){pointer-events:none!important}td.mat-column-isOrderStarred .mdi.mdi-star.disabled-starring,td.mat-column-isOrderStarred .mdi.mdi-star-outline.disabled-starring{pointer-events:none!important;color:#dbdbdb80!important}table.disable-table-scrolling{overflow:hidden!important}.icon-tooltip-text{display:inline-block;color:#268bff}.text-with-icon-and-text.reduced-width{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px);margin-bottom:-3.5px}.innrHtml-tooltip-icon-marker{float:right;color:#268bff}.reduced-width-text{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i5$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ShowEllipsisTextOnHoverDirective, selector: "[annaCoreShowEllipsisTextOnHover]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: AnnaIconColumnComponent, selector: "anna-core-icon-column", inputs: ["componentName", "iconToShow", "dataObject"], outputs: ["columnIconClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { kind: "component", type: AnnaColumnCheckboxFilterComponent, selector: "anna-core-anna-column-checkbox-filter", inputs: ["showFilterHeaderTabs", "isLurAndCsrComponent", "tableData", "clonedTableData", "filterTabObjects"], outputs: ["filterAppliedToTable", "sortingAppliedToTable", "getSortType", "closeTooltip"] }, { kind: "component", type: AnnaColumnSliderFilterComponent, selector: "anna-core-anna-column-slider-filter", inputs: ["filterTabObjects", "isLurAndCsrComponent", "tableData", "showFilterHeaderTabs", "clonedTableData"], outputs: ["closeTooltip", "filterAppliedToTable", "getSortType", "sortingAppliedToTable"] }, { kind: "component", type: AnnaColumnDateRangeFilterComponent, selector: "anna-core-anna-column-date-range-filter", inputs: ["tableData", "clonedTableData", "filterTabObjects", "isLurAndCsrComponent", "showFilterHeaderTabs"], outputs: ["filterAppliedToTable", "sortingAppliedToTable", "getSortType", "closeTooltip"] }, { kind: "component", type: AnnaColumnTimeFilterComponent, selector: "anna-core-anna-column-time-filter", inputs: ["tableData", "clonedTableData", "filterTabObjects", "isLurAndCsrComponent", "showFilterHeaderTabs", "showAllTimeRangeCheckboxes", "gtGeneralConfig", "showClearAllFilter", "startFromText", "endToText", "isSortAndFilterAbsent"], outputs: ["timeChanges", "timeChangedEmitter", "filterAppliedToTable", "sortingAppliedToTable", "getSortType", "closeTooltip"] }, { kind: "ngmodule", type: NgCircleProgressModule }, { kind: "component", type: i8.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AnnaEstIconTemplateComponent, selector: "anna-core-anna-est-icon-template" }, { kind: "component", type: AnnaSingleSelectComponent, selector: "anna-core-single-select", inputs: ["config", "loading", "showAdditionalDataInSelectedText", "disabled", "items", "selectedItem", "keyToUseForDisplay", "keyToUseForCheckingSelectedItem", "hideDropdownArrow", "borderbottomObject", "defaultDropdownHeight", "itemsToHideInDropdownIds", "showClearSelection"], outputs: ["valueChanged", "dropdownClosedEvent", "dropdownOpenedEvent", "clearSelectionClickedEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaNonEditableGenericTableComponent, isStandalone: true, 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", fixNumberOfRowsForPopup: "fixNumberOfRowsForPopup", includeBorderInTableHeight: "includeBorderInTableHeight", downloadInProgress: "downloadInProgress", percentDone: "percentDone", starredInProgress: "starredInProgress", clickableRow: "clickableRow", setTableHeightWhenRowSizeIsFixed: "setTableHeightWhenRowSizeIsFixed", tableBorderBottomClassRequired: "tableBorderBottomClassRequired", hideSomeTds: "hideSomeTds", tdsHaveRowSpan: "tdsHaveRowSpan", multipleTablesPresent: "multipleTablesPresent", showOrHideToggleForTotalRow: "showOrHideToggleForTotalRow" }, 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", gtInnerHTMLClicked: "gtInnerHTMLClicked", downloadSpotDetails: "downloadSpotDetails", clickableDataClicked: "clickableDataClicked", totalRowIconClicked: "totalRowIconClicked", notificationIconHover: "notificationIconHover", notificationIconHoverLeave: "notificationIconHoverLeave", editableInputEdited: "editableInputEdited", radioButtonMessageIconClicked: "radioButtonMessageIconClicked", statusNotePopupOpened: "statusNotePopupOpened", singleSelectDropdownValueEmit: "singleSelectDropdownValueEmit" }, viewQueries: [{ propertyName: "tableElementRef", first: true, predicate: ["tableElementRef"], descendants: true, static: true }, { propertyName: "textActionTooltipTemplateRef", first: true, predicate: ["textActionTooltipTemplate"], descendants: true }, { propertyName: "programChangeTooltipTemplateRef", first: true, predicate: ["programChangeTooltipTemplate"], descendants: true }, { propertyName: "viewChildTableHeaders", predicate: ["tableHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n    id=\"generic-table-conatiner\"\r\n    #tableElementRef\r\n    class=\"table-container {{ gtGeneralConfig?.tableOuterContainerName }} {{ tableBottomBorderClass }}\"\r\n    [ngClass]=\"{\r\n        'scroll-left-shadow-effect': isScrolledLeft,\r\n        'scroll-right-shadow-effect': !isScrollEnded,\r\n        'clickable-row': clickableRow,\r\n        'no-data-table': (isNoDataToDisplaySubject$ | async),\r\n        'table-with-show-hide-total-row-toggle': showOrHideToggleForTotalRow\r\n    }\"\r\n    (scroll)=\"onTableContainerScroll($event)\"\r\n>\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 < noOfRowsToCheck - 1\r\n                    ? 'calc(' +\r\n                      (gtDimension.rowHeight * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight)) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <button\r\n            *ngIf=\"showOrHideToggleForTotalRow && !showSkeletonLoading && (isNoDataToDisplaySubject$ | async) === false\"\r\n            [ngClass]=\"{\r\n                'shift-toggle-top-on-total-row-click': !gtGeneralConfig.totalRow\r\n            }\"\r\n            class=\"show-or-hide-toggle-btn\"\r\n            (click)=\"showHideTotalRow()\"\r\n        >\r\n            <i\r\n                class=\"mdi mdi-menu-swap\"\r\n                tooltipClass=\"show-or-hide-toggle-tooltip\"\r\n                placement=\"auto\"\r\n                container=\"body\"\r\n                [ngbTooltip]=\"showOrHideToggleForTotalRowTooltip\"\r\n            ></i>\r\n        </button>\r\n        <table\r\n            class=\"gt\"\r\n            [ngClass]=\"tableClass\"\r\n            mat-table\r\n            [dataSource]=\"renderedData\"\r\n        >\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\"\r\n                (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"column.colName\"\r\n                *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\"\r\n            >\r\n                <td\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [attr.colspan]=\"column.colspan\"\r\n                    class=\"{{ column.class }}\"\r\n                >\r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a\r\n                            *ngFor=\"let data of column.actionData\"\r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\"\r\n                        >\r\n                            {{ data.name }}\r\n                        </a>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"column['isIconColumn']\">\r\n                        <i\r\n                            class=\"{{ column?.iconData?.class }}\"\r\n                            (click)=\"iconClickedInTotalRow(column?.colName)\"\r\n                        >\r\n                        </i>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong class=\"upper-label\"\r\n                            >{{ column.data }}\r\n                            <span\r\n                                class=\"red-text-totol-row\"\r\n                                *ngIf=\"column.additionalRedTextAfterData\"\r\n                                >{{ column.additionalRedTextAfterData }}</span\r\n                            ></strong\r\n                        >\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <p\r\n                                *ngIf=\"\r\n                                    column.colName === 'total-potential-booked-unit' &&\r\n                                        gtGeneralConfig.component === 'RATING';\r\n                                    else columnLowerData\r\n                                \"\r\n                                class=\"clickable-data\"\r\n                                (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                            >\r\n                                {{ column.lowerData }}\r\n                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                <ng-container *ngIf=\"downloadInProgress && selectedRowTypeForDownload === 'TOTALROW'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                </ng-container>\r\n                            </p>\r\n                            <ng-template #columnLowerData>\r\n                                <p class=\"lower-label\">{{ column.lowerData }}</p>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage && gtGeneralConfig.component !== 'LUR_VIOLATIONS'\">\r\n                            <i\r\n                                class=\"{{ column.tooltipIconClass }}\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"column.tooltipMessage\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"top bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"gtGeneralConfig.component === 'LUR_VIOLATIONS' && column.tooltipMessage\">\r\n                            <i\r\n                                class=\"mi mdi-info-outline info-label\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationTotalRowToolTip\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"columnDef.headerInfo[0].objectKey\"\r\n                *ngFor=\"let columnDef of tableHeaders; trackBy: trackByFn\"\r\n            >\r\n                <th\r\n                    #tableHeader\r\n                    nowrap\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [style.width]=\"columnDef.width\"\r\n                >\r\n                    <div\r\n                        class=\"row mx-0\"\r\n                        *ngFor=\"let header of columnDef.headerInfo; let j = index\"\r\n                    >\r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            <ngx-skeleton-loader\r\n                                *ngIf=\"header.name == null\"\r\n                                count=\"1\"\r\n                                [theme]=\"{\r\n                                    height: '10px',\r\n                                    display: 'block',\r\n                                    width: columnDef.width,\r\n                                    'max-width': 'calc(100% - 20px)'\r\n                                }\"\r\n                            >\r\n                            </ngx-skeleton-loader>\r\n                            <ng-container *ngIf=\"header.name\">\r\n                                {{ header.name }}\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.tooltip && header.tooltip.tooltipMessage\">\r\n                                <i\r\n                                    class=\"{{ header['tooltip'].iconClass }}\"\r\n                                    [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                    #t=\"ngbTooltip\"\r\n                                    container=\"body\"\r\n                                    [ngbTooltip]=\"header.tooltip.tooltipMessage\"\r\n                                    container=\"body\"\r\n                                    placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                    tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                                >\r\n                                </i>\r\n                            </ng-container>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'impsInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"\r\n                                    header.tooltip && header.tooltip.name === 'spotsColumnEquivalizationMessageTooltip'\r\n                                \"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'underDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"underDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'overDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"overDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ratingInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rateInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ongoingRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'completedRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRate'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRate\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRtg\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedImps'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedImps\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'automationTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"automationTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rebateImpact'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rebateImpact\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'projectedImpsRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"projectedImpsRtg\"\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\r\n                            *ngIf=\"gtGeneralConfig.showAllColumnFilter && header && header.typeOfHeaderData !== ''\"\r\n                            class=\"sort-filter-container\"\r\n                        >\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"{{ filterAlignment }}\"\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top auto\"\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\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'lurViolationInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *matCellDef=\"let ROW_DATA\">\r\n                    <td\r\n                        mat-cell\r\n                        [style.background]=\"ROW_DATA.backgroundColor\"\r\n                        [style.border]=\"ROW_DATA.border\"\r\n                        class=\"{{ ROW_DATA.rowClass }}\"\r\n                        [ngClass]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'TdClass']\"\r\n                        [attr.rowspan]=\"tdsHaveRowSpan ? ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan'] : 1\"\r\n                        *ngIf=\"\r\n                            !hideSomeTds ||\r\n                            (hideSomeTds && !ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td'])\r\n                        \"\r\n                    >\r\n                        <ngx-skeleton-loader\r\n                            *ngIf=\"showSkeletonLoading\"\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '10px', display: 'block', marginBottom: '0' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && (isNoDataToDisplaySubject$ | async) === false\">\r\n                                <ng-container\r\n                                    *ngFor=\"\r\n                                        let subline of columnDef.headerInfo;\r\n                                        let subLineIndex = index;\r\n                                        trackBy: trackByFn\r\n                                    \"\r\n                                >\r\n                                    <div annaCoreShowEllipsisTextOnHover>\r\n                                        <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                            <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                                <i\r\n                                                    *ngIf=\"\r\n                                                        !(\r\n                                                            starredInProgress &&\r\n                                                            ROW_DATA.orderId === selectedStarredOrderId\r\n                                                        )\r\n                                                    \"\r\n                                                    [class]=\"ROW_DATA.iconClass\"\r\n                                                    [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    (click)=\"iconClicked(ROW_DATA, ROW_DATA.iconClass)\"\r\n                                                    ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                ></i>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        starredInProgress && ROW_DATA.orderId === selectedStarredOrderId\r\n                                                    \"\r\n                                                >\r\n                                                    <div\r\n                                                        class=\"spinner-for-button-directive\"\r\n                                                        [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    ></div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\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                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"\r\n                                                            action.showTooltip && action?.tooltipData\r\n                                                                ? action.tooltipData\r\n                                                                : null\r\n                                                        \"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                                <p\r\n                                                    [innerHTML]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    (click)=\"innerHTMLCellClicked($event, ROW_DATA)\"\r\n                                                ></p>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.showObjectKey\"\r\n                                                    >\r\n                                                        {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                    </span>\r\n\r\n                                                    <span\r\n                                                        class=\"pr-4 {{ action?.additionalTextClass }}\"\r\n                                                        *ngIf=\"action?.additionalText\"\r\n                                                    >\r\n                                                        {{ action?.additionalText }}\r\n                                                    </span>\r\n\r\n                                                    <anna-core-icon-column\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.svgOrIconName\"\r\n                                                        [componentName]=\"gtGeneralConfig.component\"\r\n                                                        [dataObject]=\"ROW_DATA\"\r\n                                                        [iconToShow]=\"action.svgOrIconName\"\r\n                                                        data-html=\"true\"\r\n                                                        [ngbTooltip]=\"tipContent\"\r\n                                                        [disableTooltip]=\"!action?.svgOrIconTooltipMsg\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        (columnIconClicked)=\"\r\n                                                            svgIconClicked(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].actionKey\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-template #tipContent>\r\n                                                            <div [innerHTML]=\"action?.svgOrIconTooltipMsg\"></div\r\n                                                        ></ng-template>\r\n                                                    </anna-core-icon-column>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <button\r\n                                                        *ngIf=\"text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        [ngbTooltip]=\"textActionTooltipTemplate\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                    >\r\n                                                        {{ text.name }}\r\n                                                    </button>\r\n\r\n                                                    <button\r\n                                                        *ngIf=\"!text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                    >\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':\r\n                                                            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':\r\n                                                            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\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                        ngbTooltip=\"tooltipContainingTableTemplate\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                                <a\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                    [class]=\"text.class\"\r\n                                                    (click)=\"onClickableDataClicked(ROW_DATA, text.id)\"\r\n                                                    >{{ text.name }}</a\r\n                                                >\r\n                                                <span\r\n                                                    *ngIf=\"\r\n                                                        subline.objectKey === 'displayBookedUnits' &&\r\n                                                        gtGeneralConfig.component === 'RATING'\r\n                                                    \"\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\"\r\n                                                        >get_app</span\r\n                                                    >\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            downloadInProgress &&\r\n                                                            ROW_DATA.inventoryCodeId ===\r\n                                                                selectedInventoryIdForDownload &&\r\n                                                            ROW_DATA.demographic === selectedDemographicForDownload\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"circularProgressBar\"\r\n                                                        ></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\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [class]=\"action.additionalTextBeforeLinkClass\"\r\n                                                        [innerHtml]=\"action.additionalTextBeforeLink\"\r\n                                                        ngbTooltip=\"{{ action.additionalTextBeforeLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalText\"\r\n                                                    ></span>\r\n\r\n                                                    <ng-container *ngIf=\"action && action.typeOfData === 'STRING'\">\r\n                                                        <span\r\n                                                            class=\"text-with-icon-and-text\"\r\n                                                            [ngClass]=\"{ 'reduced-width': action.showIcon }\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            >{{ action.data }}</span\r\n                                                        >\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        [id]=\"action.id\"\r\n                                                        *ngIf=\"action.showLink\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [class]=\"action.linkClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledLink }\"\r\n                                                        >{{ action.data }}</a\r\n                                                    >\r\n                                                    <span\r\n                                                        ngbTooltip=\"{{ action.additionalTextAfterLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action.additionalTextAfterLinkClass\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalAfterText\"\r\n                                                    >\r\n                                                        {{ action.additionalTextAfterLink }}\r\n                                                    </span>\r\n\r\n                                                    <ng-container *ngIf=\"action.showTooltip\">\r\n                                                        <ng-container *ngIf=\"action.tooltipData.innerHtml\">\r\n                                                            <i\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [class]=\"action.iconClass\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                placement=\"bottom auto\"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                                [ngbTooltip]=\"tooltipContainingTableTemplate\"\r\n                                                            >\r\n                                                            </i>\r\n                                                        </ng-container>\r\n\r\n                                                        <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                            <span\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                class=\"icon-tooltip-text\"\r\n                                                                (click)=\"\r\n                                                                    iconClickedOnStringIconActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        action.id,\r\n                                                                        columnDef.headerInfo[subLineIndex]\r\n                                                                    )\r\n                                                                \"\r\n                                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                [placement]=\"\r\n                                                                    action.tooltipPlacement\r\n                                                                        ? action.tooltipPlacement\r\n                                                                        : 'bottom auto'\r\n                                                                \"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                    action.tooltipClass\r\n                                                                }}\"\r\n                                                                [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                            >\r\n                                                                <i [class]=\"action.iconClass\"> </i>\r\n                                                                {{ action.additionalTextAfterIcon ?? \"\" }}\r\n                                                            </span>\r\n                                                            <ng-container *ngIf=\"action['showSvgIcon']\">\r\n                                                                <anna-core-anna-est-icon-template\r\n                                                                    class=\"float-right\"\r\n                                                                    *ngIf=\"action['svgIconName'] === 'anna-icon'\"\r\n                                                                    (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                    (mouseenter)=\"\r\n                                                                        mouseEnterOnStringTextActionType(\r\n                                                                            ROW_DATA,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                                .tooltipKey\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [placement]=\"\r\n                                                                        action.tooltipPlacement\r\n                                                                            ? action.tooltipPlacement\r\n                                                                            : 'bottom auto'\r\n                                                                    \"\r\n                                                                    tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                        action['tooltipClass']\r\n                                                                    }}\"\r\n                                                                    [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                                    container=\"body\"\r\n                                                                    [autoClose]=\"true\"\r\n                                                                >\r\n                                                                </anna-core-anna-est-icon-template>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </ng-container>\r\n\r\n                                                    <ng-container *ngIf=\"!action.showTooltip\">\r\n                                                        <i\r\n                                                            *ngIf=\"action.showIcon\"\r\n                                                            [class]=\"action.iconClass\"\r\n                                                            [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                            (click)=\"\r\n                                                                iconClickedOnStringIconActionType(\r\n                                                                    ROW_DATA,\r\n                                                                    action.id,\r\n                                                                    columnDef.headerInfo[subLineIndex]\r\n                                                                )\r\n                                                            \"\r\n                                                        >\r\n                                                        </i>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_OR_INPUT'\">\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]?.type ===\r\n                                                            'STRING';\r\n                                                        else inputBox\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [innerHtml]=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.value\r\n                                                        \"\r\n                                                    ></span>\r\n                                                </ng-container>\r\n\r\n                                                <ng-template #inputBox>\r\n                                                    <span class=\"input-box-container\">\r\n                                                        <input\r\n                                                            placeholder=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    ?.placeholder\r\n                                                            }}\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            class=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .className\r\n                                                            }}\"\r\n                                                            (keydown)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    false\r\n                                                                )\r\n                                                            \"\r\n                                                            (paste)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    true\r\n                                                                )\r\n                                                            \"\r\n                                                            (ngModelChange)=\"\r\n                                                                editableInputValueChanged(\r\n                                                                    $event,\r\n                                                                    ROW_DATA,\r\n                                                                    columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                )\r\n                                                            \"\r\n                                                            [ngModel]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .value\r\n                                                            \"\r\n                                                            [disabled]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .disabled\r\n                                                            \"\r\n                                                            [ngClass]=\"{\r\n                                                                'red-border':\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ].hasError\r\n                                                            }\"\r\n                                                        />\r\n\r\n                                                        <ng-container\r\n                                                            *ngFor=\"\r\n                                                                let action of ROW_DATA[\r\n                                                                    columnDef.headerInfo[subLineIndex].actionKey\r\n                                                                ]\r\n                                                            \"\r\n                                                        >\r\n                                                            <i\r\n                                                                *ngIf=\"action?.showIcon\"\r\n                                                                container=\"body\"\r\n                                                                [ngbTooltip]=\"tipContent\"\r\n                                                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                                                placement=\"bottom\"\r\n                                                                class=\"{{ action?.iconClass }}\"\r\n                                                            >\r\n                                                                <ng-template #tipContent>\r\n                                                                    <div [innerHTML]=\"action?.iconTooltip\"></div\r\n                                                                ></ng-template>\r\n                                                            </i>\r\n                                                            <ng-container *ngIf=\"action?.showSvgIcon\">\r\n                                                                <anna-core-icon-column\r\n                                                                    class=\"pr-4\"\r\n                                                                    *ngIf=\"action?.svgOrIconName\"\r\n                                                                    [componentName]=\"gtGeneralConfig.component\"\r\n                                                                    [dataObject]=\"ROW_DATA\"\r\n                                                                    [iconToShow]=\"action?.svgOrIconName\"\r\n                                                                    data-html=\"true\"\r\n                                                                    [ngbTooltip]=\"tipContent\"\r\n                                                                    placement=\"auto\"\r\n                                                                    container=\"body\"\r\n                                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                                >\r\n                                                                    <ng-template #tipContent>\r\n                                                                        <div\r\n                                                                            [innerHTML]=\"action?.svgOrIconTooltipMsg\"\r\n                                                                        ></div></ng-template\r\n                                                                ></anna-core-icon-column>\r\n                                                            </ng-container>\r\n                                                            <ng-container *ngIf=\"action?.showLink\">\r\n                                                                <a\r\n                                                                    [id]=\"action?.id\"\r\n                                                                    (click)=\"\r\n                                                                        textActionClicked(\r\n                                                                            ROW_DATA,\r\n                                                                            action?.id,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [class]=\"action.linkClass\"\r\n                                                                    >{{ action?.linkText }}\r\n                                                                </a>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </span>\r\n                                                </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                                <span\r\n                                                    [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                ></span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_SELECT_DROPDOWN'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let dropdown of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ];\r\n                                                        let dropdownIndex = index\r\n                                                    \"\r\n                                                >\r\n                                                    <anna-core-single-select\r\n                                                        class=\"gt-single-select dropdown {{ dropdown?.className }}\"\r\n                                                        [ngClass]=\"{ error: !dropdown?.selectedItem }\"\r\n                                                        [items]=\"dropdown?.itemList\"\r\n                                                        [selectedItem]=\"dropdown?.selectedItem\"\r\n                                                        [config]=\"dropdown?.dropdownConfig\"\r\n                                                        (valueChanged)=\"\r\n                                                            onDropdownChanged($event, ROW_DATA, dropdownIndex)\r\n                                                        \"\r\n                                                    >\r\n                                                    </anna-core-single-select>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_RADIO'\">\r\n                                                <span\r\n                                                    *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                    }\"\r\n                                                    class=\"mdi mdi-radiobox-marked\"\r\n                                                    (click)=\"(null)\"\r\n                                                >\r\n                                                </span>\r\n                                                <span\r\n                                                    *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    class=\"mdi mdi-radiobox-blank\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            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                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                                <mat-radio-group\r\n                                                    *ngIf=\"ROW_DATA['RadioButtonConfig']; else showHyphen\"\r\n                                                    [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                    [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                                >\r\n                                                    <ng-container\r\n                                                        *ngFor=\"\r\n                                                            let radioButton of ROW_DATA['RadioButtonConfig'];\r\n                                                            let last = last\r\n                                                        \"\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 }}\r\n                                                        </mat-radio-button>\r\n                                                        <i\r\n                                                            class=\" {{ radioButton.iconClass }}\"\r\n                                                            (click)=\"radioButtonIconClicked(ROW_DATA)\"\r\n                                                        ></i>\r\n                                                        <i\r\n                                                            *ngIf=\"radioButton.tooltipMessage\"\r\n                                                            class=\"mi mdi-info-outline\"\r\n                                                            [ngbTooltip]=\"radioButton.tooltipMessage\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        ></i>\r\n                                                        <br *ngIf=\"!last\" />\r\n                                                    </ng-container>\r\n                                                </mat-radio-group>\r\n                                                <ng-template #showHyphen> - </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span class=\"action-data\"> {{ action?.dataToDisplay }}</span>\r\n                                                    <ng-container *ngIf=\"action?.additionalTextWoTooltip\">\r\n                                                        <span\r\n                                                            class=\"additional-text-wo-tooltip\"\r\n                                                            [innerHtml]=\"action.additionalTextWoTooltip\"\r\n                                                        >\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"stringWithTooltipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey,\r\n                                                                tooltipWithStringRef\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action?.tooltipIconClass\"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithStringRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                    </span>\r\n                                                    <span>{{ action?.dataToDisplayAfterTooltip }}</span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_ELLIPSIS_WITH_TABLE_TOOLTIP'\">\r\n                                                <div class=\"new-ellipsis-container\">\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"cell-value\"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                .cellValue\r\n                                                        }}\r\n                                                    </span>\r\n                                                    <span\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.showTooltip\r\n                                                        \"\r\n                                                        class=\"tooltip-text\"\r\n                                                        [ngbTooltip]=\"tableInsideTooltip\"\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=\"table-inside-tooltip remove-on-scroll-class {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipClass\r\n                                                        }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToTableTooltip(\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                                info\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipHoverText\r\n                                                        }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\">\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length <\r\n                                                        26\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    [triggers]=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        100\r\n                                                            ? 'manual'\r\n                                                            : 'hover focus'\r\n                                                    \"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"status-note-tooltip\"\r\n                                                    (mouseenter)=\"\r\n                                                        bindTheValueToStatusNote(\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                            info\r\n                                                        )\r\n                                                    \"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        25\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP_INNER_HTML'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"action-data\"\r\n                                                        [ngClass]=\"action?.showTooltip ? 'reduced-width-text' : ''\"\r\n                                                    >\r\n                                                        {{ action?.dataToDisplay }}</span\r\n                                                    >\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"innerHtmlToolTipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithInnerHtmlTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                action,\r\n                                                                tooltipWithInnerHtmlRef,\r\n                                                                !action.isManualTrigger\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"\r\n                                                            'innrHtml-tooltip-icon-marker ' + action?.tooltipIconClass\r\n                                                        \"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithInnerHtmlRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-innerHtml-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                        {{ action.tooltipMarkerText }}\r\n                                                    </span>\r\n                                                    <span *ngIf=\"action?.dataToDisplayAfterTooltip\">\r\n                                                        {{ action?.dataToDisplayAfterTooltip }}\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container\r\n                                                *ngSwitchCase=\"\r\n                                                    'ICON_CELL_AND_STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\r\n                                                \"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        title=\"\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"action.showTooltip ? action.tooltipData : null\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <ng-container *ngIf=\"action.showObjectKey\">\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length < 26\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            [autoClose]=\"true\"\r\n                                                            [triggers]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 100\r\n                                                                    ? 'manual'\r\n                                                                    : 'hover focus'\r\n                                                            \"\r\n                                                            (hidden)=\"closeTooltip()\"\r\n                                                            #info=\"ngbTooltip\"\r\n                                                            tooltipClass=\"status-note-tooltip\"\r\n                                                            (mouseenter)=\"\r\n                                                                bindTheValueToStatusNote(\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    info\r\n                                                                )\r\n                                                            \"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 25\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchDefault>\r\n                                                <ng-container *ngIf=\"subline.objectKey !== 'description'\">\r\n                                                    <span annaCoreShowEllipsisTextOnHover>{{\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                    }}</span>\r\n                                                    <!-- <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'inventoryCode' &&\r\n                                                            ROW_DATA['isSellerGroup'] &&\r\n                                                            gtGeneralConfig.component === 'RATING'\r\n                                                        \"\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 remove-on-scroll-class\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToSellerGroupTooltip(\r\n                                                                ROW_DATA.sellerGroupHierarchy,\r\n                                                                info\r\n                                                            )\r\n                                                        \" \r\n                                                    >\r\n                                                    </i>-->\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageRating' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showRatingAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedRatingDifference\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageImpression' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showImpressionAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedImpDifference\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"subline.objectKey === 'description'\">\r\n                                                    <p\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionMessage ||\r\n                                                            ROW_DATA.descriptionEmailReferenceNum\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                            {{ ROW_DATA.descriptionMessage }}\r\n                                                            <br />\r\n                                                        </ng-container>\r\n                                                        <ng-container\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== '-' &&\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== ''\r\n                                                            \"\r\n                                                        >\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=\"\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'PDF' ||\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\r\n                                                        \"\r\n                                                    >\r\n                                                        <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                    </a>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.activityname.toLowerCase() === 'order onboarded'\r\n                                                        \"\r\n                                                    >\r\n                                                        <a\r\n                                                            *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\"\r\n                                                            (click)=\"viewDetailsClicked(ROW_DATA)\"\r\n                                                        >\r\n                                                            <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">\r\n                                                                View details\r\n                                                            </button>\r\n                                                        </a>\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        href=\"{{ ROW_DATA.descriptionEmailUrl }}\"\r\n                                                        target=\"_blank\"\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionEmailUrl !== '-' &&\r\n                                                            ROW_DATA.descriptionEmailUrl !== ''\r\n                                                        \"\r\n                                                    >\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                                    </div>\r\n                                </ng-container>\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\r\n        [width]=\"noDataWidth\"\r\n        [marginTop]=\"marginTop\"\r\n        *ngIf=\"isNoDataToDisplaySubject$ | async\"\r\n    >\r\n    </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    <anna-core-anna-column-checkbox-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-checkbox-filter>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    <anna-core-anna-column-slider-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-slider-filter>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <anna-core-anna-column-date-range-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-date-range-filter>\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    <anna-core-anna-column-time-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [showAllTimeRangeCheckboxes]=\"showCheckboxesForTimeFilter\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-time-filter>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n    <p class=\"black-color-text 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\">\r\n        This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #underDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Under-delivery percentage based on booked and posted RTG/IMPS.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #overDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Over-delivery percentage based on booked and posted RTG/IMPS.\r\n    </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 annaCoreShowEllipsisTextOnHover>{{ data.InventoryCode }}</span>\r\n                        </td>\r\n                        <td>\r\n                            <span annaCoreShowEllipsisTextOnHover>{{ 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 class=\"black-color-text\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tableInsideTooltip>\r\n    <label class=\"ellipsis-tooltip-heading\">{{ ellipsisWithTooltipHeading }}</label>\r\n    <section class=\"table-inside-tooltip-container\">\r\n        <table class=\"ellipsis-tooltip-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th\r\n                        [style.width]=\"header.width\"\r\n                        *ngFor=\"let header of ellipsisWithTooltipTableHeaders\"\r\n                    >\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ header.headerName }}</span\r\n                            >\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of ellipsisWithTooltipTableData\">\r\n                    <td *ngFor=\"let header of ellipsisWithTooltipTableHeaders\">\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ data[header.objectKey] }}</span\r\n                            >\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\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\">\r\n        The difference between posted and booked average rating is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">\r\n        The difference between posted and booked average impression is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </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 #avgBookedRate>\r\n    <p>This is the booked average Rate</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedRtg>\r\n    <p>This is the booked average RTG</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedImps>\r\n    <p>This is the booked average IMP(\u2019000)</p>\r\n</ng-template>\r\n\r\n<ng-template #projectedImpsRtg>\r\n    <p>\r\n        ANNA calculates projected RTG/IMPS values using either the computed estimates or the actual posted data,\r\n        depending on what is available. If posted data has not yet been received, ANNA will use the computed estimates\r\n        as the projected value. Once the actual posted data is received, the projection will automatically update to\r\n        reflect the real, posted values. This ensures that projected data is always based on the most accurate and\r\n        up-to-date information.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #automationTooltip>\r\n    <p>\r\n        Please get the order business rules approved to automate the orders. Only for the automated orders, any approved\r\n        MGs, ADUs, or credited spots on ANNA will be fed into the traffic system i.e. ANNA revisions.\r\n        <!-- removed below line as part of enhancmennt in 14.0 releas -->\r\n        <!-- Additionally, ANNA will only enter buyer revisions into traffic for the selected\r\n        Medialine/WOC orders. -->\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #rebateImpact>\r\n    <p>Rebate impact value is for the originally ordered spot length and is not equivalized.</p>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationTotalRowToolTip>\r\n    <ul>\r\n        <li>\r\n            <strong>POLITICAL RATE VIOLATIONS:</strong>\r\n            Violations flagged when non-political spots are booked at a rate lower than the minimum booked rate for\r\n            political candidates for the same week, Inventory Code and Revenue Class.\r\n        </li>\r\n        <li>\r\n            <strong>CANDIDATE TO CANDIDATE VIOLATION:</strong>\r\n            Violations flagged when political spots are booked at different rates to other political spots for the same\r\n            week, Inventory Code and Revenue Class.\r\n        </li>\r\n    </ul>\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<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                {{ data.value }}\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=\"notification-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 #programChangeTooltipTemplate>\r\n    <div class=\"program-schedule-tooltip\">\r\n        <h2>Program Change</h2>\r\n        <p class=\"previous\">Previous:</p>\r\n        <b annaCoreShowEllipsisTextOnHover>{{ textActionTooltip.OldProgramName }}</b>\r\n\r\n        <p class=\"updated\">Updated:</p>\r\n        <b\r\n            *ngIf=\"textActionTooltip.NewProgramNames.length === 1\"\r\n            annaCoreShowEllipsisTextOnHover\r\n            >{{ textActionTooltip.NewProgramNames[0] }}</b\r\n        >\r\n        <ul *ngIf=\"textActionTooltip.NewProgramNames.length > 1\">\r\n            <li *ngFor=\"let item of textActionTooltip.NewProgramNames\">\r\n                <label class=\"dot\"></label>\r\n                <span annaCoreShowEllipsisTextOnHover>{{ item }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #showOrHideToggleForTotalRowTooltip>\r\n    <div>\r\n        {{ showOrHideToggleForTotalRow && !gtGeneralConfig.totalRow ? \"Show Total Row\" : \"Hide Total Row\" }}\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n    <div\r\n        *ngIf=\"tooltipContainingTable\"\r\n        [innerHTML]=\"tooltipContainingTable.innerHtml\"\r\n        class=\"notification-tooltip-div-container\"\r\n    >\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-top:10px; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul> -->\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\r\n<ng-template #statusNoteTooltip>\r\n    <div>\r\n        <span class=\"status-note-tooltip\">{{ statusNoteForTooltip }}</span>\r\n        <span *ngIf=\"statusNoteForPopup.length > 100\"\r\n            >...<a\r\n                class=\"view-more-comments\"\r\n                (click)=\"showEntireStatusNote()\"\r\n                >View more</a\r\n            ></span\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtmlToolTipTemplate>\r\n    <div [innerHtml]=\"toolTipInnerHtmlData\"></div>\r\n</ng-template>\r\n", styles: ["::ng-deep .show-or-hide-toggle-tooltip .tooltip-inner{max-width:229px}.show-or-hide-toggle-btn.shift-toggle-top-on-total-row-click{transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),32px)}.show-or-hide-toggle-btn{width:16px;height:16px;padding:0;margin:0;border-radius:50%;position:absolute;transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),52px);z-index:999;background-color:#d9d9d9}.show-or-hide-toggle-btn i.mdi.mdi-menu-swap{font-size:16px;display:flex}#generic-table-conatiner.table-with-show-hide-total-row-toggle .total-row td:nth-of-type(2){padding-left:16px!important}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner{max-width:600px;width:min-content}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner>div{width:max-content}::ng-deep .generic-innerHtml-table-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}::ng-deep .generic-innerHtml-table-container{max-height:8.75rem;width:min-content;overflow:auto}::ng-deep .generic-innerHtml-table-container table{table-layout:fixed;width:100%}::ng-deep .generic-innerHtml-table-container table thead tr th{background:#e9e9e9;height:22px;padding:3px 8px;position:sticky;top:0;cursor:default;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0;box-shadow:inset 1px -1px #d4d4d4,inset 0 1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table thead tr th:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 1px #d4d4d4!important}::ng-deep .generic-innerHtml-table-container table tbody tr td{padding:3px 8px;width:100%;color:#000;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;box-shadow:inset 1px -1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr td:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 0 #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr:first-of-type td{border-top:none}::ng-deep .generic-innerHtml-table-container::-webkit-scrollbar-track{margin-top:22px!important}.sort-btn{background:#fff;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:var(--sort-label-fs);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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.red-text-totol-row{color:#f44336!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}table{margin-bottom:0;table-layout:fixed;width:100%}:host ::ng-deep .gt thead{top:.1px!important;position:relative}:host ::ng-deep .gt .header-row th{border:none;background:#ededed;padding:2px 8px;line-height:normal;position:sticky;position:-webkit-sticky;top:0;box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th .upper-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt .header-row th .lower-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt .header-row th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:max-content}:host ::ng-deep .gt .header-row th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt .header-row th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}:host ::ng-deep .gt .header-row th:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th:last-of-type{box-shadow:inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr td{padding:2px 8px;border:none;box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td div:nth-child(1){color:#000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td div:nth-child(2){color:#a7a7a7;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}: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:#2962ff}:host ::ng-deep .gt .cell-value{width:calc(100% - 24px)!important;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt .tooltip-text{color:#268bff;cursor:pointer;float:right}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:first-of-type{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4}.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{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:#2962ff}.time-filter-checkboxes>div>p{color:#151b1e}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}:host ::ng-deep mat-radio-group br{margin-top:0!important}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__background{width:var(--mat-radio-size);height:var(--mat-radio-size)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__inner-circle{border-width:calc(var(--mat-radio-size) / 2)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{margin:0 0 0 4px;padding:0;top:-2px;position:relative;font-size:var(--radio-button-label-fs)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio--disabled+label{color:var(--primary-text-color-dark)!important}:host ::ng-deep mat-radio-group mat-radio-button.mat-mdc-radio-button .mdc-form-field .mdc-radio{padding:0}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{left:-94px;font-size:12px;color:#4a4a4a;position:relative}:host ::ng-deep mat-radio-group mat-radio-button .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-selected-icon-color)}::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:#fff}::ng-deep tr.gray-background-row{background:#e9e9e980!important}.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 2px 0 -14px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -2px}::ng-deep .spot-info-tooltip .tooltip-inner{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{max-width:fit-content;width:310px!important}::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:nth-child(1){width:20px}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{width:30px;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,section.table-inside-tooltip-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{margin-top:1.5rem}section.table-inside-tooltip-container::-webkit-scrollbar-track{margin-top:1.1875rem}.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;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:8px 4px;color:#4a4a4a!important;font-size:11px!important;font-family:Roboto;font-size:11px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.notification-tooltip-div-container{text-align:left!important;padding:6px 8px;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:fit-content!important;max-width:520px;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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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 ul.pl-16{padding-left:16px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 0;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}.bottom-border{border-bottom:1px solid #d4d4d4!important}i.disabled{pointer-events:none!important}.black-color-text{color:#000}.white-space-nowrap{white-space:nowrap}.ellipsis-tooltip-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}table.ellipsis-tooltip-table{table-layout:fixed;width:100%}table.ellipsis-tooltip-table thead th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important}table.ellipsis-tooltip-table thead th{background:#e9e9e9;padding:3px 8px;line-height:normal;position:sticky;top:0;cursor:default;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}table.ellipsis-tooltip-table thead th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}table.ellipsis-tooltip-table tbody td{padding:3px 8px}table.ellipsis-tooltip-table tbody td .upper-label{width:100%;color:#000;text-overflow:ellipsis;overflow:hidden;display:inline-block;white-space:nowrap;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}table.ellipsis-tooltip-table tbody td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.ellipsis-tooltip-table tbody td:nth-of-type(n+2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}.pr-4{padding-right:4px}.status-note-tooltip{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;color:#4a4a4a;white-space:normal!important}.view-more-comments{display:block;color:#268bff;font-family:Roboto;font-size:.75rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;cursor:pointer;margin-left:2px}td.mat-column-isOrderStarred:has(.disabled-starring){pointer-events:none!important}td.mat-column-isOrderStarred .mdi.mdi-star.disabled-starring,td.mat-column-isOrderStarred .mdi.mdi-star-outline.disabled-starring{pointer-events:none!important;color:#dbdbdb80!important}table.disable-table-scrolling{overflow:hidden!important}.icon-tooltip-text{display:inline-block;color:#268bff}.text-with-icon-and-text.reduced-width{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px);margin-bottom:-3.5px}.innrHtml-tooltip-icon-marker{float:right;color:#268bff}.reduced-width-text{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ShowEllipsisTextOnHoverDirective, selector: "[annaCoreShowEllipsisTextOnHover]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: AnnaIconColumnComponent, selector: "anna-core-icon-column", inputs: ["componentName", "iconToShow", "dataObject"], outputs: ["columnIconClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AnnaNoDataComponent, selector: "anna-core-no-data-lib", inputs: ["width", "marginTop"] }, { kind: "component", type: AnnaColumnCheckboxFilterComponent, selector: "anna-core-anna-column-checkbox-filter", inputs: ["showFilterHeaderTabs", "isLurAndCsrComponent", "tableData", "clonedTableData", "filterTabObjects"], outputs: ["filterAppliedToTable", "sortingAppliedToTable", "getSortType", "closeTooltip"] }, { kind: "component", type: AnnaColumnSliderFilterComponent, selector: "anna-core-anna-column-slider-filter", inputs: ["filterTabObjects", "isLurAndCsrComponent", "tableData", "showFilterHeaderTabs", "clonedTableData"], outputs: ["closeTooltip", "filterAppliedToTable", "getSortType", "sortingAppliedToTable"] }, { kind: "component", type: AnnaColumnDateRangeFilterComponent, selector: "anna-core-anna-column-date-range-filter", inputs: ["tableData", "clonedTableData", "filterTabObjects", "isLurAndCsrComponent", "showFilterHeaderTabs"], outputs: ["filterAppliedToTable", "sortingAppliedToTable", "getSortType", "closeTooltip"] }, { kind: "component", type: AnnaColumnTimeFilterComponent, selector: "anna-core-anna-column-time-filter", inputs: ["tableData", "clonedTableData", "filterTabObjects", "isLurAndCsrComponent", "showFilterHeaderTabs", "showAllTimeRangeCheckboxes", "gtGeneralConfig", "showClearAllFilter", "startFromText", "endToText", "isSortAndFilterAbsent"], outputs: ["timeChanges", "timeChangedEmitter", "filterAppliedToTable", "sortingAppliedToTable", "getSortType", "closeTooltip"] }, { kind: "ngmodule", type: NgCircleProgressModule }, { kind: "component", type: i8.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AnnaEstIconTemplateComponent, selector: "anna-core-anna-est-icon-template" }, { kind: "component", type: AnnaSingleSelectComponent, selector: "anna-core-single-select", inputs: ["config", "loading", "showAdditionalDataInSelectedText", "disabled", "items", "selectedItem", "keyToUseForDisplay", "keyToUseForCheckingSelectedItem", "hideDropdownArrow", "borderbottomObject", "defaultDropdownHeight", "itemsToHideInDropdownIds", "showClearSelection"], outputs: ["valueChanged", "dropdownClosedEvent", "dropdownOpenedEvent", "clearSelectionClickedEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaNonEditableGenericTableComponent, decorators: [{
             type: Component,
@@ -5415,7 +5475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AsyncPipe,
                         AnnaEstIconTemplateComponent,
                         AnnaSingleSelectComponent,
-                    ], template: "<div\r\n    id=\"generic-table-conatiner\"\r\n    #tableElementRef\r\n    class=\"table-container {{ gtGeneralConfig?.tableOuterContainerName }} {{ tableBottomBorderClass }}\"\r\n    [ngClass]=\"{\r\n        'scroll-left-shadow-effect': isScrolledLeft,\r\n        'scroll-right-shadow-effect': !isScrollEnded,\r\n        'clickable-row': clickableRow,\r\n        'no-data-table': (isNoDataToDisplaySubject$ | async),\r\n        'table-with-show-hide-total-row-toggle': showOrHideToggleForTotalRow\r\n    }\"\r\n    (scroll)=\"onTableContainerScroll($event)\"\r\n>\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 < noOfRowsToCheck\r\n                    ? 'calc(' +\r\n                      (gtDimension.rowHeight * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight)) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <button\r\n            *ngIf=\"showOrHideToggleForTotalRow && !showSkeletonLoading && (isNoDataToDisplaySubject$ | async) === false\"\r\n            [ngClass]=\"{\r\n                'shift-toggle-top-on-total-row-click': !gtGeneralConfig.totalRow\r\n            }\"\r\n            class=\"show-or-hide-toggle-btn\"\r\n            (click)=\"showHideTotalRow()\"\r\n        >\r\n            <i\r\n                class=\"mdi mdi-menu-swap\"\r\n                tooltipClass=\"show-or-hide-toggle-tooltip\"\r\n                placement=\"auto\"\r\n                container=\"body\"\r\n                [ngbTooltip]=\"showOrHideToggleForTotalRowTooltip\"\r\n            ></i>\r\n        </button>\r\n        <table\r\n            class=\"gt\"\r\n            [ngClass]=\"tableClass\"\r\n            mat-table\r\n            [dataSource]=\"renderedData\"\r\n        >\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\"\r\n                (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"column.colName\"\r\n                *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\"\r\n            >\r\n                <td\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [attr.colspan]=\"column.colspan\"\r\n                    class=\"{{ column.class }}\"\r\n                >\r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a\r\n                            *ngFor=\"let data of column.actionData\"\r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\"\r\n                        >\r\n                            {{ data.name }}\r\n                        </a>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"column['isIconColumn']\">\r\n                        <i\r\n                            class=\"{{ column?.iconData?.class }}\"\r\n                            (click)=\"iconClickedInTotalRow(column?.colName)\"\r\n                        >\r\n                        </i>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong class=\"upper-label\"\r\n                            >{{ column.data }}\r\n                            <span\r\n                                class=\"red-text-totol-row\"\r\n                                *ngIf=\"column.additionalRedTextAfterData\"\r\n                                >{{ column.additionalRedTextAfterData }}</span\r\n                            ></strong\r\n                        >\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <br />\r\n                            <span\r\n                                *ngIf=\"\r\n                                    column.colName === 'total-potential-booked-unit' &&\r\n                                        gtGeneralConfig.component === 'RATING';\r\n                                    else columnLowerData\r\n                                \"\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 && 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 class=\"lower-label\">{{ column.lowerData }}</span>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage && gtGeneralConfig.component !== 'LUR_VIOLATIONS'\">\r\n                            <i\r\n                                class=\"{{ column.tooltipIconClass }}\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"column.tooltipMessage\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"top bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"gtGeneralConfig.component === 'LUR_VIOLATIONS' && column.tooltipMessage\">\r\n                            <i\r\n                                class=\"mi mdi-info-outline info-label\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationTotalRowToolTip\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"columnDef.headerInfo[0].objectKey\"\r\n                *ngFor=\"let columnDef of tableHeaders; trackBy: trackByFn\"\r\n            >\r\n                <th\r\n                    #tableHeader\r\n                    nowrap\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [style.width]=\"columnDef.width\"\r\n                >\r\n                    <div\r\n                        class=\"row mx-0\"\r\n                        *ngFor=\"let header of columnDef.headerInfo; let j = index\"\r\n                    >\r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            <ngx-skeleton-loader\r\n                                *ngIf=\"header.name == null\"\r\n                                count=\"1\"\r\n                                [theme]=\"{\r\n                                    height: '10px',\r\n                                    display: 'block',\r\n                                    width: columnDef.width,\r\n                                    'max-width': 'calc(100% - 20px)'\r\n                                }\"\r\n                            >\r\n                            </ngx-skeleton-loader>\r\n                            <ng-container *ngIf=\"header.name\">\r\n                                {{ header.name }}\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.tooltip && header.tooltip.tooltipMessage\">\r\n                                <i\r\n                                    class=\"{{ header['tooltip'].iconClass }}\"\r\n                                    [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                    #t=\"ngbTooltip\"\r\n                                    container=\"body\"\r\n                                    [ngbTooltip]=\"header.tooltip.tooltipMessage\"\r\n                                    container=\"body\"\r\n                                    placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                    tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                                >\r\n                                </i>\r\n                            </ng-container>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'impsInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"\r\n                                    header.tooltip && header.tooltip.name === 'spotsColumnEquivalizationMessageTooltip'\r\n                                \"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'underDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"underDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'overDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"overDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ratingInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rateInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ongoingRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'completedRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRate'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRate\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRtg\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedImps'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedImps\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'automationTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"automationTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rebateImpact'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rebateImpact\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'projectedImpsRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"projectedImpsRtg\"\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\r\n                            *ngIf=\"gtGeneralConfig.showAllColumnFilter\"\r\n                            class=\"sort-filter-container\"\r\n                        >\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"{{ filterAlignment }}\"\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top auto\"\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\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'lurViolationInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *matCellDef=\"let ROW_DATA\">\r\n                    <td\r\n                        mat-cell\r\n                        [style.background]=\"ROW_DATA.backgroundColor\"\r\n                        [style.border]=\"ROW_DATA.border\"\r\n                        class=\"{{ ROW_DATA.rowClass }}\"\r\n                        [ngClass]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'TdClass']\"\r\n                        [attr.rowspan]=\"tdsHaveRowSpan ? ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan'] : 1\"\r\n                        *ngIf=\"\r\n                            !hideSomeTds ||\r\n                            (hideSomeTds && !ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td'])\r\n                        \"\r\n                    >\r\n                        <ngx-skeleton-loader\r\n                            *ngIf=\"showSkeletonLoading\"\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '10px', display: 'block', marginBottom: '0' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && (isNoDataToDisplaySubject$ | async) === false\">\r\n                                <ng-container\r\n                                    *ngFor=\"\r\n                                        let subline of columnDef.headerInfo;\r\n                                        let subLineIndex = index;\r\n                                        trackBy: trackByFn\r\n                                    \"\r\n                                >\r\n                                    <div annaCoreShowEllipsisTextOnHover>\r\n                                        <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                            <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                                <i\r\n                                                    *ngIf=\"\r\n                                                        !(\r\n                                                            starredInProgress &&\r\n                                                            ROW_DATA.orderId === selectedStarredOrderId\r\n                                                        )\r\n                                                    \"\r\n                                                    [class]=\"ROW_DATA.iconClass\"\r\n                                                    [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    (click)=\"iconClicked(ROW_DATA, ROW_DATA.iconClass)\"\r\n                                                    ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                ></i>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        starredInProgress && ROW_DATA.orderId === selectedStarredOrderId\r\n                                                    \"\r\n                                                >\r\n                                                    <div\r\n                                                        class=\"spinner-for-button-directive\"\r\n                                                        [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    ></div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\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                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"\r\n                                                            action.showTooltip && action?.tooltipData\r\n                                                                ? action.tooltipData\r\n                                                                : null\r\n                                                        \"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                                <p\r\n                                                    [innerHTML]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    (click)=\"innerHTMLCellClicked($event, ROW_DATA)\"\r\n                                                ></p>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.showObjectKey\"\r\n                                                    >\r\n                                                        {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                    </span>\r\n\r\n                                                    <span\r\n                                                        class=\"pr-4 {{ action?.additionalTextClass }}\"\r\n                                                        *ngIf=\"action?.additionalText\"\r\n                                                    >\r\n                                                        {{ action?.additionalText }}\r\n                                                    </span>\r\n\r\n                                                    <anna-core-icon-column\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.svgOrIconName\"\r\n                                                        [componentName]=\"gtGeneralConfig.component\"\r\n                                                        [dataObject]=\"ROW_DATA\"\r\n                                                        [iconToShow]=\"action.svgOrIconName\"\r\n                                                        data-html=\"true\"\r\n                                                        [ngbTooltip]=\"tipContent\"\r\n                                                        [disableTooltip]=\"!action?.svgOrIconTooltipMsg\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        (columnIconClicked)=\"\r\n                                                            svgIconClicked(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].actionKey\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-template #tipContent>\r\n                                                            <div [innerHTML]=\"action?.svgOrIconTooltipMsg\"></div\r\n                                                        ></ng-template>\r\n                                                    </anna-core-icon-column>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <button\r\n                                                        *ngIf=\"text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        [ngbTooltip]=\"textActionTooltipTemplate\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                    >\r\n                                                        {{ text.name }}\r\n                                                    </button>\r\n\r\n                                                    <button\r\n                                                        *ngIf=\"!text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                    >\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':\r\n                                                            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':\r\n                                                            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\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                        ngbTooltip=\"tooltipContainingTableTemplate\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                                <a\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                    [class]=\"text.class\"\r\n                                                    (click)=\"onClickableDataClicked(ROW_DATA, text.id)\"\r\n                                                    >{{ text.name }}</a\r\n                                                >\r\n                                                <span\r\n                                                    *ngIf=\"\r\n                                                        subline.objectKey === 'displayBookedUnits' &&\r\n                                                        gtGeneralConfig.component === 'RATING'\r\n                                                    \"\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\"\r\n                                                        >get_app</span\r\n                                                    >\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            downloadInProgress &&\r\n                                                            ROW_DATA.inventoryCodeId ===\r\n                                                                selectedInventoryIdForDownload &&\r\n                                                            ROW_DATA.demographic === selectedDemographicForDownload\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"circularProgressBar\"\r\n                                                        ></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\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [class]=\"action.additionalTextBeforeLinkClass\"\r\n                                                        [innerHtml]=\"action.additionalTextBeforeLink\"\r\n                                                        ngbTooltip=\"{{ action.additionalTextBeforeLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalText\"\r\n                                                    ></span>\r\n\r\n                                                    <ng-container *ngIf=\"action && action.typeOfData === 'STRING'\">\r\n                                                        <span\r\n                                                            class=\"text-with-icon-and-text\"\r\n                                                            [ngClass]=\"{ 'reduced-width': action.showIcon }\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            >{{ action.data }}</span\r\n                                                        >\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        [id]=\"action.id\"\r\n                                                        *ngIf=\"action.showLink\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [class]=\"action.linkClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledLink }\"\r\n                                                        >{{ action.data }}</a\r\n                                                    >\r\n                                                    <span\r\n                                                        ngbTooltip=\"{{ action.additionalTextAfterLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action.additionalTextAfterLinkClass\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalAfterText\"\r\n                                                    >\r\n                                                        {{ action.additionalTextAfterLink }}\r\n                                                    </span>\r\n\r\n                                                    <ng-container *ngIf=\"action.showTooltip\">\r\n                                                        <ng-container *ngIf=\"action.tooltipData.innerHtml\">\r\n                                                            <i\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [class]=\"action.iconClass\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                placement=\"bottom auto\"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                                [ngbTooltip]=\"tooltipContainingTableTemplate\"\r\n                                                            >\r\n                                                            </i>\r\n                                                        </ng-container>\r\n\r\n                                                        <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                            <span\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                class=\"icon-tooltip-text\"\r\n                                                                (click)=\"\r\n                                                                    iconClickedOnStringIconActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        action.id,\r\n                                                                        columnDef.headerInfo[subLineIndex]\r\n                                                                    )\r\n                                                                \"\r\n                                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                [placement]=\"\r\n                                                                    action.tooltipPlacement\r\n                                                                        ? action.tooltipPlacement\r\n                                                                        : 'bottom auto'\r\n                                                                \"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                    action.tooltipClass\r\n                                                                }}\"\r\n                                                                [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                            >\r\n                                                                <i [class]=\"action.iconClass\"> </i>\r\n                                                                {{ action.additionalTextAfterIcon ?? \"\" }}\r\n                                                            </span>\r\n                                                            <ng-container *ngIf=\"action['showSvgIcon']\">\r\n                                                                <anna-core-anna-est-icon-template\r\n                                                                    class=\"float-right\"\r\n                                                                    *ngIf=\"action['svgIconName'] === 'anna-icon'\"\r\n                                                                    (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                    (mouseenter)=\"\r\n                                                                        mouseEnterOnStringTextActionType(\r\n                                                                            ROW_DATA,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                                .tooltipKey\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [placement]=\"\r\n                                                                        action.tooltipPlacement\r\n                                                                            ? action.tooltipPlacement\r\n                                                                            : 'bottom auto'\r\n                                                                    \"\r\n                                                                    tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                        action['tooltipClass']\r\n                                                                    }}\"\r\n                                                                    [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                                    container=\"body\"\r\n                                                                    [autoClose]=\"true\"\r\n                                                                >\r\n                                                                </anna-core-anna-est-icon-template>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </ng-container>\r\n\r\n                                                    <ng-container *ngIf=\"!action.showTooltip\">\r\n                                                        <i\r\n                                                            *ngIf=\"action.showIcon\"\r\n                                                            [class]=\"action.iconClass\"\r\n                                                            [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                            (click)=\"\r\n                                                                iconClickedOnStringIconActionType(\r\n                                                                    ROW_DATA,\r\n                                                                    action.id,\r\n                                                                    columnDef.headerInfo[subLineIndex]\r\n                                                                )\r\n                                                            \"\r\n                                                        >\r\n                                                        </i>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_OR_INPUT'\">\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]?.type ===\r\n                                                            'STRING';\r\n                                                        else inputBox\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [innerHtml]=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.value\r\n                                                        \"\r\n                                                    ></span>\r\n                                                </ng-container>\r\n\r\n                                                <ng-template #inputBox>\r\n                                                    <span class=\"input-box-container\">\r\n                                                        <input\r\n                                                            placeholder=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    ?.placeholder\r\n                                                            }}\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            class=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .className\r\n                                                            }}\"\r\n                                                            (keydown)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    false\r\n                                                                )\r\n                                                            \"\r\n                                                            (paste)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    true\r\n                                                                )\r\n                                                            \"\r\n                                                            (ngModelChange)=\"\r\n                                                                editableInputValueChanged(\r\n                                                                    $event,\r\n                                                                    ROW_DATA,\r\n                                                                    columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                )\r\n                                                            \"\r\n                                                            [ngModel]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .value\r\n                                                            \"\r\n                                                            [disabled]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .disabled\r\n                                                            \"\r\n                                                            [ngClass]=\"{\r\n                                                                'red-border':\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ].hasError\r\n                                                            }\"\r\n                                                        />\r\n\r\n                                                        <ng-container\r\n                                                            *ngFor=\"\r\n                                                                let action of ROW_DATA[\r\n                                                                    columnDef.headerInfo[subLineIndex].actionKey\r\n                                                                ]\r\n                                                            \"\r\n                                                        >\r\n                                                            <i\r\n                                                                *ngIf=\"action?.showIcon\"\r\n                                                                container=\"body\"\r\n                                                                [ngbTooltip]=\"tipContent\"\r\n                                                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                                                placement=\"bottom\"\r\n                                                                class=\"{{ action?.iconClass }}\"\r\n                                                            >\r\n                                                                <ng-template #tipContent>\r\n                                                                    <div [innerHTML]=\"action?.iconTooltip\"></div\r\n                                                                ></ng-template>\r\n                                                            </i>\r\n                                                            <ng-container *ngIf=\"action?.showSvgIcon\">\r\n                                                                <anna-core-icon-column\r\n                                                                    class=\"pr-4\"\r\n                                                                    *ngIf=\"action?.svgOrIconName\"\r\n                                                                    [componentName]=\"gtGeneralConfig.component\"\r\n                                                                    [dataObject]=\"ROW_DATA\"\r\n                                                                    [iconToShow]=\"action?.svgOrIconName\"\r\n                                                                    data-html=\"true\"\r\n                                                                    [ngbTooltip]=\"tipContent\"\r\n                                                                    placement=\"auto\"\r\n                                                                    container=\"body\"\r\n                                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                                >\r\n                                                                    <ng-template #tipContent>\r\n                                                                        <div\r\n                                                                            [innerHTML]=\"action?.svgOrIconTooltipMsg\"\r\n                                                                        ></div></ng-template\r\n                                                                ></anna-core-icon-column>\r\n                                                            </ng-container>\r\n                                                            <ng-container *ngIf=\"action?.showLink\">\r\n                                                                <a\r\n                                                                    [id]=\"action?.id\"\r\n                                                                    (click)=\"\r\n                                                                        textActionClicked(\r\n                                                                            ROW_DATA,\r\n                                                                            action?.id,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [class]=\"action.linkClass\"\r\n                                                                    >{{ action?.linkText }}\r\n                                                                </a>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </span>\r\n                                                </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                                <span\r\n                                                    [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                ></span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_SELECT_DROPDOWN'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let dropdown of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ];\r\n                                                        let dropdownIndex = index\r\n                                                    \"\r\n                                                >\r\n                                                    <anna-core-single-select\r\n                                                        class=\"gt-single-select dropdown {{ dropdown?.className }}\"\r\n                                                        [ngClass]=\"{ error: !dropdown?.selectedItem }\"\r\n                                                        [items]=\"dropdown?.itemList\"\r\n                                                        [selectedItem]=\"dropdown?.selectedItem\"\r\n                                                        [config]=\"dropdown?.dropdownConfig\"\r\n                                                        (valueChanged)=\"\r\n                                                            onDropdownChanged($event, ROW_DATA, dropdownIndex)\r\n                                                        \"\r\n                                                    >\r\n                                                    </anna-core-single-select>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_RADIO'\">\r\n                                                <span\r\n                                                    *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                    }\"\r\n                                                    class=\"mdi mdi-radiobox-marked\"\r\n                                                    (click)=\"(null)\"\r\n                                                >\r\n                                                </span>\r\n                                                <span\r\n                                                    *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    class=\"mdi mdi-radiobox-blank\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            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                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                                <mat-radio-group\r\n                                                    *ngIf=\"ROW_DATA['RadioButtonConfig']; else showHyphen\"\r\n                                                    [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                    [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                                >\r\n                                                    <ng-container\r\n                                                        *ngFor=\"\r\n                                                            let radioButton of ROW_DATA['RadioButtonConfig'];\r\n                                                            let last = last\r\n                                                        \"\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 }}\r\n                                                        </mat-radio-button>\r\n                                                        <i\r\n                                                            class=\" {{ radioButton.iconClass }}\"\r\n                                                            (click)=\"radioButtonIconClicked(ROW_DATA)\"\r\n                                                        ></i>\r\n                                                        <i\r\n                                                            *ngIf=\"radioButton.tooltipMessage\"\r\n                                                            class=\"mi mdi-info-outline\"\r\n                                                            [ngbTooltip]=\"radioButton.tooltipMessage\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        ></i>\r\n                                                        <br *ngIf=\"!last\" />\r\n                                                    </ng-container>\r\n                                                </mat-radio-group>\r\n                                                <ng-template #showHyphen> - </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span class=\"action-data\"> {{ action?.dataToDisplay }}</span>\r\n                                                    <ng-container *ngIf=\"action?.additionalTextWoTooltip\">\r\n                                                        <span\r\n                                                            class=\"additional-text-wo-tooltip\"\r\n                                                            [innerHtml]=\"action.additionalTextWoTooltip\"\r\n                                                        >\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"stringWithTooltipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey,\r\n                                                                tooltipWithStringRef\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action?.tooltipIconClass\"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithStringRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                    </span>\r\n                                                    <span>{{ action?.dataToDisplayAfterTooltip }}</span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_ELLIPSIS_WITH_TABLE_TOOLTIP'\">\r\n                                                <div class=\"new-ellipsis-container\">\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"cell-value\"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                .cellValue\r\n                                                        }}\r\n                                                    </span>\r\n                                                    <span\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.showTooltip\r\n                                                        \"\r\n                                                        class=\"tooltip-text\"\r\n                                                        [ngbTooltip]=\"tableInsideTooltip\"\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=\"table-inside-tooltip remove-on-scroll-class {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipClass\r\n                                                        }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToTableTooltip(\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                                info\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipHoverText\r\n                                                        }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\">\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length <\r\n                                                        26\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    [triggers]=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        100\r\n                                                            ? 'manual'\r\n                                                            : 'hover focus'\r\n                                                    \"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"status-note-tooltip\"\r\n                                                    (mouseenter)=\"\r\n                                                        bindTheValueToStatusNote(\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                            info\r\n                                                        )\r\n                                                    \"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        25\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP_INNER_HTML'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"action-data\"\r\n                                                        [ngClass]=\"action?.showTooltip ? 'reduced-width-text' : ''\"\r\n                                                    >\r\n                                                        {{ action?.dataToDisplay }}</span\r\n                                                    >\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"innerHtmlToolTipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithInnerHtmlTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                action,\r\n                                                                tooltipWithInnerHtmlRef,\r\n                                                                !action.isManualTrigger\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"\r\n                                                            'innrHtml-tooltip-icon-marker ' + action?.tooltipIconClass\r\n                                                        \"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithInnerHtmlRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-innerHtml-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                        {{ action.tooltipMarkerText }}\r\n                                                    </span>\r\n                                                    <span *ngIf=\"action?.dataToDisplayAfterTooltip\">\r\n                                                        {{ action?.dataToDisplayAfterTooltip }}\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container\r\n                                                *ngSwitchCase=\"\r\n                                                    'ICON_CELL_AND_STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\r\n                                                \"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        title=\"\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"action.showTooltip ? action.tooltipData : null\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <ng-container *ngIf=\"action.showObjectKey\">\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length < 26\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            [autoClose]=\"true\"\r\n                                                            [triggers]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 100\r\n                                                                    ? 'manual'\r\n                                                                    : 'hover focus'\r\n                                                            \"\r\n                                                            (hidden)=\"closeTooltip()\"\r\n                                                            #info=\"ngbTooltip\"\r\n                                                            tooltipClass=\"status-note-tooltip\"\r\n                                                            (mouseenter)=\"\r\n                                                                bindTheValueToStatusNote(\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    info\r\n                                                                )\r\n                                                            \"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 25\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchDefault>\r\n                                                <ng-container *ngIf=\"subline.objectKey !== 'description'\">\r\n                                                    <span annaCoreShowEllipsisTextOnHover>{{\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                    }}</span>\r\n                                                    <!-- <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'inventoryCode' &&\r\n                                                            ROW_DATA['isSellerGroup'] &&\r\n                                                            gtGeneralConfig.component === 'RATING'\r\n                                                        \"\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 remove-on-scroll-class\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToSellerGroupTooltip(\r\n                                                                ROW_DATA.sellerGroupHierarchy,\r\n                                                                info\r\n                                                            )\r\n                                                        \" \r\n                                                    >\r\n                                                    </i>-->\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageRating' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showRatingAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedRatingDifference\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageImpression' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showImpressionAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedImpDifference\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"subline.objectKey === 'description'\">\r\n                                                    <p\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionMessage ||\r\n                                                            ROW_DATA.descriptionEmailReferenceNum\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                            {{ ROW_DATA.descriptionMessage }}\r\n                                                            <br />\r\n                                                        </ng-container>\r\n                                                        <ng-container\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== '-' &&\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== ''\r\n                                                            \"\r\n                                                        >\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=\"\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'PDF' ||\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\r\n                                                        \"\r\n                                                    >\r\n                                                        <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                    </a>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.activityname.toLowerCase() === 'order onboarded'\r\n                                                        \"\r\n                                                    >\r\n                                                        <a\r\n                                                            *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\"\r\n                                                            (click)=\"viewDetailsClicked(ROW_DATA)\"\r\n                                                        >\r\n                                                            <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">\r\n                                                                View details\r\n                                                            </button>\r\n                                                        </a>\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        href=\"{{ ROW_DATA.descriptionEmailUrl }}\"\r\n                                                        target=\"_blank\"\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionEmailUrl !== '-' &&\r\n                                                            ROW_DATA.descriptionEmailUrl !== ''\r\n                                                        \"\r\n                                                    >\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                                    </div>\r\n                                </ng-container>\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\r\n        [width]=\"noDataWidth\"\r\n        [marginTop]=\"marginTop\"\r\n        *ngIf=\"isNoDataToDisplaySubject$ | async\"\r\n    >\r\n    </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    <anna-core-anna-column-checkbox-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-checkbox-filter>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    <anna-core-anna-column-slider-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-slider-filter>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <anna-core-anna-column-date-range-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-date-range-filter>\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    <anna-core-anna-column-time-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [showAllTimeRangeCheckboxes]=\"showCheckboxesForTimeFilter\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-time-filter>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n    <p class=\"black-color-text 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\">\r\n        This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #underDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Under-delivery percentage based on booked and posted RTG/IMPS.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #overDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Over-delivery percentage based on booked and posted RTG/IMPS.\r\n    </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 annaCoreShowEllipsisTextOnHover>{{ data.InventoryCode }}</span>\r\n                        </td>\r\n                        <td>\r\n                            <span annaCoreShowEllipsisTextOnHover>{{ 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 class=\"black-color-text\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tableInsideTooltip>\r\n    <label class=\"ellipsis-tooltip-heading\">{{ ellipsisWithTooltipHeading }}</label>\r\n    <section class=\"table-inside-tooltip-container\">\r\n        <table class=\"ellipsis-tooltip-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th\r\n                        [style.width]=\"header.width\"\r\n                        *ngFor=\"let header of ellipsisWithTooltipTableHeaders\"\r\n                    >\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ header.headerName }}</span\r\n                            >\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of ellipsisWithTooltipTableData\">\r\n                    <td *ngFor=\"let header of ellipsisWithTooltipTableHeaders\">\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ data[header.objectKey] }}</span\r\n                            >\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\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\">\r\n        The difference between posted and booked average rating is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">\r\n        The difference between posted and booked average impression is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </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 #avgBookedRate>\r\n    <p>This is the booked average Rate</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedRtg>\r\n    <p>This is the booked average RTG</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedImps>\r\n    <p>This is the booked average IMP(\u2019000)</p>\r\n</ng-template>\r\n\r\n<ng-template #projectedImpsRtg>\r\n    <p>\r\n        ANNA calculates projected RTG/IMPS values using either the computed estimates or the actual posted data,\r\n        depending on what is available. If posted data has not yet been received, ANNA will use the computed estimates\r\n        as the projected value. Once the actual posted data is received, the projection will automatically update to\r\n        reflect the real, posted values. This ensures that projected data is always based on the most accurate and\r\n        up-to-date information.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #automationTooltip>\r\n    <p>\r\n        Please get the order business rules approved to automate the orders. Only for the automated orders, any approved\r\n        MGs, ADUs, or credited spots on ANNA will be fed into the traffic system i.e. ANNA revisions.\r\n        <!-- removed below line as part of enhancmennt in 14.0 releas -->\r\n        <!-- Additionally, ANNA will only enter buyer revisions into traffic for the selected\r\n        Medialine/WOC orders. -->\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #rebateImpact>\r\n    <p>Rebate impact value is for the originally ordered spot length and is not equivalized.</p>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationTotalRowToolTip>\r\n    <ul>\r\n        <li>\r\n            <strong>POLITICAL RATE VIOLATIONS:</strong>\r\n            Violations flagged when non-political spots are booked at a rate lower than the minimum booked rate for\r\n            political candidates for the same week, Inventory Code and Revenue Class.\r\n        </li>\r\n        <li>\r\n            <strong>CANDIDATE TO CANDIDATE VIOLATION:</strong>\r\n            Violations flagged when political spots are booked at different rates to other political spots for the same\r\n            week, Inventory Code and Revenue Class.\r\n        </li>\r\n    </ul>\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<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                {{ data.value }}\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=\"notification-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 #programChangeTooltipTemplate>\r\n    <div class=\"program-schedule-tooltip\">\r\n        <h2>Program Change</h2>\r\n        <p class=\"previous\">Previous:</p>\r\n        <b annaCoreShowEllipsisTextOnHover>{{ textActionTooltip.OldProgramName }}</b>\r\n\r\n        <p class=\"updated\">Updated:</p>\r\n        <b\r\n            *ngIf=\"textActionTooltip.NewProgramNames.length === 1\"\r\n            annaCoreShowEllipsisTextOnHover\r\n            >{{ textActionTooltip.NewProgramNames[0] }}</b\r\n        >\r\n        <ul *ngIf=\"textActionTooltip.NewProgramNames.length > 1\">\r\n            <li *ngFor=\"let item of textActionTooltip.NewProgramNames\">\r\n                <label class=\"dot\"></label>\r\n                <span annaCoreShowEllipsisTextOnHover>{{ item }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #showOrHideToggleForTotalRowTooltip>\r\n    <div>\r\n        {{ showOrHideToggleForTotalRow && !gtGeneralConfig.totalRow ? \"Show Total Row\" : \"Hide Total Row\" }}\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n    <div\r\n        *ngIf=\"tooltipContainingTable\"\r\n        [innerHTML]=\"tooltipContainingTable.innerHtml\"\r\n        class=\"notification-tooltip-div-container\"\r\n    >\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-top:10px; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul> -->\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\r\n<ng-template #statusNoteTooltip>\r\n    <div>\r\n        <span class=\"status-note-tooltip\">{{ statusNoteForTooltip }}</span>\r\n        <span *ngIf=\"statusNoteForPopup.length > 100\"\r\n            >...<a\r\n                class=\"view-more-comments\"\r\n                (click)=\"showEntireStatusNote()\"\r\n                >View more</a\r\n            ></span\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtmlToolTipTemplate>\r\n    <div [innerHtml]=\"toolTipInnerHtmlData\"></div>\r\n</ng-template>\r\n", styles: ["::ng-deep .show-or-hide-toggle-tooltip .tooltip-inner{max-width:229px}.show-or-hide-toggle-btn.shift-toggle-top-on-total-row-click{transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),32px)}.show-or-hide-toggle-btn{width:16px;height:16px;padding:0;margin:0;border-radius:50%;position:absolute;transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),52px);z-index:999;background-color:#d9d9d9}.show-or-hide-toggle-btn i.mdi.mdi-menu-swap{font-size:16px;display:flex}#generic-table-conatiner.table-with-show-hide-total-row-toggle .total-row td:nth-of-type(2){padding-left:16px!important}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner{max-width:600px;width:min-content}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner>div{width:max-content}::ng-deep .generic-innerHtml-table-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}::ng-deep .generic-innerHtml-table-container{max-height:8.75rem;width:min-content;overflow:auto}::ng-deep .generic-innerHtml-table-container table{table-layout:fixed;width:100%}::ng-deep .generic-innerHtml-table-container table thead tr th{background:#e9e9e9;height:22px;padding:3px 8px;position:sticky;top:0;cursor:default;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0;box-shadow:inset 1px -1px #d4d4d4,inset 0 1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table thead tr th:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 1px #d4d4d4!important}::ng-deep .generic-innerHtml-table-container table tbody tr td{padding:3px 8px;width:100%;color:#000;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;box-shadow:inset 1px -1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr td:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 0 #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr:first-of-type td{border-top:none}::ng-deep .generic-innerHtml-table-container::-webkit-scrollbar-track{margin-top:22px!important}.sort-btn{background:#fff;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:var(--sort-label-fs);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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.red-text-totol-row{color:#f44336!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}table{margin-bottom:0;table-layout:fixed;width:100%}:host ::ng-deep .gt thead{top:.1px!important;position:relative}:host ::ng-deep .gt .header-row th{border:none;background:#ededed;padding:2px 8px;line-height:normal;position:sticky;position:-webkit-sticky;top:0;box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th .upper-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt .header-row th .lower-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt .header-row th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:max-content}:host ::ng-deep .gt .header-row th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt .header-row th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}:host ::ng-deep .gt .header-row th:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th:last-of-type{box-shadow:inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr td{padding:2px 8px;border:none;box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td div:nth-child(1){color:#000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td div:nth-child(2){color:#a7a7a7;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}: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:#2962ff}:host ::ng-deep .gt .cell-value{width:calc(100% - 24px)!important;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt .tooltip-text{color:#268bff;cursor:pointer;float:right}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:first-of-type{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4}.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{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:#2962ff}.time-filter-checkboxes>div>p{color:#151b1e}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}:host ::ng-deep mat-radio-group br{margin-top:0!important}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__background{width:var(--mat-radio-size);height:var(--mat-radio-size)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__inner-circle{border-width:calc(var(--mat-radio-size) / 2)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{margin:0 0 0 4px;padding:0;top:-2px;position:relative;font-size:var(--radio-button-label-fs)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio--disabled+label{color:var(--primary-text-color-dark)!important}:host ::ng-deep mat-radio-group mat-radio-button.mat-mdc-radio-button .mdc-form-field .mdc-radio{padding:0}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{left:-94px;font-size:12px;color:#4a4a4a;position:relative}:host ::ng-deep mat-radio-group mat-radio-button .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-selected-icon-color)}::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:#fff}::ng-deep tr.gray-background-row{background:#e9e9e980!important}.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 2px 0 -14px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -2px}::ng-deep .spot-info-tooltip .tooltip-inner{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{max-width:fit-content;width:310px!important}::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:nth-child(1){width:20px}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{width:30px;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,section.table-inside-tooltip-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{margin-top:1.5rem}section.table-inside-tooltip-container::-webkit-scrollbar-track{margin-top:1.1875rem}.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;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:8px 4px;color:#4a4a4a!important;font-size:11px!important;font-family:Roboto;font-size:11px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.notification-tooltip-div-container{text-align:left!important;padding:6px 8px;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:fit-content!important;max-width:520px;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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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 ul.pl-16{padding-left:16px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 0;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}.bottom-border{border-bottom:1px solid #d4d4d4!important}i.disabled{pointer-events:none!important}.black-color-text{color:#000}.white-space-nowrap{white-space:nowrap}.ellipsis-tooltip-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}table.ellipsis-tooltip-table{table-layout:fixed;width:100%}table.ellipsis-tooltip-table thead th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important}table.ellipsis-tooltip-table thead th{background:#e9e9e9;padding:3px 8px;line-height:normal;position:sticky;top:0;cursor:default;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}table.ellipsis-tooltip-table thead th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}table.ellipsis-tooltip-table tbody td{padding:3px 8px}table.ellipsis-tooltip-table tbody td .upper-label{width:100%;color:#000;text-overflow:ellipsis;overflow:hidden;display:inline-block;white-space:nowrap;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}table.ellipsis-tooltip-table tbody td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.ellipsis-tooltip-table tbody td:nth-of-type(n+2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}.pr-4{padding-right:4px}.status-note-tooltip{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;color:#4a4a4a;white-space:normal!important}.view-more-comments{display:block;color:#268bff;font-family:Roboto;font-size:.75rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;cursor:pointer;margin-left:2px}td.mat-column-isOrderStarred:has(.disabled-starring){pointer-events:none!important}td.mat-column-isOrderStarred .mdi.mdi-star.disabled-starring,td.mat-column-isOrderStarred .mdi.mdi-star-outline.disabled-starring{pointer-events:none!important;color:#dbdbdb80!important}table.disable-table-scrolling{overflow:hidden!important}.icon-tooltip-text{display:inline-block;color:#268bff}.text-with-icon-and-text.reduced-width{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px);margin-bottom:-3.5px}.innrHtml-tooltip-icon-marker{float:right;color:#268bff}.reduced-width-text{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px)}\n"] }]
+                    ], template: "<div\r\n    id=\"generic-table-conatiner\"\r\n    #tableElementRef\r\n    class=\"table-container {{ gtGeneralConfig?.tableOuterContainerName }} {{ tableBottomBorderClass }}\"\r\n    [ngClass]=\"{\r\n        'scroll-left-shadow-effect': isScrolledLeft,\r\n        'scroll-right-shadow-effect': !isScrollEnded,\r\n        'clickable-row': clickableRow,\r\n        'no-data-table': (isNoDataToDisplaySubject$ | async),\r\n        'table-with-show-hide-total-row-toggle': showOrHideToggleForTotalRow\r\n    }\"\r\n    (scroll)=\"onTableContainerScroll($event)\"\r\n>\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 < noOfRowsToCheck - 1\r\n                    ? 'calc(' +\r\n                      (gtDimension.rowHeight * tableData.length +\r\n                          (!tableData.length || !gtGeneralConfig.totalRow\r\n                              ? gtDimension.headerHeight\r\n                              : gtDimension.headerHeight + gtDimension.rowHeight)) +\r\n                      'px)'\r\n                    : gtDimension.tableHeight\r\n        }\"\r\n    >\r\n        <button\r\n            *ngIf=\"showOrHideToggleForTotalRow && !showSkeletonLoading && (isNoDataToDisplaySubject$ | async) === false\"\r\n            [ngClass]=\"{\r\n                'shift-toggle-top-on-total-row-click': !gtGeneralConfig.totalRow\r\n            }\"\r\n            class=\"show-or-hide-toggle-btn\"\r\n            (click)=\"showHideTotalRow()\"\r\n        >\r\n            <i\r\n                class=\"mdi mdi-menu-swap\"\r\n                tooltipClass=\"show-or-hide-toggle-tooltip\"\r\n                placement=\"auto\"\r\n                container=\"body\"\r\n                [ngbTooltip]=\"showOrHideToggleForTotalRowTooltip\"\r\n            ></i>\r\n        </button>\r\n        <table\r\n            class=\"gt\"\r\n            [ngClass]=\"tableClass\"\r\n            mat-table\r\n            [dataSource]=\"renderedData\"\r\n        >\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\"\r\n                (click)=\"dataRowClicked(rowData)\"\r\n            ></tr>\r\n\r\n            <!-- TOTAL ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"column.colName\"\r\n                *ngFor=\"let column of totalRowInfo; trackBy: trackByFn\"\r\n            >\r\n                <td\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [attr.colspan]=\"column.colspan\"\r\n                    class=\"{{ column.class }}\"\r\n                >\r\n                    <ng-container *ngIf=\"column['isActionColumn']\">\r\n                        <a\r\n                            *ngFor=\"let data of column.actionData\"\r\n                            [class]=\"data.class\"\r\n                            (click)=\"onClickableDataClicked({}, data.id)\"\r\n                        >\r\n                            {{ data.name }}\r\n                        </a>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"column['isIconColumn']\">\r\n                        <i\r\n                            class=\"{{ column?.iconData?.class }}\"\r\n                            (click)=\"iconClickedInTotalRow(column?.colName)\"\r\n                        >\r\n                        </i>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!column['isActionColumn']\">\r\n                        <strong class=\"upper-label\"\r\n                            >{{ column.data }}\r\n                            <span\r\n                                class=\"red-text-totol-row\"\r\n                                *ngIf=\"column.additionalRedTextAfterData\"\r\n                                >{{ column.additionalRedTextAfterData }}</span\r\n                            ></strong\r\n                        >\r\n                        <ng-container *ngIf=\"column.lowerData\">\r\n                            <p\r\n                                *ngIf=\"\r\n                                    column.colName === 'total-potential-booked-unit' &&\r\n                                        gtGeneralConfig.component === 'RATING';\r\n                                    else columnLowerData\r\n                                \"\r\n                                class=\"clickable-data\"\r\n                                (click)=\"spotDetailsDownloadClicked('TOTALROW')\"\r\n                                [ngClass]=\"{ 'disabled-clickable-data': downloadInProgress }\"\r\n                            >\r\n                                {{ column.lowerData }}\r\n                                <span class=\"material-icons spot-details-download-icons\">get_app</span>\r\n                                <ng-container *ngIf=\"downloadInProgress && selectedRowTypeForDownload === 'TOTALROW'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"circularProgressBar\"></ng-container>\r\n                                </ng-container>\r\n                            </p>\r\n                            <ng-template #columnLowerData>\r\n                                <p class=\"lower-label\">{{ column.lowerData }}</p>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"column.tooltipMessage && gtGeneralConfig.component !== 'LUR_VIOLATIONS'\">\r\n                            <i\r\n                                class=\"{{ column.tooltipIconClass }}\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"column.tooltipMessage\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"top bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"gtGeneralConfig.component === 'LUR_VIOLATIONS' && column.tooltipMessage\">\r\n                            <i\r\n                                class=\"mi mdi-info-outline info-label\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationTotalRowToolTip\"\r\n                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                placement=\"bottom\"\r\n                            ></i>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <!-- MAIN ROW -->\r\n            <ng-container\r\n                [matColumnDef]=\"columnDef.headerInfo[0].objectKey\"\r\n                *ngFor=\"let columnDef of tableHeaders; trackBy: trackByFn\"\r\n            >\r\n                <th\r\n                    #tableHeader\r\n                    nowrap\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    [style.width]=\"columnDef.width\"\r\n                >\r\n                    <div\r\n                        class=\"row mx-0\"\r\n                        *ngFor=\"let header of columnDef.headerInfo; let j = index\"\r\n                    >\r\n                        <p\r\n                            *ngIf=\"header.typeOfHeaderData === 'STRING'\"\r\n                            [ngClass]=\"{ 'upper-label': j === 0, 'lower-label': j === 1 }\"\r\n                        >\r\n                            <ngx-skeleton-loader\r\n                                *ngIf=\"header.name == null\"\r\n                                count=\"1\"\r\n                                [theme]=\"{\r\n                                    height: '10px',\r\n                                    display: 'block',\r\n                                    width: columnDef.width,\r\n                                    'max-width': 'calc(100% - 20px)'\r\n                                }\"\r\n                            >\r\n                            </ngx-skeleton-loader>\r\n                            <ng-container *ngIf=\"header.name\">\r\n                                {{ header.name }}\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"header.tooltip && header.tooltip.tooltipMessage\">\r\n                                <i\r\n                                    class=\"{{ header['tooltip'].iconClass }}\"\r\n                                    [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                    #t=\"ngbTooltip\"\r\n                                    container=\"body\"\r\n                                    [ngbTooltip]=\"header.tooltip.tooltipMessage\"\r\n                                    container=\"body\"\r\n                                    placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                    tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                                >\r\n                                </i>\r\n                            </ng-container>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'impsInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"impsInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"\r\n                                    header.tooltip && header.tooltip.name === 'spotsColumnEquivalizationMessageTooltip'\r\n                                \"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"spotsColumnEquivalizationMessageTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'underDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"underDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'overDeliveryTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                container=\"body\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"overDeliveryTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ratingInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ratingInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rateInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rateInfoTooltip\"\r\n                                container=\"body\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'ongoingRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"ongoingRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'completedRevBookedColumnTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"completedRevBookedColumnTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRate'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRate\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedRtg\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'avgBookedImps'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"avgBookedImps\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'automationTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"automationTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'rebateImpact'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"rebateImpact\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n\r\n                            <i\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'projectedImpsRtg'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"projectedImpsRtg\"\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\r\n                            *ngIf=\"gtGeneralConfig.showAllColumnFilter && header && header.typeOfHeaderData !== ''\"\r\n                            class=\"sort-filter-container\"\r\n                        >\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"filterTooltip\"\r\n                                        placement=\"{{ filterAlignment }}\"\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\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:\r\n                                                annaFilterService.isFilterSortActive &&\r\n                                                annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],\r\n                                            disabled: header.disableTooltipIcon || showSkeletonLoading\r\n                                        }\"\r\n                                        [ngbTooltip]=\"timeFilterToolTip\"\r\n                                        placement=\"bottom left-top auto\"\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\r\n                                *ngIf=\"header.tooltip && header.tooltip.name === 'lurViolationInfoTooltip'\"\r\n                                class=\"{{ header['tooltip'].iconClass }}\"\r\n                                [ngStyle]=\"{ float: header['tooltip'].iconPosition }\"\r\n                                #t=\"ngbTooltip\"\r\n                                container=\"body\"\r\n                                [ngbTooltip]=\"lurViolationInfoTooltip\"\r\n                                placement=\"{{ header['tooltip'].tooltipPosition }}\"\r\n                                tooltipClass=\"{{ header['tooltip'].tooltipClass }}\"\r\n                            >\r\n                            </i>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n\r\n                <ng-container *matCellDef=\"let ROW_DATA\">\r\n                    <td\r\n                        mat-cell\r\n                        [style.background]=\"ROW_DATA.backgroundColor\"\r\n                        [style.border]=\"ROW_DATA.border\"\r\n                        class=\"{{ ROW_DATA.rowClass }}\"\r\n                        [ngClass]=\"ROW_DATA[columnDef.headerInfo[0].objectKey + 'TdClass']\"\r\n                        [attr.rowspan]=\"tdsHaveRowSpan ? ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan'] : 1\"\r\n                        *ngIf=\"\r\n                            !hideSomeTds ||\r\n                            (hideSomeTds && !ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td'])\r\n                        \"\r\n                    >\r\n                        <ngx-skeleton-loader\r\n                            *ngIf=\"showSkeletonLoading\"\r\n                            count=\"1\"\r\n                            [theme]=\"{ height: '10px', display: 'block', marginBottom: '0' }\"\r\n                        >\r\n                        </ngx-skeleton-loader>\r\n\r\n                        <ng-container *ngIf=\"!showSkeletonLoading\">\r\n                            <ng-container *ngIf=\"tableData.length > 0 && (isNoDataToDisplaySubject$ | async) === false\">\r\n                                <ng-container\r\n                                    *ngFor=\"\r\n                                        let subline of columnDef.headerInfo;\r\n                                        let subLineIndex = index;\r\n                                        trackBy: trackByFn\r\n                                    \"\r\n                                >\r\n                                    <div annaCoreShowEllipsisTextOnHover>\r\n                                        <ng-container [ngSwitch]=\"columnDef.headerInfo[subLineIndex].typeOfBodyData\">\r\n                                            <ng-container *ngSwitchCase=\"'ICON'\">\r\n                                                <i\r\n                                                    *ngIf=\"\r\n                                                        !(\r\n                                                            starredInProgress &&\r\n                                                            ROW_DATA.orderId === selectedStarredOrderId\r\n                                                        )\r\n                                                    \"\r\n                                                    [class]=\"ROW_DATA.iconClass\"\r\n                                                    [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    (click)=\"iconClicked(ROW_DATA, ROW_DATA.iconClass)\"\r\n                                                    ngbTooltip=\"{{ ROW_DATA.iconTitleText }}\"\r\n                                                    placement=\"bottom\"\r\n                                                    container=\"body\"\r\n                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                ></i>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        starredInProgress && ROW_DATA.orderId === selectedStarredOrderId\r\n                                                    \"\r\n                                                >\r\n                                                    <div\r\n                                                        class=\"spinner-for-button-directive\"\r\n                                                        [ngClass]=\"{ 'disabled-starring': starredInProgress }\"\r\n                                                    ></div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'ICON_CELL'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\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                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"\r\n                                                            action.showTooltip && action?.tooltipData\r\n                                                                ? action.tooltipData\r\n                                                                : null\r\n                                                        \"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML_STRING'\">\r\n                                                <p\r\n                                                    [innerHTML]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    (click)=\"innerHTMLCellClicked($event, ROW_DATA)\"\r\n                                                ></p>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SVG_ICON'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.showObjectKey\"\r\n                                                    >\r\n                                                        {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                    </span>\r\n\r\n                                                    <span\r\n                                                        class=\"pr-4 {{ action?.additionalTextClass }}\"\r\n                                                        *ngIf=\"action?.additionalText\"\r\n                                                    >\r\n                                                        {{ action?.additionalText }}\r\n                                                    </span>\r\n\r\n                                                    <anna-core-icon-column\r\n                                                        class=\"pr-4\"\r\n                                                        *ngIf=\"action?.svgOrIconName\"\r\n                                                        [componentName]=\"gtGeneralConfig.component\"\r\n                                                        [dataObject]=\"ROW_DATA\"\r\n                                                        [iconToShow]=\"action.svgOrIconName\"\r\n                                                        data-html=\"true\"\r\n                                                        [ngbTooltip]=\"tipContent\"\r\n                                                        [disableTooltip]=\"!action?.svgOrIconTooltipMsg\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        (columnIconClicked)=\"\r\n                                                            svgIconClicked(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].actionKey\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-template #tipContent>\r\n                                                            <div [innerHTML]=\"action?.svgOrIconTooltipMsg\"></div\r\n                                                        ></ng-template>\r\n                                                    </anna-core-icon-column>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'TEXT_ACTIONS'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <button\r\n                                                        *ngIf=\"text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        [ngbTooltip]=\"textActionTooltipTemplate\"\r\n                                                        placement=\"auto\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                    >\r\n                                                        {{ text.name }}\r\n                                                    </button>\r\n\r\n                                                    <button\r\n                                                        *ngIf=\"!text.showTooltip\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                text.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disabled]=\"text.isDisabled\"\r\n                                                        class=\"{{ text.class }}\"\r\n                                                    >\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':\r\n                                                            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':\r\n                                                            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\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                        ngbTooltip=\"tooltipContainingTableTemplate\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'CLICKABLE_DATA'\">\r\n                                                <a\r\n                                                    *ngFor=\"\r\n                                                        let text of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                    [class]=\"text.class\"\r\n                                                    (click)=\"onClickableDataClicked(ROW_DATA, text.id)\"\r\n                                                    >{{ text.name }}</a\r\n                                                >\r\n                                                <span\r\n                                                    *ngIf=\"\r\n                                                        subline.objectKey === 'displayBookedUnits' &&\r\n                                                        gtGeneralConfig.component === 'RATING'\r\n                                                    \"\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\"\r\n                                                        >get_app</span\r\n                                                    >\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            downloadInProgress &&\r\n                                                            ROW_DATA.inventoryCodeId ===\r\n                                                                selectedInventoryIdForDownload &&\r\n                                                            ROW_DATA.demographic === selectedDemographicForDownload\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"circularProgressBar\"\r\n                                                        ></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\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [class]=\"action.additionalTextBeforeLinkClass\"\r\n                                                        [innerHtml]=\"action.additionalTextBeforeLink\"\r\n                                                        ngbTooltip=\"{{ action.additionalTextBeforeLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalText\"\r\n                                                    ></span>\r\n\r\n                                                    <ng-container *ngIf=\"action && action.typeOfData === 'STRING'\">\r\n                                                        <span\r\n                                                            class=\"text-with-icon-and-text\"\r\n                                                            [ngClass]=\"{ 'reduced-width': action.showIcon }\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            >{{ action.data }}</span\r\n                                                        >\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        [id]=\"action.id\"\r\n                                                        *ngIf=\"action.showLink\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [class]=\"action.linkClass\"\r\n                                                        [ngClass]=\"{ disabled: action.disabledLink }\"\r\n                                                        >{{ action.data }}</a\r\n                                                    >\r\n                                                    <span\r\n                                                        ngbTooltip=\"{{ action.additionalTextAfterLink }}\"\r\n                                                        placement=\"bottom\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action.additionalTextAfterLinkClass\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        [disableTooltip]=\"!action.enableTooltipForAdditionalAfterText\"\r\n                                                    >\r\n                                                        {{ action.additionalTextAfterLink }}\r\n                                                    </span>\r\n\r\n                                                    <ng-container *ngIf=\"action.showTooltip\">\r\n                                                        <ng-container *ngIf=\"action.tooltipData.innerHtml\">\r\n                                                            <i\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [class]=\"action.iconClass\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionTypeContainingTable(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                placement=\"bottom auto\"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"tooltip-containing-table remove-on-scroll-class\"\r\n                                                                [ngbTooltip]=\"tooltipContainingTableTemplate\"\r\n                                                            >\r\n                                                            </i>\r\n                                                        </ng-container>\r\n\r\n                                                        <ng-container *ngIf=\"!action.tooltipData.tooltipTableBody\">\r\n                                                            <span\r\n                                                                *ngIf=\"action.showIcon\"\r\n                                                                [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                                class=\"icon-tooltip-text\"\r\n                                                                (click)=\"\r\n                                                                    iconClickedOnStringIconActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        action.id,\r\n                                                                        columnDef.headerInfo[subLineIndex]\r\n                                                                    )\r\n                                                                \"\r\n                                                                (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                (mouseenter)=\"\r\n                                                                    mouseEnterOnStringTextActionType(\r\n                                                                        ROW_DATA,\r\n                                                                        columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                                    )\r\n                                                                \"\r\n                                                                [placement]=\"\r\n                                                                    action.tooltipPlacement\r\n                                                                        ? action.tooltipPlacement\r\n                                                                        : 'bottom auto'\r\n                                                                \"\r\n                                                                container=\"body\"\r\n                                                                [autoClose]=\"true\"\r\n                                                                tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                    action.tooltipClass\r\n                                                                }}\"\r\n                                                                [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                            >\r\n                                                                <i [class]=\"action.iconClass\"> </i>\r\n                                                                {{ action.additionalTextAfterIcon ?? \"\" }}\r\n                                                            </span>\r\n                                                            <ng-container *ngIf=\"action['showSvgIcon']\">\r\n                                                                <anna-core-anna-est-icon-template\r\n                                                                    class=\"float-right\"\r\n                                                                    *ngIf=\"action['svgIconName'] === 'anna-icon'\"\r\n                                                                    (mouseleave)=\"mouseLeaveTextActionType(ROW_DATA)\"\r\n                                                                    (mouseenter)=\"\r\n                                                                        mouseEnterOnStringTextActionType(\r\n                                                                            ROW_DATA,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                                .tooltipKey\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [placement]=\"\r\n                                                                        action.tooltipPlacement\r\n                                                                            ? action.tooltipPlacement\r\n                                                                            : 'bottom auto'\r\n                                                                    \"\r\n                                                                    tooltipClass=\"team-user-tooltip remove-on-scroll-class {{\r\n                                                                        action['tooltipClass']\r\n                                                                    }}\"\r\n                                                                    [ngbTooltip]=\"userLoggedInDetails\"\r\n                                                                    container=\"body\"\r\n                                                                    [autoClose]=\"true\"\r\n                                                                >\r\n                                                                </anna-core-anna-est-icon-template>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </ng-container>\r\n\r\n                                                    <ng-container *ngIf=\"!action.showTooltip\">\r\n                                                        <i\r\n                                                            *ngIf=\"action.showIcon\"\r\n                                                            [class]=\"action.iconClass\"\r\n                                                            [ngClass]=\"{ disabled: action.disabledIcon }\"\r\n                                                            (click)=\"\r\n                                                                iconClickedOnStringIconActionType(\r\n                                                                    ROW_DATA,\r\n                                                                    action.id,\r\n                                                                    columnDef.headerInfo[subLineIndex]\r\n                                                                )\r\n                                                            \"\r\n                                                        >\r\n                                                        </i>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_OR_INPUT'\">\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]?.type ===\r\n                                                            'STRING';\r\n                                                        else inputBox\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        [innerHtml]=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.value\r\n                                                        \"\r\n                                                    ></span>\r\n                                                </ng-container>\r\n\r\n                                                <ng-template #inputBox>\r\n                                                    <span class=\"input-box-container\">\r\n                                                        <input\r\n                                                            placeholder=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    ?.placeholder\r\n                                                            }}\"\r\n                                                            annaCoreShowEllipsisTextOnHover\r\n                                                            class=\"{{\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .className\r\n                                                            }}\"\r\n                                                            (keydown)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    false\r\n                                                                )\r\n                                                            \"\r\n                                                            (paste)=\"\r\n                                                                changesMadeInEditableInputBox(\r\n                                                                    $event,\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    true\r\n                                                                )\r\n                                                            \"\r\n                                                            (ngModelChange)=\"\r\n                                                                editableInputValueChanged(\r\n                                                                    $event,\r\n                                                                    ROW_DATA,\r\n                                                                    columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                )\r\n                                                            \"\r\n                                                            [ngModel]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .value\r\n                                                            \"\r\n                                                            [disabled]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .disabled\r\n                                                            \"\r\n                                                            [ngClass]=\"{\r\n                                                                'red-border':\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ].hasError\r\n                                                            }\"\r\n                                                        />\r\n\r\n                                                        <ng-container\r\n                                                            *ngFor=\"\r\n                                                                let action of ROW_DATA[\r\n                                                                    columnDef.headerInfo[subLineIndex].actionKey\r\n                                                                ]\r\n                                                            \"\r\n                                                        >\r\n                                                            <i\r\n                                                                *ngIf=\"action?.showIcon\"\r\n                                                                container=\"body\"\r\n                                                                [ngbTooltip]=\"tipContent\"\r\n                                                                tooltipClass=\"gt-total-row-tooltip\"\r\n                                                                placement=\"bottom\"\r\n                                                                class=\"{{ action?.iconClass }}\"\r\n                                                            >\r\n                                                                <ng-template #tipContent>\r\n                                                                    <div [innerHTML]=\"action?.iconTooltip\"></div\r\n                                                                ></ng-template>\r\n                                                            </i>\r\n                                                            <ng-container *ngIf=\"action?.showSvgIcon\">\r\n                                                                <anna-core-icon-column\r\n                                                                    class=\"pr-4\"\r\n                                                                    *ngIf=\"action?.svgOrIconName\"\r\n                                                                    [componentName]=\"gtGeneralConfig.component\"\r\n                                                                    [dataObject]=\"ROW_DATA\"\r\n                                                                    [iconToShow]=\"action?.svgOrIconName\"\r\n                                                                    data-html=\"true\"\r\n                                                                    [ngbTooltip]=\"tipContent\"\r\n                                                                    placement=\"auto\"\r\n                                                                    container=\"body\"\r\n                                                                    tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                                >\r\n                                                                    <ng-template #tipContent>\r\n                                                                        <div\r\n                                                                            [innerHTML]=\"action?.svgOrIconTooltipMsg\"\r\n                                                                        ></div></ng-template\r\n                                                                ></anna-core-icon-column>\r\n                                                            </ng-container>\r\n                                                            <ng-container *ngIf=\"action?.showLink\">\r\n                                                                <a\r\n                                                                    [id]=\"action?.id\"\r\n                                                                    (click)=\"\r\n                                                                        textActionClicked(\r\n                                                                            ROW_DATA,\r\n                                                                            action?.id,\r\n                                                                            columnDef.headerInfo[subLineIndex]\r\n                                                                        )\r\n                                                                    \"\r\n                                                                    [class]=\"action.linkClass\"\r\n                                                                    >{{ action?.linkText }}\r\n                                                                </a>\r\n                                                            </ng-container>\r\n                                                        </ng-container>\r\n                                                    </span>\r\n                                                </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'HTML'\">\r\n                                                <span\r\n                                                    [innerHtml]=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                ></span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_SELECT_DROPDOWN'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let dropdown of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ];\r\n                                                        let dropdownIndex = index\r\n                                                    \"\r\n                                                >\r\n                                                    <anna-core-single-select\r\n                                                        class=\"gt-single-select dropdown {{ dropdown?.className }}\"\r\n                                                        [ngClass]=\"{ error: !dropdown?.selectedItem }\"\r\n                                                        [items]=\"dropdown?.itemList\"\r\n                                                        [selectedItem]=\"dropdown?.selectedItem\"\r\n                                                        [config]=\"dropdown?.dropdownConfig\"\r\n                                                        (valueChanged)=\"\r\n                                                            onDropdownChanged($event, ROW_DATA, dropdownIndex)\r\n                                                        \"\r\n                                                    >\r\n                                                    </anna-core-single-select>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'SINGLE_RADIO'\">\r\n                                                <span\r\n                                                    *ngIf=\"ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]\r\n                                                    }\"\r\n                                                    class=\"mdi mdi-radiobox-marked\"\r\n                                                    (click)=\"(null)\"\r\n                                                >\r\n                                                </span>\r\n                                                <span\r\n                                                    *ngIf=\"!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\"\r\n                                                    class=\"mdi mdi-radiobox-blank\"\r\n                                                    [ngClass]=\"{\r\n                                                        'disable-checkbox':\r\n                                                            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                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'RADIO'\">\r\n                                                <mat-radio-group\r\n                                                    *ngIf=\"ROW_DATA['RadioButtonConfig']; else showHyphen\"\r\n                                                    [ngModel]=\"ROW_DATA[subline.objectKey]\"\r\n                                                    [disabled]=\"ROW_DATA['RadioButtonConfig'][0].isDisabled\"\r\n                                                >\r\n                                                    <ng-container\r\n                                                        *ngFor=\"\r\n                                                            let radioButton of ROW_DATA['RadioButtonConfig'];\r\n                                                            let last = last\r\n                                                        \"\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 }}\r\n                                                        </mat-radio-button>\r\n                                                        <i\r\n                                                            class=\" {{ radioButton.iconClass }}\"\r\n                                                            (click)=\"radioButtonIconClicked(ROW_DATA)\"\r\n                                                        ></i>\r\n                                                        <i\r\n                                                            *ngIf=\"radioButton.tooltipMessage\"\r\n                                                            class=\"mi mdi-info-outline\"\r\n                                                            [ngbTooltip]=\"radioButton.tooltipMessage\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class\"\r\n                                                        ></i>\r\n                                                        <br *ngIf=\"!last\" />\r\n                                                    </ng-container>\r\n                                                </mat-radio-group>\r\n                                                <ng-template #showHyphen> - </ng-template>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span class=\"action-data\"> {{ action?.dataToDisplay }}</span>\r\n                                                    <ng-container *ngIf=\"action?.additionalTextWoTooltip\">\r\n                                                        <span\r\n                                                            class=\"additional-text-wo-tooltip\"\r\n                                                            [innerHtml]=\"action.additionalTextWoTooltip\"\r\n                                                        >\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"stringWithTooltipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey,\r\n                                                                tooltipWithStringRef\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"action?.tooltipIconClass\"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithStringRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-column-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                    </span>\r\n                                                    <span>{{ action?.dataToDisplayAfterTooltip }}</span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_ELLIPSIS_WITH_TABLE_TOOLTIP'\">\r\n                                                <div class=\"new-ellipsis-container\">\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"cell-value\"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                .cellValue\r\n                                                        }}\r\n                                                    </span>\r\n                                                    <span\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.showTooltip\r\n                                                        \"\r\n                                                        class=\"tooltip-text\"\r\n                                                        [ngbTooltip]=\"tableInsideTooltip\"\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=\"table-inside-tooltip remove-on-scroll-class {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipClass\r\n                                                        }}\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToTableTooltip(\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                                info\r\n                                                            )\r\n                                                        \"\r\n                                                    >\r\n                                                        {{\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                ?.tooltipHoverText\r\n                                                        }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\">\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length <\r\n                                                        26\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n\r\n                                                <span\r\n                                                    title=\"\"\r\n                                                    [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                    placement=\"bottom auto\"\r\n                                                    container=\"body\"\r\n                                                    [autoClose]=\"true\"\r\n                                                    [triggers]=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        100\r\n                                                            ? 'manual'\r\n                                                            : 'hover focus'\r\n                                                    \"\r\n                                                    (hidden)=\"closeTooltip()\"\r\n                                                    #info=\"ngbTooltip\"\r\n                                                    tooltipClass=\"status-note-tooltip\"\r\n                                                    (mouseenter)=\"\r\n                                                        bindTheValueToStatusNote(\r\n                                                            ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey],\r\n                                                            info\r\n                                                        )\r\n                                                    \"\r\n                                                    *ngIf=\"\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey].length >\r\n                                                        25\r\n                                                    \"\r\n                                                >\r\n                                                    {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                </span>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchCase=\"'STRING_WITH_TOOLTIP_INNER_HTML'\">\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <span\r\n                                                        annaCoreShowEllipsisTextOnHover\r\n                                                        class=\"action-data\"\r\n                                                        [ngClass]=\"action?.showTooltip ? 'reduced-width-text' : ''\"\r\n                                                    >\r\n                                                        {{ action?.dataToDisplay }}</span\r\n                                                    >\r\n                                                    <span\r\n                                                        *ngIf=\"action?.showTooltip\"\r\n                                                        [ngbTooltip]=\"innerHtmlToolTipTemplate\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringWithInnerHtmlTooltipTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                action,\r\n                                                                tooltipWithInnerHtmlRef,\r\n                                                                !action.isManualTrigger\r\n                                                            )\r\n                                                        \"\r\n                                                        [placement]=\"action?.tooltipPosition\"\r\n                                                        container=\"body\"\r\n                                                        [class]=\"\r\n                                                            'innrHtml-tooltip-icon-marker ' + action?.tooltipIconClass\r\n                                                        \"\r\n                                                        [autoClose]=\"'outside'\"\r\n                                                        [triggers]=\"action.isManualTrigger ? 'manual' : 'hover focus'\"\r\n                                                        #tooltipWithInnerHtmlRef=\"ngbTooltip\"\r\n                                                        tooltipClass=\"gt-icon-innerHtml-tooltip remove-on-scroll-class {{\r\n                                                            action?.tooltipInnerClass\r\n                                                        }}\"\r\n                                                        [disableTooltip]=\"action?.disableTooltip\"\r\n                                                    >\r\n                                                        {{ action.tooltipMarkerText }}\r\n                                                    </span>\r\n                                                    <span *ngIf=\"action?.dataToDisplayAfterTooltip\">\r\n                                                        {{ action?.dataToDisplayAfterTooltip }}\r\n                                                    </span>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container\r\n                                                *ngSwitchCase=\"\r\n                                                    'ICON_CELL_AND_STRING_WITH_ELLIPSIS_AND_READ_MORE_TOOLTIP'\r\n                                                \"\r\n                                            >\r\n                                                <ng-container\r\n                                                    *ngFor=\"\r\n                                                        let action of ROW_DATA[\r\n                                                            columnDef.headerInfo[subLineIndex].actionKey\r\n                                                        ]\r\n                                                    \"\r\n                                                >\r\n                                                    <i\r\n                                                        *ngIf=\"action.showIcon\"\r\n                                                        [class]=\"action.iconClass\"\r\n                                                        title=\"\"\r\n                                                        (mouseenter)=\"\r\n                                                            mouseEnterOnStringTextActionType(\r\n                                                                ROW_DATA,\r\n                                                                columnDef.headerInfo[subLineIndex].tooltipKey\r\n                                                            )\r\n                                                        \"\r\n                                                        placement=\"bottom auto\"\r\n                                                        container=\"body\"\r\n                                                        [autoClose]=\"true\"\r\n                                                        tooltipClass=\"team-user-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"action.showTooltip ? action.tooltipData : null\"\r\n                                                        (click)=\"\r\n                                                            textActionClicked(\r\n                                                                ROW_DATA,\r\n                                                                action.id,\r\n                                                                columnDef.headerInfo[subLineIndex]\r\n                                                            )\r\n                                                        \"\r\n                                                        [disableTooltip]=\"!action.showTooltip\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <ng-container *ngIf=\"action.showObjectKey\">\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length < 26\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n\r\n                                                        <span\r\n                                                            title=\"\"\r\n                                                            [ngbTooltip]=\"statusNoteTooltip\"\r\n                                                            placement=\"bottom auto\"\r\n                                                            container=\"body\"\r\n                                                            [autoClose]=\"true\"\r\n                                                            [triggers]=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 100\r\n                                                                    ? 'manual'\r\n                                                                    : 'hover focus'\r\n                                                            \"\r\n                                                            (hidden)=\"closeTooltip()\"\r\n                                                            #info=\"ngbTooltip\"\r\n                                                            tooltipClass=\"status-note-tooltip\"\r\n                                                            (mouseenter)=\"\r\n                                                                bindTheValueToStatusNote(\r\n                                                                    ROW_DATA[\r\n                                                                        columnDef.headerInfo[subLineIndex].objectKey\r\n                                                                    ],\r\n                                                                    info\r\n                                                                )\r\n                                                            \"\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                                    .length > 25\r\n                                                            \"\r\n                                                        >\r\n                                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}\r\n                                                        </span>\r\n                                                    </ng-container>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n                                            <ng-container *ngSwitchDefault>\r\n                                                <ng-container *ngIf=\"subline.objectKey !== 'description'\">\r\n                                                    <span annaCoreShowEllipsisTextOnHover>{{\r\n                                                        ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]\r\n                                                    }}</span>\r\n                                                    <!-- <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'inventoryCode' &&\r\n                                                            ROW_DATA['isSellerGroup'] &&\r\n                                                            gtGeneralConfig.component === 'RATING'\r\n                                                        \"\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 remove-on-scroll-class\"\r\n                                                        (mouseenter)=\"\r\n                                                            bindTheValueToSellerGroupTooltip(\r\n                                                                ROW_DATA.sellerGroupHierarchy,\r\n                                                                info\r\n                                                            )\r\n                                                        \" \r\n                                                    >\r\n                                                    </i>-->\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageRating' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showRatingAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedRatingDifference\"\r\n                                                    >\r\n                                                    </i>\r\n\r\n                                                    <i\r\n                                                        *ngIf=\"\r\n                                                            subline.objectKey === 'displayBookedAverageImpression' &&\r\n                                                            gtGeneralConfig.component === 'RATING' &&\r\n                                                            ROW_DATA['showImpressionAverageIcon']\r\n                                                        \"\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)=\"\r\n                                                            setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)\r\n                                                        \"\r\n                                                        tooltipClass=\"posted-avg-tooltip remove-on-scroll-class\"\r\n                                                        [ngbTooltip]=\"postedImpDifference\"\r\n                                                    >\r\n                                                    </i>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"subline.objectKey === 'description'\">\r\n                                                    <p\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionMessage ||\r\n                                                            ROW_DATA.descriptionEmailReferenceNum\r\n                                                        \"\r\n                                                    >\r\n                                                        <ng-container *ngIf=\"ROW_DATA.descriptionMessage\">\r\n                                                            {{ ROW_DATA.descriptionMessage }}\r\n                                                            <br />\r\n                                                        </ng-container>\r\n                                                        <ng-container\r\n                                                            *ngIf=\"\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== '-' &&\r\n                                                                ROW_DATA.descriptionEmailReferenceNum !== ''\r\n                                                            \"\r\n                                                        >\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=\"\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'PDF' ||\r\n                                                            ROW_DATA.descriptionDetailsUrlType === 'EXCEL'\r\n                                                        \"\r\n                                                    >\r\n                                                        <button class=\"btn viewDetailsAndEmailBtn\">Download</button>\r\n                                                    </a>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.activityname.toLowerCase() === 'order onboarded'\r\n                                                        \"\r\n                                                    >\r\n                                                        <a\r\n                                                            *ngIf=\"ROW_DATA.descriptionDetailsUrlType === 'LINK'\"\r\n                                                            (click)=\"viewDetailsClicked(ROW_DATA)\"\r\n                                                        >\r\n                                                            <button class=\"btn viewDetailsAndEmailBtn order-onboarded\">\r\n                                                                View details\r\n                                                            </button>\r\n                                                        </a>\r\n                                                    </ng-container>\r\n\r\n                                                    <a\r\n                                                        href=\"{{ ROW_DATA.descriptionEmailUrl }}\"\r\n                                                        target=\"_blank\"\r\n                                                        *ngIf=\"\r\n                                                            ROW_DATA.descriptionEmailUrl !== '-' &&\r\n                                                            ROW_DATA.descriptionEmailUrl !== ''\r\n                                                        \"\r\n                                                    >\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                                    </div>\r\n                                </ng-container>\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\r\n        [width]=\"noDataWidth\"\r\n        [marginTop]=\"marginTop\"\r\n        *ngIf=\"isNoDataToDisplaySubject$ | async\"\r\n    >\r\n    </anna-core-no-data-lib>\r\n</div>\r\n\r\n<!-- Checkbox template -->\r\n<ng-template #filterTooltip>\r\n    <anna-core-anna-column-checkbox-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-checkbox-filter>\r\n</ng-template>\r\n\r\n<!-- Slider template -->\r\n<ng-template #sliderToolTip>\r\n    <anna-core-anna-column-slider-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-slider-filter>\r\n</ng-template>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTooltip>\r\n    <anna-core-anna-column-date-range-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-date-range-filter>\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    <anna-core-anna-column-time-filter\r\n        [tableData]=\"tableData\"\r\n        [showFilterHeaderTabs]=\"showFilterTooltipTabs\"\r\n        [isLurAndCsrComponent]=\"false\"\r\n        [showAllTimeRangeCheckboxes]=\"showCheckboxesForTimeFilter\"\r\n        [clonedTableData]=\"clonedTableData\"\r\n        [filterTabObjects]=\"filterTabObjects\"\r\n        (filterAppliedToTable)=\"filterApplied($event)\"\r\n        (sortingAppliedToTable)=\"sortingApplied($event)\"\r\n        (closeTooltip)=\"closeTooltip()\"\r\n    >\r\n    </anna-core-anna-column-time-filter>\r\n</ng-template>\r\n\r\n<ng-template #columnInfoTooltip>\r\n    <p class=\"black-color-text 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\">\r\n        This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #underDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Under-delivery percentage based on booked and posted RTG/IMPS.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #overDeliveryTooltip>\r\n    <p class=\"spot-column-tooltip-message\">\r\n        Indicates the Over-delivery percentage based on booked and posted RTG/IMPS.\r\n    </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 annaCoreShowEllipsisTextOnHover>{{ data.InventoryCode }}</span>\r\n                        </td>\r\n                        <td>\r\n                            <span annaCoreShowEllipsisTextOnHover>{{ 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 class=\"black-color-text\">Seller group not available for this inventory code</span>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tableInsideTooltip>\r\n    <label class=\"ellipsis-tooltip-heading\">{{ ellipsisWithTooltipHeading }}</label>\r\n    <section class=\"table-inside-tooltip-container\">\r\n        <table class=\"ellipsis-tooltip-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th\r\n                        [style.width]=\"header.width\"\r\n                        *ngFor=\"let header of ellipsisWithTooltipTableHeaders\"\r\n                    >\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ header.headerName }}</span\r\n                            >\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr *ngFor=\"let data of ellipsisWithTooltipTableData\">\r\n                    <td *ngFor=\"let header of ellipsisWithTooltipTableHeaders\">\r\n                        <div>\r\n                            <span\r\n                                annaCoreShowEllipsisTextOnHover\r\n                                class=\"upper-label\"\r\n                                >{{ data[header.objectKey] }}</span\r\n                            >\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </section>\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\">\r\n        The difference between posted and booked average rating is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #postedImpDifference>\r\n    <p class=\"difference-text\">\r\n        The difference between posted and booked average impression is\r\n        {{ isDifferenceLessThan25Percent ? \"less\" : \"more\" }} than 25%.\r\n    </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 #avgBookedRate>\r\n    <p>This is the booked average Rate</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedRtg>\r\n    <p>This is the booked average RTG</p>\r\n</ng-template>\r\n\r\n<ng-template #avgBookedImps>\r\n    <p>This is the booked average IMP(\u2019000)</p>\r\n</ng-template>\r\n\r\n<ng-template #projectedImpsRtg>\r\n    <p>\r\n        ANNA calculates projected RTG/IMPS values using either the computed estimates or the actual posted data,\r\n        depending on what is available. If posted data has not yet been received, ANNA will use the computed estimates\r\n        as the projected value. Once the actual posted data is received, the projection will automatically update to\r\n        reflect the real, posted values. This ensures that projected data is always based on the most accurate and\r\n        up-to-date information.\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #automationTooltip>\r\n    <p>\r\n        Please get the order business rules approved to automate the orders. Only for the automated orders, any approved\r\n        MGs, ADUs, or credited spots on ANNA will be fed into the traffic system i.e. ANNA revisions.\r\n        <!-- removed below line as part of enhancmennt in 14.0 releas -->\r\n        <!-- Additionally, ANNA will only enter buyer revisions into traffic for the selected\r\n        Medialine/WOC orders. -->\r\n    </p>\r\n</ng-template>\r\n\r\n<ng-template #rebateImpact>\r\n    <p>Rebate impact value is for the originally ordered spot length and is not equivalized.</p>\r\n</ng-template>\r\n\r\n<ng-template #lurViolationTotalRowToolTip>\r\n    <ul>\r\n        <li>\r\n            <strong>POLITICAL RATE VIOLATIONS:</strong>\r\n            Violations flagged when non-political spots are booked at a rate lower than the minimum booked rate for\r\n            political candidates for the same week, Inventory Code and Revenue Class.\r\n        </li>\r\n        <li>\r\n            <strong>CANDIDATE TO CANDIDATE VIOLATION:</strong>\r\n            Violations flagged when political spots are booked at different rates to other political spots for the same\r\n            week, Inventory Code and Revenue Class.\r\n        </li>\r\n    </ul>\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<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                {{ data.value }}\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=\"notification-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 #programChangeTooltipTemplate>\r\n    <div class=\"program-schedule-tooltip\">\r\n        <h2>Program Change</h2>\r\n        <p class=\"previous\">Previous:</p>\r\n        <b annaCoreShowEllipsisTextOnHover>{{ textActionTooltip.OldProgramName }}</b>\r\n\r\n        <p class=\"updated\">Updated:</p>\r\n        <b\r\n            *ngIf=\"textActionTooltip.NewProgramNames.length === 1\"\r\n            annaCoreShowEllipsisTextOnHover\r\n            >{{ textActionTooltip.NewProgramNames[0] }}</b\r\n        >\r\n        <ul *ngIf=\"textActionTooltip.NewProgramNames.length > 1\">\r\n            <li *ngFor=\"let item of textActionTooltip.NewProgramNames\">\r\n                <label class=\"dot\"></label>\r\n                <span annaCoreShowEllipsisTextOnHover>{{ item }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #showOrHideToggleForTotalRowTooltip>\r\n    <div>\r\n        {{ showOrHideToggleForTotalRow && !gtGeneralConfig.totalRow ? \"Show Total Row\" : \"Hide Total Row\" }}\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #tooltipContainingTableTemplate>\r\n    <div\r\n        *ngIf=\"tooltipContainingTable\"\r\n        [innerHTML]=\"tooltipContainingTable.innerHtml\"\r\n        class=\"notification-tooltip-div-container\"\r\n    >\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-top:10px; padding:0\" *ngFor=\"let footerMsg of tooltipContainingTable.tableFooterMsg\">\r\n        {{ footerMsg }} \r\n      </li>\r\n    </ul> -->\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\r\n<ng-template #statusNoteTooltip>\r\n    <div>\r\n        <span class=\"status-note-tooltip\">{{ statusNoteForTooltip }}</span>\r\n        <span *ngIf=\"statusNoteForPopup.length > 100\"\r\n            >...<a\r\n                class=\"view-more-comments\"\r\n                (click)=\"showEntireStatusNote()\"\r\n                >View more</a\r\n            ></span\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #innerHtmlToolTipTemplate>\r\n    <div [innerHtml]=\"toolTipInnerHtmlData\"></div>\r\n</ng-template>\r\n", styles: ["::ng-deep .show-or-hide-toggle-tooltip .tooltip-inner{max-width:229px}.show-or-hide-toggle-btn.shift-toggle-top-on-total-row-click{transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),32px)}.show-or-hide-toggle-btn{width:16px;height:16px;padding:0;margin:0;border-radius:50%;position:absolute;transform:translate(calc(var(--app-left-space-show-hide-total-row-icon) - 12px),52px);z-index:999;background-color:#d9d9d9}.show-or-hide-toggle-btn i.mdi.mdi-menu-swap{font-size:16px;display:flex}#generic-table-conatiner.table-with-show-hide-total-row-toggle .total-row td:nth-of-type(2){padding-left:16px!important}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner{max-width:600px;width:min-content}::ng-deep .gt-icon-innerHtml-tooltip .tooltip-inner>div{width:max-content}::ng-deep .generic-innerHtml-table-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}::ng-deep .generic-innerHtml-table-container{max-height:8.75rem;width:min-content;overflow:auto}::ng-deep .generic-innerHtml-table-container table{table-layout:fixed;width:100%}::ng-deep .generic-innerHtml-table-container table thead tr th{background:#e9e9e9;height:22px;padding:3px 8px;position:sticky;top:0;cursor:default;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0;box-shadow:inset 1px -1px #d4d4d4,inset 0 1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table thead tr th:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 1px #d4d4d4!important}::ng-deep .generic-innerHtml-table-container table tbody tr td{padding:3px 8px;width:100%;color:#000;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px;box-shadow:inset 1px -1px #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr td:last-of-type{box-shadow:inset 1px -1px #d4d4d4,inset -1px 0 #d4d4d4}::ng-deep .generic-innerHtml-table-container table tbody tr:first-of-type td{border-top:none}::ng-deep .generic-innerHtml-table-container::-webkit-scrollbar-track{margin-top:22px!important}.sort-btn{background:#fff;border:none;border-right:1px solid #1b88ff;text-decoration:underline;font-family:Roboto;font-size:var(--sort-label-fs);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:pre;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;-moz-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}.checkbox-filter-buttons-container{padding:0 8px!important}.buttons-container{display:flex;margin:0px auto .4375rem;justify-content:center;padding:0 12px}.buttons-container .button{padding:0 10px;width:100%;margin:8px 0 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.buttons-container button:last-of-type{background-color:#268bff;color:#fff;margin-left:.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:var(--filter-search-icon-fs);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:var(--filter-checkbox-label-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:1.86;letter-spacing:\"\";color:#4a4a4a}.search-input{font-family:Roboto;font-size:var(--filter-search-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#c8c8c8;width:calc(100% - 38px);margin:1px 0 1px 2px;border:none;padding:0}.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:#d3d3d3}section.min-maxContainer{display:flex;justify-content:center;margin-bottom:-.125rem;margin-top:.5rem;width:100%}section.min-maxContainer input{width:30%;height:1.5rem;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;font-size:var(--page-message-content-fs)}.time-container{width:100%;display:flex;padding:0 .75rem}.time-container input.form-control:disabled{background-color:#fff;width:2.813rem}.time-container input.numberInput:focus{box-shadow:none;border-color:#c2cfd6}.time-container .dot{color:#cbcbcb;position:relative;left:-7px;font-size:17px}.time-container div.arrow-container{flex-direction:column;display:flex;margin-top:.375rem;width:9px;height:18px;margin-right:.875rem}.time-container div.arrow-container i{color:#000;cursor:pointer;max-height:9px;font-size:20px;width:10px}.time-container div.arrow-container i:before{width:0;height:0;pointer-events:none;position:relative;left:-9px;top:-11px}.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:.75rem;font-weight:700;font-size:var(--dropdown-label-fs)}.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:var(--filter-clear-select-btn-fs);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;font-weight:400}.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:var(--filter-tab-fs);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;padding-block:3px}p.filter-tab.active{color:#fff;background-color:#1b88ff}button.filter-text-btn{background:#fff;text-decoration:underline;font-family:Roboto;font-size:var(--filter-clear-select-btn-fs);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 .non-edit-time-tooltip.bs-tooltip-start{padding:.4rem}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow{right:0;top:5px!important;width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}::ng-deep .non-edit-time-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff;left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height)}::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:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .show-max.ngx-slider span.ngx-slider-model-high{background:#fff;box-shadow:none}::ng-deep .ngx-slider span.ngx-slider-combined{background:#fff;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003}::ng-deep .ngx-slider{top:10px!important;margin:5px 0 2px!important}::ng-deep .ngx-slider-animate{top:0!important}.sidebar-slider{margin-bottom:35px!important;margin-left:5px;margin-right:5px}.slider-placeholder{height:14px}::ng-deep .filter-calendar select.form-select:focus{border-color:#c2cfd6;box-shadow:none}::ng-deep .filter-calendar select.form-select{background-color:#fff}.no-data-case{padding-left:.4375rem!important;font-size:var(--filter-checkbox-label-fs)!important;margin-top:10px!important;cursor:pointer}.virtual-scroll-div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.red-text-totol-row{color:#f44336!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}table{margin-bottom:0;table-layout:fixed;width:100%}:host ::ng-deep .gt thead{top:.1px!important;position:relative}:host ::ng-deep .gt .header-row th{border:none;background:#ededed;padding:2px 8px;line-height:normal;position:sticky;position:-webkit-sticky;top:0;box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th .upper-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}:host ::ng-deep .gt .header-row th .lower-label{font-family:Roboto;font-size:var(--table-header-fs);font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#a7a7a7;margin-bottom:0}:host ::ng-deep .gt .header-row th div.row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:max-content}:host ::ng-deep .gt .header-row th div.sort-filter-container{display:flex;flex-wrap:nowrap;align-items:center;margin-left:.25rem;margin-right:auto}:host ::ng-deep .gt .header-row th span.mdi-filter-variant{font-size:13px!important;top:-1px!important;position:relative}:host ::ng-deep .gt .header-row th:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row th:last-of-type{box-shadow:inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4,inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt .header-row br{display:block;content:\"\";margin-top:-8px}:host ::ng-deep .gt tbody tr td{padding:2px 8px;border:none;box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td div:nth-child(1){color:#000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td div:nth-child(2){color:#a7a7a7;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:Roboto;font-size:var(--table-body-fs);font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}:host ::ng-deep .gt tbody tr td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4}:host ::ng-deep .gt tbody tr br{display:block;content:\"\";margin-top:-8px}: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:#2962ff}:host ::ng-deep .gt .cell-value{width:calc(100% - 24px)!important;display:inline-block;width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .gt .tooltip-text{color:#268bff;cursor:pointer;float:right}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:first-of-type{box-shadow:inset 1px 0 #d4d4d4}:host ::ng-deep .bottom-border .gt tbody tr:last-of-type td:last-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4}.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{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:#2962ff}.time-filter-checkboxes>div>p{color:#151b1e}::ng-deep .margin-bottom-zero .mat-radio-label{margin-bottom:0}:host ::ng-deep mat-radio-group br{margin-top:0!important}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__background{width:var(--mat-radio-size);height:var(--mat-radio-size)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio__inner-circle{border-width:calc(var(--mat-radio-size) / 2)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{margin:0 0 0 4px;padding:0;top:-2px;position:relative;font-size:var(--radio-button-label-fs)}:host ::ng-deep mat-radio-group mat-radio-button .mdc-radio--disabled+label{color:var(--primary-text-color-dark)!important}:host ::ng-deep mat-radio-group mat-radio-button.mat-mdc-radio-button .mdc-form-field .mdc-radio{padding:0}:host ::ng-deep mat-radio-group mat-radio-button .mdc-form-field>label{left:-94px;font-size:12px;color:#4a4a4a;position:relative}:host ::ng-deep mat-radio-group mat-radio-button .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--mdc-radio-selected-icon-color)}::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:#fff}::ng-deep tr.gray-background-row{background:#e9e9e980!important}.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 2px 0 -14px}.spots-info-icon-ol{color:#268bff;cursor:pointer;margin:1px 4px 0 -2px}::ng-deep .spot-info-tooltip .tooltip-inner{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{max-width:fit-content;width:310px!important}::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:nth-child(1){width:20px}table.seller-hierarchy-table tr th:first-of-type,table.seller-hierarchy-table tr td:first-of-type{width:30px;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,section.table-inside-tooltip-container{max-height:8.75rem;overflow:auto}section.hierarchy-table-container::-webkit-scrollbar-track{margin-top:1.5rem}section.table-inside-tooltip-container::-webkit-scrollbar-track{margin-top:1.1875rem}.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;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:8px 4px;color:#4a4a4a!important;font-size:11px!important;font-family:Roboto;font-size:11px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}.notification-tooltip-div-container{text-align:left!important;padding:6px 8px;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:fit-content!important;max-width:520px;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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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:2px;background:#fff!important;box-shadow:0 6px 10px #0000004d,0 2px 2px #0003;font-family:Roboto;font-size:var(--page-message-content-fs);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 ul.pl-16{padding-left:16px!important}::ng-deep .tooltip-containing-table .tooltip-inner{width:100%;max-width:230px}table.tooltip-table{table-layout:fixed;margin:4px 0 0;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}.bottom-border{border-bottom:1px solid #d4d4d4!important}i.disabled{pointer-events:none!important}.black-color-text{color:#000}.white-space-nowrap{white-space:nowrap}.ellipsis-tooltip-heading{margin-bottom:2px;font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a}table.ellipsis-tooltip-table{table-layout:fixed;width:100%}table.ellipsis-tooltip-table thead th:first-of-type{box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4,inset 1px 0 #d4d4d4!important}table.ellipsis-tooltip-table thead th{background:#e9e9e9;padding:3px 8px;line-height:normal;position:sticky;top:0;cursor:default;box-shadow:inset 0 1px #d4d4d4,inset 0 -1px #d4d4d4,inset -1px 0 #d4d4d4}table.ellipsis-tooltip-table thead th .upper-label{font-family:Roboto;font-size:.6875rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:.3px;color:#4a4a4a;margin-bottom:0}table.ellipsis-tooltip-table tbody td{padding:3px 8px}table.ellipsis-tooltip-table tbody td .upper-label{width:100%;color:#000;text-overflow:ellipsis;overflow:hidden;display:inline-block;white-space:nowrap;font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:0px}table.ellipsis-tooltip-table tbody td:first-of-type{box-shadow:inset 1px 0 #d4d4d4,inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}table.ellipsis-tooltip-table tbody td:nth-of-type(n+2){box-shadow:inset -1px 0 #d4d4d4,inset 0 -1px #d4d4d4;border:none}.pr-4{padding-right:4px}.status-note-tooltip{font-family:Roboto;font-size:.75rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;color:#4a4a4a;white-space:normal!important}.view-more-comments{display:block;color:#268bff;font-family:Roboto;font-size:.75rem;font-weight:700;font-stretch:normal;font-style:normal;line-height:14px;letter-spacing:normal;cursor:pointer;margin-left:2px}td.mat-column-isOrderStarred:has(.disabled-starring){pointer-events:none!important}td.mat-column-isOrderStarred .mdi.mdi-star.disabled-starring,td.mat-column-isOrderStarred .mdi.mdi-star-outline.disabled-starring{pointer-events:none!important;color:#dbdbdb80!important}table.disable-table-scrolling{overflow:hidden!important}.icon-tooltip-text{display:inline-block;color:#268bff}.text-with-icon-and-text.reduced-width{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px);margin-bottom:-3.5px}.innrHtml-tooltip-icon-marker{float:right;color:#268bff}.reduced-width-text{text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width:calc(100% - 25px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AnnaSortService }, { type: AnnaDateTimeFormatService }, { type: AnnaFilterService }], propDecorators: { showSkeletonLoading: [{
                 type: Input
             }], tableHeaders: [{
@@ -5563,7 +5623,8 @@ class AnnaCoreModule {
             AnnaConvertArrayToCommaSeperatedValue,
             FixedRowsPopupTableDirective,
             AnnaEstIconTemplateComponent,
-            AnnaSpinnerLoaderComponent], exports: [AnnaNoDataComponent,
+            AnnaSpinnerLoaderComponent,
+            AnnaLicensingTableComponent], exports: [AnnaNoDataComponent,
             AnnaFilterSearchedTextPipe,
             AnnaConvertZeroOrNullOrUndefinedPipe,
             AnnaTypeofDataPipe,
@@ -5590,7 +5651,8 @@ class AnnaCoreModule {
             AnnaDateFormatterPipe,
             AnnaConvertArrayToCommaSeperatedValue,
             FixedRowsPopupTableDirective,
-            AnnaSpinnerLoaderComponent] }); }
+            AnnaSpinnerLoaderComponent,
+            AnnaLicensingTableComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaCoreModule, imports: [CommonModule,
             NgbModule,
             FormsModule,
@@ -5615,7 +5677,8 @@ class AnnaCoreModule {
             AnnaColumnTimeFilterComponent,
             AnnaColumnCheckboxFilterComponent,
             AnnaColumnSliderFilterComponent,
-            AnnaSpinnerLoaderComponent] }); }
+            AnnaSpinnerLoaderComponent,
+            AnnaLicensingTableComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaCoreModule, decorators: [{
             type: NgModule,
@@ -5666,6 +5729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         FixedRowsPopupTableDirective,
                         AnnaEstIconTemplateComponent,
                         AnnaSpinnerLoaderComponent,
+                        AnnaLicensingTableComponent,
                     ],
                     exports: [
                         AnnaNoDataComponent,
@@ -5696,6 +5760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AnnaConvertArrayToCommaSeperatedValue,
                         FixedRowsPopupTableDirective,
                         AnnaSpinnerLoaderComponent,
+                        AnnaLicensingTableComponent
                     ],
                 }]
         }] });
@@ -5727,7 +5792,7 @@ class AnnaCircularProgressComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaCircularProgressComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaCircularProgressComponent, isStandalone: true, selector: "anna-core-circular-progress", inputs: { percent: "percent", radius: "radius", outerStrokeWidth: "outerStrokeWidth", innerStrokeWidth: "innerStrokeWidth", outerStrokeColor: "outerStrokeColor", innerStrokeColor: "innerStrokeColor", animationDuration: "animationDuration" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"custom-progress-wrapper\"\r\n    [ngStyle]=\"{ width: radius * 2 + 1 + 'px', height: radius * 2 + 1 + 'px' }\"\r\n>\r\n    <svg\r\n        class=\"custom-progress-circle\"\r\n        [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\r\n    >\r\n        <!-- Background circle -->\r\n        <circle\r\n            class=\"custom-progress-bg\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"innerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n        ></circle>\r\n\r\n        <!-- Progress circle -->\r\n        <circle\r\n            class=\"custom-progress-bar\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"outerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n            [attr.stroke-dasharray]=\"circumference\"\r\n            [attr.stroke-dashoffset]=\"circumference - (percent / 100) * circumference\"\r\n            [attr.transform]=\"'rotate(' + radius + ' ' + radius + ')'\"\r\n        ></circle>\r\n    </svg>\r\n</div>\r\n", styles: [".custom-progress-wrapper{position:relative;display:flex}.custom-progress-circle{width:100%;height:100%;transform:rotate(-90deg)}.custom-progress-bar{stroke-linecap:round;transition:stroke-dashoffset .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AnnaCircularProgressComponent, isStandalone: true, selector: "anna-core-circular-progress", inputs: { percent: "percent", radius: "radius", outerStrokeWidth: "outerStrokeWidth", innerStrokeWidth: "innerStrokeWidth", outerStrokeColor: "outerStrokeColor", innerStrokeColor: "innerStrokeColor", animationDuration: "animationDuration" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"custom-progress-wrapper\"\r\n    [ngStyle]=\"{ width: radius * 2 + 1 + 'px', height: radius * 2 + 1 + 'px' }\"\r\n>\r\n    <svg\r\n        class=\"custom-progress-circle\"\r\n        [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\r\n    >\r\n        <!-- Background circle -->\r\n        <circle\r\n            class=\"custom-progress-bg\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"innerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n        ></circle>\r\n\r\n        <!-- Progress circle -->\r\n        <circle\r\n            class=\"custom-progress-bar\"\r\n            [attr.cx]=\"radius\"\r\n            [attr.cy]=\"radius\"\r\n            [attr.r]=\"radius - outerStrokeWidth / 2\"\r\n            [attr.stroke-width]=\"outerStrokeWidth\"\r\n            [attr.stroke]=\"outerStrokeColor\"\r\n            [attr.fill]=\"'none'\"\r\n            [attr.stroke-dasharray]=\"circumference\"\r\n            [attr.stroke-dashoffset]=\"circumference - (percent / 100) * circumference\"\r\n            [attr.transform]=\"'rotate(' + radius + ' ' + radius + ')'\"\r\n        ></circle>\r\n    </svg>\r\n</div>\r\n", styles: [".custom-progress-wrapper{position:relative;display:flex}.custom-progress-circle{width:100%;height:100%;transform:rotate(-90deg)}.custom-progress-bar{stroke-linecap:round;transition:stroke-dashoffset .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaCircularProgressComponent, decorators: [{
             type: Component,
@@ -5877,7 +5942,7 @@ class AnnaGtHelperService {
         }
         return queryParamObj;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaGtHelperService, deps: [{ token: AnnaFilterService }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: AnnaSortService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaGtHelperService, deps: [{ token: AnnaFilterService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: AnnaSortService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaGtHelperService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AnnaGtHelperService, decorators: [{
@@ -5885,7 +5950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: AnnaFilterService }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }, { type: AnnaSortService }] });
+        }], ctorParameters: () => [{ type: AnnaFilterService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: AnnaSortService }] });
 
 class GenericTooltipHtmlService {
     static generateTableHTML(headers, rowData, tableHeading = "") {
@@ -6093,6 +6158,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
+class UpdateStationIdService {
+    updateStationIdInLocalStorage(stationIds) {
+        localStorage.setItem("stationIds", JSON.stringify(stationIds.join(",")));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UpdateStationIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UpdateStationIdService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UpdateStationIdService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class LicensingPlan {
+    constructor(data) {
+        this.Id = data.Id;
+        this.PlanId = data.PlanId;
+        this.PlanName = data.PlanName;
+        this.PlanStartDate = data.PlanStartDate;
+        this.PlanEndDate = data.PlanEndDate;
+        this.PlanExpiryDays = data.DaysRemaining;
+        this.FeatureDetails = data.FeatureDetails.map((feature) => new FeatureDetails(feature));
+    }
+}
+class FeatureDetails {
+    constructor(data) {
+        this.FeatureId = data.FeatureId;
+        this.FeatureName = data.FeatureName;
+        this.FeatureDescription = data.FeatureDescription;
+        this.IsEnabled = data.IsEnabled;
+        this.Specification = data.Specification.map((spec) => ({
+            Json: JSON.parse(spec.Json),
+            JsonCloned: JSON.parse(spec.Json),
+            JsonType: spec.JsonType,
+            IsCustomized: spec.IsCustomized,
+        }));
+    }
+}
+
 class SvgOrIconTypeInGTTable {
     constructor(data) {
         this.showObjectKey = data.showObjectKey;
@@ -6223,5 +6328,5 @@ class AnnaApplicationConstants {
  * Generated bundle index. Do not edit.
  */
 
-export { ANNAIconNames, AllSelectedStatus, AnnaApplicationConstants, AnnaBuyerApprovalIconTemplateComponent, AnnaCalendarFilterComponent, AnnaCircularProgressComponent, AnnaColumnCheckboxFilterComponent, AnnaColumnDateRangeFilterComponent, AnnaColumnSliderFilterComponent, AnnaColumnTimeFilterComponent, AnnaConvertArrayToCommaSeperatedValue, AnnaConvertZeroOrNullOrUndefinedPipe, AnnaCoreModule, AnnaDateFormatterPipe, AnnaDateTimeFormatService, AnnaDeletedOrderIconTemplateComponent, AnnaFilterSearchedTextPipe, AnnaFilterService, AnnaGlobalConfigService, AnnaGtHelperService, AnnaIconColumnComponent, AnnaLiveIconTemplateComponent, AnnaNoDataComponent, AnnaNonEditableGenericTableComponent, AnnaNotifyIconTemplateComponent, AnnaNumberFormatService, AnnaPayForPerformanceIconTemplateComponent, AnnaPersistingFilterService, AnnaRejectedIconTemplateComponent, AnnaReplaceCharPipe, AnnaSortComponent, AnnaSortService, AnnaSpinnerLoaderComponent, AnnaSpinnerLoaderService, AnnaTypeofDataPipe, AnnaWeekCalendarComponent, ClickableItem, Constants, Days, DigitOnlyDirective, EllipsisWithTableTooltip, ErrorCodes, FixedRowsPopupTableDirective, GenericTooltipHtmlService, IconCellActionKey, OrderSources, RadioButtonModel, RegexPatternsService, ShowEllipsisTextOnHoverDirective, SortTypeEnum, SvgOrIconNames, SvgOrIconTypeInGTTable, TableClassNameConstant, TooltipModel, TooltipModelForColumnLevelFiltering };
+export { ANNAIconNames, AllSelectedStatus, AnnaApplicationConstants, AnnaBuyerApprovalIconTemplateComponent, AnnaCalendarFilterComponent, AnnaCircularProgressComponent, AnnaColumnCheckboxFilterComponent, AnnaColumnDateRangeFilterComponent, AnnaColumnSliderFilterComponent, AnnaColumnTimeFilterComponent, AnnaConvertArrayToCommaSeperatedValue, AnnaConvertZeroOrNullOrUndefinedPipe, AnnaCoreModule, AnnaDateFormatterPipe, AnnaDateTimeFormatService, AnnaDeletedOrderIconTemplateComponent, AnnaFilterSearchedTextPipe, AnnaFilterService, AnnaGlobalConfigService, AnnaGtHelperService, AnnaIconColumnComponent, AnnaLicensingTableComponent, AnnaLiveIconTemplateComponent, AnnaNoDataComponent, AnnaNonEditableGenericTableComponent, AnnaNotifyIconTemplateComponent, AnnaNumberFormatService, AnnaPayForPerformanceIconTemplateComponent, AnnaPersistingFilterService, AnnaRejectedIconTemplateComponent, AnnaReplaceCharPipe, AnnaSortComponent, AnnaSortService, AnnaSpinnerLoaderComponent, AnnaSpinnerLoaderService, AnnaTypeofDataPipe, AnnaWeekCalendarComponent, ClickableItem, Constants, Days, DigitOnlyDirective, EllipsisWithTableTooltip, ErrorCodes, FeatureDetails, FixedRowsPopupTableDirective, GenericTooltipHtmlService, IconCellActionKey, LicensingPlan, OrderSources, RadioButtonModel, RegexPatternsService, ShowEllipsisTextOnHoverDirective, SortTypeEnum, SvgOrIconNames, SvgOrIconTypeInGTTable, TableClassNameConstant, TooltipModel, TooltipModelForColumnLevelFiltering, UpdateStationIdService };
 //# sourceMappingURL=annalib-anna-core.mjs.map