@annalib/anna-core 4.2.5 → 4.2.7

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

@@ -1,926 +0,0 @@
-<div class="table-container {{gtGeneralConfig.tableOuterContainerName}}" [ngClass]="{ 'scroll-left-shadow-effect': isScrolledLeft }" (scroll)="onTableContainerScroll($event)">
-    <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]="renderedData">
-            <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 ) ||
-                    (isNoDataToDisplaySubject$ | async) || 
-                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)
-                "
-            ></tr>
-            <tr
-                [class]="rowData.gtClass"
-                [ngClass]="{'no-border-tr': (isNoDataToDisplaySubject$ | async)}"
-                mat-row
-                *matRowDef="let rowData; columns: tableColumns"
-                [style.height.px]="gtDimension.rowHeight"(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 
-                            *ngIf="column.colName == 'total-potential-booked-unit' && gtGeneralConfig.component == 'RATING';
-                            else columnLowerData"
-                            class="clickable-data"
-                            (click)="spotDetailsDownloadClicked('TOTALROW')"
-                            [ngClass]="{ 'disabled-clickable-data': downloadInProgress }"
-                            >{{ column.lowerData }}
-                            <span class="material-icons spot-details-download-icons">get_app</span>
-                            <ng-container *ngIf="downloadInProgress 
-                                    && selectedRowTypeForDownload == 'TOTALROW' ">
-                                <ng-container [ngTemplateOutlet]="circularProgressBar"></ng-container>
-                            </ng-container>
-                        </span>
-                        <ng-template #columnLowerData>
-                            <span>{{ column.lowerData }}</span>
-                        </ng-template>
-                      </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>
-                            <i *ngIf="header.tooltip && header.tooltip.name == 'ongoingRevBookedColumnTooltip'" class="{{header['tooltip'].iconClass}}"
-                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
-                                #t="ngbTooltip"
-                                [ngbTooltip]="ongoingRevBookedColumnTooltip"
-                                placement="{{ header['tooltip'].tooltipPosition }}"
-                                tooltipClass="{{ header['tooltip'].tooltipClass }}"
-                            >
-                            </i>
-                            <i *ngIf="header.tooltip && header.tooltip.name == 'completedRevBookedColumnTooltip'" class="{{header['tooltip'].iconClass}}"
-                                [ngStyle]="{'float': header['tooltip'].iconPosition}"
-                                #t="ngbTooltip"
-                                [ngbTooltip]="completedRevBookedColumnTooltip"
-                                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">
-                            <td
-                            mat-cell
-                            *ngIf="!ROW_DATA['hide' + columnDef.headerInfo[0].objectKey + 'Td']"
-                            [attr.rowspan]="ROW_DATA[columnDef.headerInfo[0].objectKey + 'Rowspan']">
-                            <ng-container
-                            *ngFor="let subline of columnDef.headerInfo; let sublineIndex = index; trackBy: trackByFn"
-                            >
-                                <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>
-                            
-                                    <div *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>
-                                    </div>
-                                </ng-container>
-                            </ng-container>
-                            </td>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-
-                <ng-container *ngIf="gtGeneralConfig.component != 'DRR'">
-                    <td mat-cell *matCellDef="let ROW_DATA" [style.background]="ROW_DATA.backgroundColor" 
-                    [style.border]="ROW_DATA.border"
-                    class="{{ROW_DATA.rowClass}}"
-                    >
-                        <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 && !(isNoDataToDisplaySubject$ | async)">
-                                <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 *ngIf="!(starredInProgress && ROW_DATA.orderId == selectedStarredOrderId)" [class]="ROW_DATA.iconClass" (click)="iconClicked(ROW_DATA,ROW_DATA.iconClass)"></i>
-                                            <ng-container *ngIf="starredInProgress && ROW_DATA.orderId == selectedStarredOrderId">
-                                                <div class="spinner-for-button-directive"></div>
-                                                <!-- <ng-container [ngTemplateOutlet]="circularProgressBar"></ng-container> -->
-                                            </ng-container>
-                                        </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 *ngSwitchCase="'CLICKABLE_DATA'">
-                                            <span 
-                                                *ngIf="subline.objectKey == 'displayBookedUnits' && gtGeneralConfig.component == 'RATING'"
-                                                class="clickable-data"
-                                                (click)="spotDetailsDownloadClicked('DATAROW', ROW_DATA)"
-                                                [ngClass]="{ 'disabled-clickable-data': downloadInProgress }"
-                                                >{{ ROW_DATA.displayBookedUnits}}
-                                                <span class="material-icons spot-details-download-icons">get_app</span>
-                                                <ng-container *ngIf="downloadInProgress 
-                                                        && ROW_DATA.inventoryCodeId == selectedInventoryIdForDownload 
-                                                        && ROW_DATA.demographic == selectedDemographicForDownload ">
-                                                    <ng-container [ngTemplateOutlet]="circularProgressBar"></ng-container>
-                                                </ng-container>
-                                            </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 order-onboarded">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>
-    
-                                </div>
-                            </ng-container>
-                            <ng-container *ngIf="(isNoDataToDisplaySubject$ | async)">
-                                <div>
-                                    {{null}}
-                                </div>
-                            </ng-container>
-                        </ng-container>
-                    </td>
-                </ng-container>
-            </ng-container>
-        </table>
-    </div>
-    <anna-core-no-data-lib [width]="noDataWidth" [marginTop]="marginTop" *ngIf="(isNoDataToDisplaySubject$ | async)"> </anna-core-no-data-lib>
-</div>
-
-<!-- Checkbox template -->
-<ng-template #filterTooltip>
-    
-    <div class="radio-container" *ngIf="showFilterTooltipTabs">
-        <div [ngClass]="{'full-width': filterTabObjects.length == 1}" *ngFor="let data of filterTabObjects">
-            <p class="filter-tab" [title]="data.label" (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 style="position:relative">
-            <!-- Track By func -->
-            <cdk-virtual-scroll-viewport itemSize="18" [style.height.px]="heightOfCheckboxTooltipFilter" class="dropdown-data-container">
-                <p *cdkVirtualFor="let option of tooltipOptions" class="input example-item" (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>
-            </cdk-virtual-scroll-viewport>
-            <div style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none"></div>
-        </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" [title]="data.label" (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" [title]="data.label" (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" [title]="data.label" (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">
-        <section class = "hierarchy-table-container">
-        <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>
-    </section>
-    </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>
-
-<ng-template #ongoingRevBookedColumnTooltip>
-    <p>The Booked $ value, Spots, GRP, CPP, IMPS, CPM corresponds on the last permanent revision generated</p>
-</ng-template>
-
-<ng-template #completedRevBookedColumnTooltip>
-    <p>The Booked $ value corresponds on the last permanent revision generated</p>
-</ng-template>
-
-<ng-template #circularProgressBar>
-    <circle-progress
-        [percent]="percentDone"
-        [radius]="5"
-        [showTitle]="false"
-        [showUnits]="false"
-        [showSubtitle]="false"
-        [outerStrokeWidth]="3"
-        [innerStrokeWidth]="3"
-        [space]="-3"
-        [outerStrokeColor]="'#268bff'"
-        [innerStrokeColor]="'#d5d5d5'"
-        [animationDuration]="10"
-    ></circle-progress>
-</ng-template>