@annalib/anna-core 2.0.0 → 2.1.0

package/src/lib/anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component.html

@@ -0,0 +1,875 @@
+<div class="table-container" [ngClass]="{ 'scroll-left-shadow-effect': isScrolledLeft }">
+    <div
+        [class]="gtGeneralConfig.tableContainerName"
+        class="horizontal-scroll-for-table-container"
+        [ngStyle]="{
+            height:
+                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll
+                    ? 'calc(' +
+                      ((gtDimension.rowHeight + (includeBorderInTableHeight ? rowBorderWidth : 0)) * tableData.length +
+                          (!tableData.length || !gtGeneralConfig.totalRow
+                              ? gtDimension.headerHeight
+                              : gtDimension.headerHeight + gtDimension.rowHeight + ( includeBorderInTableHeight ? (2 * rowBorderWidth) : 0))) +
+                      'px)'
+                    : gtDimension.tableHeight
+        }"
+    >
+        <table class="gt" [ngClass]="tableClass" mat-table [dataSource]="tableData">
+            <tr
+                class="header-row"
+                mat-header-row
+                *matHeaderRowDef="tableColumns; sticky: true"
+                [style.height.px]="gtDimension.headerHeight"
+            ></tr>
+            <tr
+                class="total-row"
+                mat-header-row
+                [style.height.px]="gtDimension.rowHeight"
+                *matHeaderRowDef="totalRowColumns; sticky: true"
+                [class.hidden]="
+                    showSkeletonLoading ||
+                    (!showSkeletonLoading && !tableData.length ) ||
+                    (showNoDataToDisplay) || 
+                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)
+                "
+            ></tr>
+            <tr
+                [class]="rowData.gtClass"
+                [ngClass]="{'no-border-tr': showNoDataToDisplay}"
+                mat-row
+                *matRowDef="let rowData; columns: tableColumns"
+                [style.height.px]="gtDimension.rowHeight"
+                [style.background-color]="rowData.backgroundColor"
+                [style.border]="rowData.border" (click)="dataRowClicked(rowData)"
+            ></tr>
+
+            <!-- TOTAL ROW -->
+            <ng-container [matColumnDef]="column.colName" *ngFor="let column of totalRowInfo; trackBy: trackByFn">
+                <td mat-header-cell *matHeaderCellDef [attr.colspan]="column.colspan" class="{{column.class}}">
+                    <strong>{{ column.data }}</strong>
+                    <ng-container *ngIf="column.lowerData">
+                        <br>
+                        <span>{{column.lowerData}}</span>
+                      </ng-container>
+                    <ng-container *ngIf="column.tooltipMessage">
+                      <i class="mi mdi-info-outline info-label" container="body"
+                      [ngbTooltip]="column.tooltipMessage"
+                      tooltipClass="gt-total-row-tooltip" placement="bottom"></i>
+                    </ng-container>
+                </td>
+            </ng-container>
+
+            <!-- MAIN ROW -->
+            <ng-container [matColumnDef]="columnDef.headerInfo[0].objectKey" *ngFor="let columnDef of tableHeaders;  trackBy: trackByFn">
+                <th #tableHeader nowrap mat-header-cell *matHeaderCellDef [style.width]="columnDef.width">
+                    <div class="row mx-0" *ngFor="let header of columnDef.headerInfo; let j = index;">    
+                        <p
+                            *ngIf="header.typeOfHeaderData === 'STRING'"
+                            [ngClass]="{ 'upper-label': j === 0, 'lower-label': j === 1 }"
+                        >
+                            {{ header.name }}
+                            <i *ngIf="header.tooltip && header.tooltip.name == 'impsInfoTooltip'" class="{{header['tooltip'].iconClass}}"
+                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
+                                #t="ngbTooltip"
+                                [ngbTooltip]="impsInfoTooltip"
+                                placement="{{ header['tooltip'].tooltipPosition }}"
+                                tooltipClass="{{ header['tooltip'].tooltipClass }}"
+                            >
+                            </i>
+                            <i *ngIf="header.tooltip && header.tooltip.name == 'spotsColumnEquivalizationMessageTooltip'" class="{{header['tooltip'].iconClass}}"
+                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
+                                #t="ngbTooltip"
+                                [ngbTooltip]="spotsColumnEquivalizationMessageTooltip"
+                                placement="{{ header['tooltip'].tooltipPosition }}"
+                                tooltipClass="{{ header['tooltip'].tooltipClass }}"
+                            >
+                            </i>
+                            <i *ngIf="header.tooltip && header.tooltip.name == 'ratingInfoTooltip'" class="{{header['tooltip'].iconClass}}"
+                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
+                                #t="ngbTooltip"
+                                [ngbTooltip]="ratingInfoTooltip"
+                                placement="{{ header['tooltip'].tooltipPosition }}"
+                                tooltipClass="{{ header['tooltip'].tooltipClass }}"
+                            >
+                            </i>
+                            <i *ngIf="header.tooltip && header.tooltip.name == 'rateInfoTooltip'" class="{{header['tooltip'].iconClass}}"
+                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
+                                #t="ngbTooltip"
+                                [ngbTooltip]="rateInfoTooltip"
+                                placement="{{ header['tooltip'].tooltipPosition }}"
+                                tooltipClass="{{ header['tooltip'].tooltipClass }}"
+                            >
+                            </i>
+                        </p>
+
+                        <ng-container *ngIf="header.typeOfHeaderData === 'CHECKBOX'">
+                            <span
+                                *ngIf="gtGeneralConfig.isHeaderChecked"
+                                class="material-icons custom-column-checkbox-checked"
+                                (click)="selectUnselectAllRows()"
+                            >
+                                check_box
+                            </span>
+                            <span
+                                *ngIf="!gtGeneralConfig.isHeaderChecked"
+                                class="material-icons custom-column-checkbox-unchecked"
+                                [ngClass]="{ 'disable-checkbox': gtGeneralConfig.disableHeaderCheckbox }"
+                                (click)="selectUnselectAllRows()"
+                            >
+                                check_box_outline_blank
+                            </span>
+                        </ng-container>
+
+                        <div *ngIf="gtGeneralConfig.showAllColumnFilter" class="sort-filter-container">
+                            <ng-container *ngIf="header.showTooltipIcon">
+                                <!-- Active tooltip Functionality -->
+                                <ng-container *ngIf="header.filter === 'CHECKBOX'">
+                                    <span
+                                        class="mdi mdi-filter-variant"
+                                        [ngClass]="{
+                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],       
+                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])
+                                        }"
+                                        [ngbTooltip]="filterTooltip"
+                                        placement="bottom left-top auto"
+                                        container="body"
+                                        tooltipClass="non-edit-checkbox-tooltip"
+                                        [autoClose]="'outside'"
+                                        triggers="manual"
+                                        #t="ngbTooltip"
+                                        (click)="bindTheValueToToolTip(t, header)"
+                                        (hidden)="closeTooltip()"
+                                    >
+                                    </span
+                                    ><br />
+                                </ng-container>
+                                <ng-container *ngIf="header.filter === 'SLIDER'">
+                                    <span
+                                        class="mdi mdi-filter-variant"
+                                        [ngClass]="{
+                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],
+                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])
+                                        }"
+                                        [ngbTooltip]="sliderToolTip"
+                                        placement="bottom left-top"
+                                        container="body"
+                                        tooltipClass="non-edit-slider-tooltip"
+                                        [autoClose]="'outside'"
+                                        triggers="manual"
+                                        #t1="ngbTooltip"
+                                        (click)="bindTheValueToToolTip(t1, header)"
+                                        (hidden)="closeTooltip()"
+                                    >
+                                    </span
+                                    ><br />
+                                </ng-container>
+                                <ng-container *ngIf="header.filter === 'DATE'">
+                                    <span
+                                        class="mdi mdi-filter-variant"
+                                        [ngClass]="{
+                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],
+                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])
+                                        }"
+                                        [ngbTooltip]="datePickerTooltip"
+                                        placement="bottom auto"
+                                        container="body"
+                                        tooltipClass="non-edit-datepicker-tooltip"
+                                        [autoClose]="'outside'"
+                                        triggers="manual"
+                                        #t2="ngbTooltip"
+                                        (click)="bindTheValueToToolTip(t2, header)"
+                                        (hidden)="closeTooltip()"
+                                    >
+                                    </span
+                                    ><br />
+                                </ng-container>
+                                <ng-container *ngIf="header.filter === 'WEEK'">
+                                    <span
+                                        class="mdi mdi-filter-variant"
+                                        [ngClass]="{
+                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],
+                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])
+                                        }"
+                                        [ngbTooltip]="weekPickerToolTip"
+                                        placement="bottom left-top"
+                                        container="body"
+                                        [autoClose]="'outside'"
+                                        triggers="manual"
+                                        #t3="ngbTooltip"
+                                        (click)="bindTheValueToToolTip(t3, header)"
+                                        (hidden)="closeTooltip()"
+                                    >
+                                    </span
+                                    ><br />
+                                </ng-container>
+                                <ng-container *ngIf="header.filter === 'TIME'">
+                                    <span
+                                        class="mdi mdi-filter-variant"
+                                        [ngClass]="{
+                                            active: annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys],
+                                            disabled: header.disableTooltipIcon && !(annaFilterService.isFilterSortActive && annaFilterService.isFilterSortActive[header.joinedFilterSortObjectKeys])
+                                        }"
+                                        [ngbTooltip]="timeFilterToolTip"
+                                        placement="bottom left-top"
+                                        container="body"
+                                        tooltipClass="non-edit-time-tooltip"
+                                        [autoClose]="'outside'"
+                                        triggers="manual"
+                                        #t4="ngbTooltip"
+                                        (click)="bindTheValueToToolTip(t4, header)"
+                                        (hidden)="closeTooltip()"
+                                    >
+                                    </span
+                                    ><br />
+                                </ng-container>
+                            </ng-container>
+                            <ng-container *ngIf="!header.showTooltipIcon">
+                                <span id="no-filter-space"></span><br />
+                            </ng-container>
+                            <i *ngIf="header.tooltip && header.tooltip.name == 'lurViolationInfoTooltip'" class="{{header['tooltip'].iconClass}}"
+                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
+                                #t="ngbTooltip"
+                                [ngbTooltip]="lurViolationInfoTooltip"
+                                placement="{{ header['tooltip'].tooltipPosition }}"
+                                tooltipClass="{{ header['tooltip'].tooltipClass }}"
+                            >
+                            </i>
+
+                        </div>
+                    </div>
+                </th>
+
+                <ng-container *ngIf="gtGeneralConfig.component == 'DRR'">
+                    <ng-container *matCellDef="let ROW_DATA">
+                        <ng-container *ngIf="showSkeletonLoading">
+                            <td mat-cell>
+                                <ngx-skeleton-loader count="1" [theme]="{ height: '10px', display: 'block' }">
+                                </ngx-skeleton-loader>
+                            </td>
+                        </ng-container>
+
+                        <ng-container *ngIf="!showSkeletonLoading">
+                            <ng-container
+                                *ngFor="let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn"
+                            >
+                                <td
+                                    mat-cell
+                                    *ngIf="!ROW_DATA['hide' + subline.objectKey + 'Td']"
+                                    [attr.rowspan]="ROW_DATA[subline.objectKey + 'Rowspan']"
+                                >
+                                    <ng-container [ngSwitch]="subline.typeOfBodyData">
+                                        <ng-container *ngSwitchCase="'ICON'">
+                                            <i [class]="ROW_DATA.iconClass"></i>
+                                        </ng-container>
+
+                                        <ng-container *ngSwitchCase="'CHECKBOX'">
+                                            <span
+                                                *ngIf="ROW_DATA[subline.objectKey]"
+                                                [ngClass]="{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }"
+                                                class="material-icons custom-column-checkbox-checked"
+                                                (click)="selectUnselectRow(ROW_DATA)"
+                                            >
+                                                check_box
+                                            </span>
+                                            <span
+                                                *ngIf="!ROW_DATA[subline.objectKey]"
+                                                class="material-icons custom-column-checkbox-unchecked"
+                                                [ngClass]="{ 'disable-checkbox': ROW_DATA[subline.isDisabledKey] }"
+                                                (click)="selectUnselectRow(ROW_DATA)"
+                                            >
+                                                check_box_outline_blank
+                                            </span>
+                                        </ng-container>
+
+                                        <ng-container *ngSwitchCase="'RADIO'">
+                                            <mat-radio-group
+                                                *ngIf="ROW_DATA['RadioButtonConfig']"
+                                                [ngModel]="ROW_DATA[subline.objectKey]"
+                                                [disabled]="ROW_DATA['RadioButtonConfig'][0].isDisabled"
+                                            >
+                                                <ng-container
+                                                    *ngFor="let radioButton of ROW_DATA['RadioButtonConfig']; let last = last"
+                                                >
+                                                    <mat-radio-button
+                                                        value="{{ radioButton.value }}"
+                                                        class="{{ radioButton.class }}"
+                                                        (click)="
+                                                            radioButtonClicked(
+                                                                ROW_DATA,
+                                                                radioButton.value,
+                                                                ROW_DATA['RadioButtonConfig'][0].isDisabled
+                                                            )
+                                                        "
+                                                        >{{ radioButton.label }}</mat-radio-button
+                                                    ><br *ngIf="!last" />
+                                                </ng-container>
+                                            </mat-radio-group>
+                                        </ng-container>
+
+                                        <ng-container *ngSwitchDefault>
+                                            {{ ROW_DATA[subline.objectKey] }}
+
+                                            <ng-container
+                                                *ngIf="
+                                                    subline.objectKey == 'Status' && (ROW_DATA['Remarks'] !== null)
+                                                "
+                                            >
+                                                <i
+                                                    class="mi mdi-info-outline remarks-tooltip"
+                                                    [ngbTooltip]="columnInfoTooltip"
+                                                    placement="bottom"
+                                                    container="body"
+                                                    tooltipClass="remarks-info-tooltip"
+                                                    #t="ngbTooltip"
+                                                ></i>
+                                            </ng-container>
+                                        </ng-container>
+                                    </ng-container>
+                                </td>
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="gtGeneralConfig.component != 'DRR'">
+                    <td mat-cell *matCellDef="let ROW_DATA" [style.background]="ROW_DATA.backgroundColor">
+                        <ngx-skeleton-loader *ngIf="showSkeletonLoading" count="1" [theme]="{ height: '10px', display: 'block' }">
+                        </ngx-skeleton-loader>
+
+                        <ng-container *ngIf="!showSkeletonLoading">
+                            <ng-container *ngIf="tableData.length > 0 && !showNoDataToDisplay">
+                                <div showEllipsisTextOnHover *ngFor="let subline of columnDef.headerInfo; let subLineIndex = index; trackBy: trackByFn">
+                                    <ng-container [ngSwitch]="columnDef.headerInfo[subLineIndex].typeOfBodyData">
+                                        <ng-container *ngSwitchCase="'ICON'">
+                                            <i [class]="ROW_DATA.iconClass" (click)="iconClicked(ROW_DATA,ROW_DATA.iconClass)"></i>
+                                        </ng-container>
+    
+                                        <ng-container *ngSwitchCase="'SVG_ICON'">
+                                            <anna-core-anna-icon-column [componentName]="gtGeneralConfig.component" [objectKey]="subline.objectKey" [dataObject]="ROW_DATA" (onColumnIconClicked)="svgIconClicked($event)"></anna-core-anna-icon-column>
+                                        </ng-container>
+    
+                                        <ng-container *ngSwitchCase="'TEXT_ACTIONS'">
+                                            <button *ngFor="let text of ROW_DATA.textActions" (click)="textActionClicked(ROW_DATA,text.id)" [disabled]="text.isDisabled" class="{{text.class}}">{{text.name}}</button>
+                                        </ng-container>
+    
+                                        <ng-container *ngSwitchCase="'CHECKBOX'">
+                                            <span
+                                                *ngIf="ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]"
+                                                [ngClass]="{
+                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]
+                                                }"
+                                                class="material-icons custom-column-checkbox-checked"
+                                                (click)="
+                                                    selectOrUnselectCheckbox(
+                                                        ROW_DATA,
+                                                        columnDef.headerInfo[subLineIndex].objectKey,
+                                                        false
+                                                    )
+                                                "
+                                            >
+                                                check_box
+                                            </span>
+                                            <span
+                                                *ngIf="!ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey]"
+                                                class="material-icons custom-column-checkbox-unchecked"
+                                                [ngClass]="{
+                                                    'disable-checkbox': ROW_DATA[columnDef.headerInfo[subLineIndex].isDisabledKey]
+                                                }"
+                                                (click)="
+                                                    selectOrUnselectCheckbox(
+                                                        ROW_DATA,
+                                                        columnDef.headerInfo[subLineIndex].objectKey,
+                                                        true
+                                                    )
+                                                "
+                                            >
+                                                check_box_outline_blank
+                                            </span>
+                                        </ng-container>
+    
+                                        <ng-container *ngSwitchDefault>
+                                            <ng-container *ngIf="subline.objectKey != 'description'">
+                                                <span>{{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}</span>
+                                                <i
+                                                    *ngIf="subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' "
+                                                    class="mi mdi-info-outline seller-tooltip"
+                                                    [ngbTooltip]="sellerHierarchyTooltip"
+                                                    placement="bottom auto"
+                                                    container="body"
+                                                    [autoClose]="true"
+                                                    triggers="manual"
+                                                    (hidden)="closeTooltip()"
+                                                    #info="ngbTooltip"
+                                                    tooltipClass="hierarchy-tooltip"
+                                                    (mouseenter)="bindTheValueToSellerGroupTooltip(ROW_DATA.sellerGroupHierarchy, info)">
+                                                </i>
+
+                                                <i *ngIf="subline.objectKey == 'displayBookedAverageRating' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showRatingAverageIcon'] "
+                                                    class="mi mdi-info-outline seller-tooltip"
+                                                    placement="bottom auto"
+                                                    container="body"
+                                                    [autoClose]="true"
+                                                    (mouseenter)="setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)"
+                                                    tooltipClass="posted-avg-tooltip"
+                                                    [ngbTooltip]="postedRatingDifference"
+                                                >
+                                                </i>
+                                            
+                                                <i *ngIf="subline.objectKey == 'displayBookedAverageImpression' && gtGeneralConfig.component == 'RATING' && ROW_DATA['showImpressionAverageIcon'] "
+                                                    class="mi mdi-info-outline seller-tooltip"
+                                                    placement="bottom auto"
+                                                    container="body"
+                                                    [autoClose]="true"
+                                                    (mouseenter)="setIsDifference(ROW_DATA.isDifferenceLessThan25Percent)"
+                                                    tooltipClass="posted-avg-tooltip"
+                                                    [ngbTooltip]="postedImpDifference"
+                                                >
+                                                </i>
+
+                                            </ng-container>
+                                            <ng-container *ngIf="subline.objectKey == 'description'">
+                                                <p *ngIf="ROW_DATA.descriptionMessage || ROW_DATA.descriptionEmailReferenceNum">
+                                                    <ng-container *ngIf="ROW_DATA.descriptionMessage">
+                                                        {{ ROW_DATA.descriptionMessage }}
+                                                        <br />
+                                                    </ng-container>
+                                                    <ng-container *ngIf="ROW_DATA.descriptionEmailReferenceNum">
+                                                        Email Ref: {{ ROW_DATA.descriptionEmailReferenceNum }}
+                                                        <br />
+                                                    </ng-container>
+                                                </p>
+                                                <a
+                                                    href="{{ ROW_DATA.descriptionDetailsUrl }}"
+                                                    target="_blank"
+                                                    *ngIf="ROW_DATA.descriptionDetailsUrlType === 'PDF' || ROW_DATA.descriptionDetailsUrlType === 'EXCEL'"
+                                                >
+                                                    <button class="btn viewDetailsAndEmailBtn">Download</button>
+                                                </a>
+                                                <ng-container *ngIf="ROW_DATA.activityname.toLowerCase() == 'order onboarded'">
+                                                    <a *ngIf="ROW_DATA.descriptionDetailsUrlType === 'LINK'" (click)="viewDetailsClicked(ROW_DATA)">
+                                                      <button class="btn viewDetailsAndEmailBtn">View details</button>
+                                                    </a>                
+                                                </ng-container>
+                                               
+                                                <a href="{{ ROW_DATA.descriptionEmailUrl }}" target="_blank" *ngIf="ROW_DATA.descriptionEmailUrl">
+                                                    <button class="btn viewDetailsAndEmailBtn">View email</button>
+                                                </a>
+                                            </ng-container>
+                                        </ng-container>
+                                    </ng-container>
+    
+                                    <ng-container
+                                        *ngIf="
+                                            gtGeneralConfig.page === 'SpotDetails' &&
+                                            columnDef.headerInfo[subLineIndex].objectKey === 'Status'
+                                        "
+                                    >
+                                        <img
+                                            src="assets/images/Undo-Credit-Icon.svg"
+                                            style="cursor: pointer"
+                                            class="img-circle"
+                                            alt="User Image"
+                                            height="15px"
+                                            width="15px"
+                                            *ngIf="ROW_DATA.AllowUserToUndoMarkForCredit"
+                                            (click)="undoCreditedSpot(ROW_DATA)"
+                                        />
+                                        <img
+                                            src="assets/images/Undo-MG-Icon.svg"
+                                            style="cursor: pointer"
+                                            class="img-circle"
+                                            alt="User Image"
+                                            height="15px"
+                                            width="15px"
+                                            *ngIf="ROW_DATA.AllowUserToUndoMarkForMakeGood"
+                                            (click)="undoMgSpot(ROW_DATA)"
+                                        />
+                                    </ng-container>
+                                </div>
+                            </ng-container>
+                            <ng-container *ngIf="showNoDataToDisplay">
+                                <div>
+                                    {{null}}
+                                </div>
+                            </ng-container>
+                        </ng-container>
+                    </td>
+                </ng-container>
+            </ng-container>
+        </table>
+    </div>
+    <anna-core-no-data-lib [width]="noDataWidth" [marginTop]="marginTop" *ngIf="!showSkeletonLoading && showNoDataToDisplay"> </anna-core-no-data-lib>
+</div>
+
+<!-- Checkbox template -->
+<ng-template #filterTooltip>
+    
+    <div class="radio-container" *ngIf="showFilterTooltipTabs">
+        <div *ngFor="let data of filterTabObjects">
+            <p class="filter-tab" (click)="populateTooltipDataBasedOnSelectedRadio(data)" [ngClass]="{'active': annaFilterService.selectedRadio == data.key}" *ngIf="filterTabObjects.length > 0">{{ data.label }}</p>
+        </div>
+    </div>
+    
+    <div class="checkbox-sort" *ngIf="showSortComponent">
+        <anna-core-sort-lib  [ngClass]="{'no-bottom-border': !showFilterComponent}"
+        (sortOptionClicked)="storeSortTypeInTempVariable($event)" [sortObjectKey]="annaFilterService.selectedRadio"></anna-core-sort-lib>
+    </div>
+    
+    <ng-container *ngIf="showFilterComponent">
+        <p class="d-flex justify-content-between">
+            <button class="filter-text-btn" [disabled]="disableClearAll" (click)="unCheckAllCheckbox()">Clear All</button>
+            <button class="filter-text-btn" [disabled]="disableSelectAll" (click)="selectAllCheckbox()">Select All</button>
+        </p>
+        <p class="search-box">
+            <i class="mi mdi-search search-icon search-icon-position"></i>
+            <input
+                type="text"
+                placeholder="Search"
+                class="search-input"
+                style="margin-left: 2px; border: none; padding: 0px"
+                [(ngModel)]="searchItem"
+                (ngModelChange)="searchForTheItem($event)"
+            />
+            <i class="mdi mdi-close search-bar-close" [ngClass]="{'disable-close-icon': (!searchItem || searchItem.length == 0) }"
+            (click)="clearSearchedItem()"></i>
+
+        </p>
+        <div class="dropdown-data-container">
+            <!-- Track By func -->
+            <ng-container *ngFor="let option of tooltipOptions;trackBy: trackByTooltipModelId">
+                <p class="input" (click)="selectUnselectCheckbox(option)">
+                    <span *ngIf="option.isSelected" role="button" class="mi mdi-check-box check-box"></span>
+                    <span *ngIf="!option.isSelected" role="button" class="mi mdi-check-box-outline-blank check-box unchecked"></span>
+                    <span class="data" title="{{ option.value }}" [innerHTML]="option.label"></span>
+                </p>
+            </ng-container>
+        </div>
+    </ng-container>
+
+    <div class="buttons-container">
+        <button class="button" (click)="closeCheckboxFilter()">Cancel</button>
+        <button
+            class="button"
+            [ngClass]="{ disabled: disableCheckboxApply }"
+            (click)="applyFilters()"
+            [disabled]="disableCheckboxApply"
+        >
+            Apply
+            <span *ngIf="showFilterComponent">({{ selectedCheckboxOptionsCount == tooltipOptions.length && tooltipOptions.length != 0 && !searchItem? 'All': selectedCheckboxOptionsCount }})</span>
+        </button>
+    </div>
+</ng-template>
+
+<!-- Slider template -->
+<ng-template #sliderToolTip>
+    
+    <div class="radio-container" *ngIf="showFilterTooltipTabs">
+        <div *ngFor="let data of filterTabObjects">
+            <p class="filter-tab" (click)="populateTooltipDataBasedOnSelectedRadio(data)" [ngClass]="{'active': annaFilterService.selectedRadio == data.key}" *ngIf="filterTabObjects.length > 0">{{ data.label }}</p>   
+        </div>
+    </div>
+    <!-- <button class="column-clear-all align-center" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">
+        Clear filter
+    </button> -->
+        
+    <anna-core-sort-lib *ngIf="showSortComponent" [ngClass]="{'no-bottom-border': !showFilterComponent}"
+    (sortOptionClicked)="storeSortTypeInTempVariable($event)" [sortObjectKey]="annaFilterService.selectedRadio"></anna-core-sort-lib>
+    
+    <ng-container *ngIf="showFilterComponent">
+        <button class="column-clear-all" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">Clear filter</button>
+        <section class="min-maxContainer">
+            <input
+                type="number"
+                class="slider-text"
+                step="{{ sliderFilterTextBoxStep }}"
+                [(ngModel)]="sliderMinValue"
+                (ngModelChange)="minValueChanged($event)"
+                [ngClass]="{'red-border': showSliderMinValueError}"
+                placeholder="Min"
+            />
+            <span>To</span>
+            <input
+                type="number"
+                class="slider-text"
+                step="{{ sliderFilterTextBoxStep }}"
+                [(ngModel)]="sliderMaxValue"
+                (ngModelChange)="maxValueChanged($event)"
+                [ngClass]="{'red-border': showSliderMaxValueError}"
+                placeholder="Max"
+            />
+        </section>
+        <div class="sidebar-slider">
+            <ngx-slider
+                class="filter-slider"
+                [value]="sliderMinValue"
+                [highValue]="sliderMaxValue"
+                [options]="options"
+            ></ngx-slider>
+        </div>
+    </ng-container>
+    
+    <div class="buttons-container">
+        <button class="button" (click)="cancelSliderFilter()">Cancel</button>
+        <button
+            class="button"
+            [ngClass]="{ disabled: disableSliderApplyButton }"
+            (click)="applySliderFilter()"
+            [disabled]="disableSliderApplyButton"
+        >
+            Apply
+        </button>
+    </div>
+</ng-template>
+
+<!-- Date Picker Template -->
+<ng-template #datePickerTooltip>
+    <div class="radio-container" *ngIf="showFilterTooltipTabs">
+        <div *ngFor="let data of filterTabObjects">
+            <p class="filter-tab" (click)="populateTooltipDataBasedOnSelectedRadio(data)" [ngClass]="{'active': annaFilterService.selectedRadio == data.key}" *ngIf="filterTabObjects.length > 0">{{ data.label }}</p>
+        </div>
+    </div>
+
+    <anna-core-sort-lib *ngIf="showSortComponent" [ngClass]="{'no-bottom-border': !showFilterComponent}"
+    (sortOptionClicked)="storeSortTypeInTempVariable($event)" [sortObjectKey]="annaFilterService.selectedRadio"></anna-core-sort-lib>
+    
+    <ng-container *ngIf="showFilterComponent">
+        <div class="datepicker-container">
+            <button class="column-clear-all" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">
+                Clear filter
+            </button>
+            <anna-core-calendar-filter-lib
+                [minDate]="calendarMinEnabledDate"
+                [maxDate]="calendarMaxEnabledDate"
+                [selectedFromDate]="selectedMinDate"
+                [selectedToDate]="selectedMaxDate"
+                (selectedDate) = "calendarDateChanged($event)"
+                [label]="selectedLabel"
+            >
+            </anna-core-calendar-filter-lib>
+        </div>
+    </ng-container>
+
+    <div class="buttons-container">
+        <button class="button" (click)="cancelInDateFilter()">Cancel</button>
+        <button class="button" (click)="applyDateFilter()" [ngClass]="{ disabled: disableCalendarApplyBtn }"
+        [disabled]="disableCalendarApplyBtn">Apply</button>
+    </div>
+    
+</ng-template>
+
+<!-- Week Picker Template -->
+<ng-template #weekPickerToolTip>
+    <div class="weekpicker-container">
+        <anna-core-week-calendar-filter-lib
+            [week-calendar-config]="gtGeneralConfig.multiWeekPickerConfig"
+            (apply)="applyWeekFilter($event)"
+            [from-date]="calendarMinEnabledDate"
+            [to-date]="calendarMaxEnabledDate"
+        >
+        </anna-core-week-calendar-filter-lib>
+    </div>
+</ng-template>
+
+<!-- Time Filter Template -->
+<ng-template #timeFilterToolTip>
+    
+    <div class="radio-container" *ngIf="showFilterTooltipTabs">
+        <div *ngFor="let data of filterTabObjects">
+            <p class="filter-tab" (click)="populateTooltipDataBasedOnSelectedRadio(data)" [ngClass]="{'active': annaFilterService.selectedRadio == data.key}" *ngIf="filterTabObjects.length > 0">{{ data.label }}</p>
+        </div>
+    </div>
+
+    <anna-core-sort-lib *ngIf="showSortComponent" [ngClass]="{'no-bottom-border': !showFilterComponent}"
+    (sortOptionClicked)="storeSortTypeInTempVariable($event)" [sortObjectKey]="annaFilterService.selectedRadio"></anna-core-sort-lib>
+    
+    <ng-container *ngIf="showFilterComponent">
+        <button class="column-clear-all" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">Clear filter</button>
+        <div
+            class="time-filter-checkboxes"
+            *ngIf="gtGeneralConfig.component == 'SPOTDETAILS' || gtGeneralConfig.component == 'EXCLUDEINVENTORYPOPUP' || gtGeneralConfig.component == 'RATING'"
+        >
+            <!-- Multi time option checkbox -->
+            <div class="d-flex align-items-center" style="padding: 0.5rem 0 0.5rem 0.5rem" *ngIf="showMultiTimeCheckbox">
+                <span
+                    *ngIf="multiTimeCheckboxChecked"
+                    class="material-icons custom-column-checkbox-checked"
+                    (click)="selectOrUnselectMultiTimeCheckbox()"
+                >
+                    check_box
+                </span>
+                <span
+                    *ngIf="!multiTimeCheckboxChecked"
+                    class="material-icons custom-column-checkbox-unchecked"
+                    (click)="selectOrUnselectMultiTimeCheckbox()"
+                >
+                    check_box_outline_blank
+                </span>
+                <p style="margin-left: 2px">Include Multi</p>
+            </div>
+            <!-- Zero time option checkbox -->
+            <div class="d-flex align-items-center" style="padding: 0.5rem 0 0.5rem 0.5rem" *ngIf="showZeroTimeCheckbox">
+                <span
+                    *ngIf="zeroTimeCheckboxChecked"
+                    class="material-icons custom-column-checkbox-checked"
+                    (click)="selectOrUnselectZeroTimeCheckbox()"
+                >
+                    check_box
+                </span>
+                <span
+                    *ngIf="!zeroTimeCheckboxChecked"
+                    class="material-icons custom-column-checkbox-unchecked"
+                    (click)="selectOrUnselectZeroTimeCheckbox()"
+                >
+                    check_box_outline_blank
+                </span>
+                <p style="margin-left: 2px">Include Zero</p>
+            </div>
+            <!-- Enter time range option checkbox -->
+            <div class="d-flex align-items-center" style="padding: 0.5rem 0 0.5rem 0.5rem" *ngIf="showEnterTimeCheckbox">
+                <span
+                    *ngIf="enterTimeCheckboxChecked"
+                    class="material-icons custom-column-checkbox-checked"
+                    (click)="selectOrUnselectEnterTimeCheckbox()"
+                >
+                    check_box
+                </span>
+                <span
+                    *ngIf="!enterTimeCheckboxChecked"
+                    class="material-icons custom-column-checkbox-unchecked"
+                    (click)="selectOrUnselectEnterTimeCheckbox()"
+                >
+                    check_box_outline_blank
+                </span>
+                <p style="margin-left: 2px">Enter time range</p>
+            </div>
+        </div>
+        <div class="time-label-container">
+            <label>From</label>
+        </div>
+        <div class="time-container">
+            <input class="form-control numberInput" [ngClass]="{'error-border': startTimeHourErr}" [(ngModel)]="selectedFromTime[0]" type="text" (ngModelChange)="startTimeHourChange($event)" />
+            <div class="arrow-container">
+                <i class="mdi mdi-triangle upward" (click)="changeStartTimeHour(true)"></i>
+                <i class="mdi mdi-triangle downward" (click)="changeStartTimeHour(false)"></i>
+            </div>
+            <span class="dot">:</span>
+            <input class="form-control numberInput" [ngClass]="{'error-border': startTimeMinErr}" [(ngModel)]="selectedFromTime[1]" type="text" (ngModelChange)="startTimeMinChange($event)"/>
+            <div class="arrow-container">
+                <i class="mdi mdi-triangle upward" (click)="changeStartTimeMinute(true)"></i>
+                <i class="mdi mdi-triangle downward" (click)="changeStartTimeMinute(false)"></i>
+            </div>
+            <div>
+                <mat-button-toggle-group [(ngModel)]="selectedFromTime[2]" (ngModelChange)="disableTimeFilterApplyButton()">
+                    <mat-button-toggle value="AM">
+                        <span>AM</span>
+                    </mat-button-toggle>
+                    <mat-button-toggle value="PM">
+                        <span>PM</span>
+                    </mat-button-toggle>
+                </mat-button-toggle-group>
+            </div>
+        </div>
+
+        <div class="time-label-container">
+            <label>To</label>
+        </div>
+        <div class="time-container">
+            <input class="form-control numberInput" [(ngModel)]="selectedToTime[0]" [ngClass]="{'error-border': endTimeHourErr}" (ngModelChange)="endTimeHourChange($event)" type="text" />
+            <div class="arrow-container">
+                <i class="mdi mdi-triangle upward" (click)="changeEndTimeHour(true)"></i>
+                <i class="mdi mdi-triangle downward" (click)="changeEndTimeHour(false)"></i>
+            </div>
+            <span class="dot">:</span>
+            <input class="form-control numberInput" [ngClass]="{'error-border': endTimeMinErr}" [(ngModel)]="selectedToTime[1]" (ngModelChange)="endTimeMinChange($event)" type="text" />
+            <div class="arrow-container">
+                <i class="mdi mdi-triangle upward" (click)="changeEndTimeMinute(true)"></i>
+                <i class="mdi mdi-triangle downward" (click)="changeEndTimeMinute(false)"></i>
+            </div>
+            <div>
+                <mat-button-toggle-group [(ngModel)]="selectedToTime[2]" (ngModelChange)="disableTimeFilterApplyButton()">
+                    <mat-button-toggle value="AM">
+                        <span>AM</span>
+                    </mat-button-toggle>
+                    <mat-button-toggle value="PM">
+                        <span>PM</span>
+                    </mat-button-toggle>
+                </mat-button-toggle-group>
+            </div>
+        </div>
+    </ng-container>
+
+    <div class="buttons-container">
+        <button class="button" (click)="closeTimeFilter()">Cancel</button>
+        <button
+            class="button"
+            [ngClass]="{ disabled: disableTimeFilterApplyBtn }"
+            (click)="applyTimeFilters()"
+            [disabled]="disableTimeFilterApplyBtn"
+        >
+            Apply
+        </button>
+    </div>
+</ng-template>
+
+<ng-template #columnInfoTooltip>
+  <p style="padding: 0.5rem; color: black;white-space: nowrap;">This preemption is rejected and not marked for credit.</p>
+</ng-template>
+
+<ng-template #ratingInfoTooltip>
+    <p class="first-row">Shows 'Booked Rating' for Preemptions & MakeGood Offered spot(s).</p>
+    <p class="second-row">Shows 'Projected Rating' for ADU Offered spot(s).</p>
+</ng-template>
+
+<ng-template #impsInfoTooltip>
+    <p class ="first-row" >Shows 'Booked IMPS' for Preemptions & MakeGood Offered spot(s).</p>
+    <p class="second-row" >Shows 'Projected IMPS' for ADU Offered spot(s).</p>
+</ng-template>
+
+<ng-template #spotsColumnEquivalizationMessageTooltip>
+    <p class="spot-column-tooltip-message" >This consists of equivalized spots and un-equivalized Paid Programs & un-equivalized Non-spots.</p>
+</ng-template>
+
+<ng-template #rateInfoTooltip>
+    <p class ="first-row" >Shows 'Booked Rate' for Preemptions & MakeGood Offered spot(s).</p>
+    <p class="second-row" >Shows 'Projected $ Value' for ADU Offered spot(s).</p>
+</ng-template>
+
+<ng-template #sellerHierarchyTooltip>
+    <ng-container *ngIf="sellerGroupHierarchy.length > 0">
+        <table class="seller-hierarchy-table">
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Inventory Codes</th>
+                    <th>Program/Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of sellerGroupHierarchy; let tooltipIndex = index">
+                    <td>{{ tooltipIndex + 1 }}</td>
+                    <td>
+                        <span>{{ data.inventoryCode }}</span>
+                    </td>
+                    <td>
+                        <span>{{ data.program }}</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </ng-container>
+    <ng-container *ngIf="sellerGroupHierarchy.length == 0">
+        <span style="color: #000">Seller group not available for this inventory code</span>
+    </ng-container>
+</ng-template>
+
+<ng-template #lurViolationInfoTooltip>
+    <p class ="first-row" >The values are for the entire week.</p>
+</ng-template>
+
+<ng-template #postedRatingDifference>
+    <p class="difference-text">The difference between posted and booked average rating is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>
+</ng-template>
+
+<ng-template #postedImpDifference>
+    <p class="difference-text">The difference between posted and booked average impression is {{isDifferenceLessThan25Percent ? 'less' : 'more'}} than 25%.</p>
+</ng-template>