@annalib/anna-core 0.0.3 → 0.0.6

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

@@ -1,848 +0,0 @@
-<div class="table-container" [ngClass]="{ 'scroll-left-shadow-effect': isScrolledLeft }">
-    <anna-table-virtual-scroll-viewport
-        [buffer]="gtGeneralConfig.bufferSize"
-        [rowHeight]="gtDimension.rowHeight"
-        [class]="gtGeneralConfig.tableContainerName"
-        [ngStyle]="{
-            height:
-                tableData.length < maximumRowsWhichCanBeRenderedWithoutScroll
-                    ? 'calc(' +
-                      ((gtDimension.rowHeight + rowBorderWidth) * tableData.length +
-                          (!tableData.length || !gtGeneralConfig.totalRow
-                              ? gtDimension.headerHeight
-                              : gtDimension.headerHeight + gtDimension.rowHeight + (2 * rowBorderWidth))) +
-                      'px)'
-                    : gtDimension.tableHeight
-        }"
-    >
-        <table class="gt"  [ngClass]="tableClass" mat-table [appVirtualDataSource]="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) ||
-                    (!showSkeletonLoading && !gtGeneralConfig.totalRow)
-                "
-            ></tr>
-            <tr
-                [class]="rowData.gtClass"
-                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 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 == '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.sort">
-                                <anna-core-sort-lib
-                                    [sortBy]="header.sortObjectKey ? header.sortObjectKey : header.objectKey"
-                                    [data]="tableData"
-                                    [disableSort]="header.disableSort"
-                                    (sort)="sortedData($event)"
-                                >
-                                </anna-core-sort-lib>
-                            </ng-container>
-                            <ng-container *ngIf="header.filter === 'CHECKBOX'">
-                                <span
-                                    class="mdi mdi-filter"
-                                    [ngClass]="{
-                                        active:
-                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),
-                                        disabled: header.disableFilter
-                                    }"
-                                    [ngbTooltip]="filterTooltip"
-                                    placement="bottom left-top"
-                                    container="body"
-                                    [autoClose]="'outside'"
-                                    triggers="manual"
-                                    #t="ngbTooltip"
-                                    (click)="bindTheValueToToolTip(t, header.filterObjectKeys)"
-                                    (hidden)="closeTooltip()"
-                                >
-                                </span
-                                ><br />
-                            </ng-container>
-                            <ng-container *ngIf="header.filter === 'SLIDER'">
-                                <span
-                                    class="mdi mdi-filter"
-                                    [ngClass]="{
-                                        active:
-                                        annaFilterService.appliedFiltersArray.length && isTooltipActive(header.filterObjectKeys),
-                                        disabled: header.disableFilter
-                                    }"
-                                    [ngbTooltip]="sliderToolTip"
-                                    placement="bottom left-top"
-                                    container="body"
-                                    [autoClose]="'outside'"
-                                    triggers="manual"
-                                    #t1="ngbTooltip"
-                                    (click)="bindTheValueToToolTip(t1, header.filterObjectKeys)"
-                                    (hidden)="closeTooltip()"
-                                >
-                                </span
-                                ><br />
-                            </ng-container>
-                            <ng-container *ngIf="header.filter === 'DATE'">
-                                <span
-                                    class="mdi mdi-filter"
-                                    [ngClass]="{
-                                        active:
-                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),
-                                        disabled: header.disableFilter
-                                    }"
-                                    [ngbTooltip]="datePickerTooltip"
-                                    placement="left-top auto"
-                                    container="body"
-                                    [autoClose]="'outside'"
-                                    triggers="manual"
-                                    #t2="ngbTooltip"
-                                    (click)="bindTheValueToToolTip(t2, header.filterObjectKeys)"
-                                    (hidden)="closeTooltip()"
-                                >
-                                </span
-                                ><br />
-                            </ng-container>
-                            <ng-container *ngIf="header.filter === 'WEEK'">
-                                <span
-                                    class="mdi mdi-filter"
-                                    [ngClass]="{
-                                        active:
-                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),
-                                        disabled: header.disableFilter
-                                    }"
-                                    [ngbTooltip]="weekPickerToolTip"
-                                    placement="bottom left-top"
-                                    container="body"
-                                    [autoClose]="'outside'"
-                                    triggers="manual"
-                                    #t3="ngbTooltip"
-                                    (click)="bindTheValueToToolTip(t3, header.filterObjectKeys)"
-                                    (hidden)="closeTooltip()"
-                                >
-                                </span
-                                ><br />
-                            </ng-container>
-                            <ng-container *ngIf="header.filter === 'TIME'">
-                                <span
-                                    class="mdi mdi-filter"
-                                    [ngClass]="{
-                                        active:
-                                            isTooltipActive(header.filterObjectKeys) && isTooltipActive(header.filterObjectKeys),
-                                        disabled: header.disableFilter
-                                    }"
-                                    [ngbTooltip]="timeFilterToolTip"
-                                    placement="bottom left-top"
-                                    container="body"
-                                    [autoClose]="'outside'"
-                                    triggers="manual"
-                                    #t4="ngbTooltip"
-                                    (click)="bindTheValueToToolTip(t4, header.filterObjectKeys)"
-                                    (hidden)="closeTooltip()"
-                                >
-                                </span
-                                ><br />
-                            </ng-container>
-                            <ng-container *ngIf="header.filter === ''"> <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">
-                            <div *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'">
-                                        <ng-container *ngIf="gtGeneralConfig.component == 'ORDER_LISTING_INFLIGHT'">
-                                            <span
-                                                *ngIf="ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'"
-                                                class="cursor-not-allowed"
-                                                (click)="$event.stopPropagation()"
-                                            >
-                                                <anna-pay-for-performance-icon-template
-                                                    [color]="PfpIconActiveColor"
-                                                    [width]="'15px'"
-                                                    [height]="'15px'"
-                                                >
-                                                </anna-pay-for-performance-icon-template>
-                                            </span>
-                                            <span
-                                                *ngIf="ROW_DATA.orderStatus != 'LIVE' && !ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'"
-                                                (click)="svgIconClicked(ROW_DATA,'payForPerformance')"
-                                            >
-                                                <anna-pay-for-performance-icon-template
-                                                    [color]="PfpIconDisableColor"
-                                                    [width]="'15px'"
-                                                    [height]="'15px'"
-                                                >
-                                                </anna-pay-for-performance-icon-template>
-                                            </span>
-
-                                            <anna-live-icon-template *ngIf="ROW_DATA.orderStatus == 'LIVE' && subline.objectKey == 'orderStatus' "></anna-live-icon-template>
-                                        </ng-container>
-                                        <ng-container *ngIf="gtGeneralConfig.component == 'ORDER_LISTING_COMPLETED'">
-                                            <span *ngIf="ROW_DATA.payForPerformance && subline.objectKey == 'payForPerformance'" (click)="$event.stopPropagation()">
-                                                <anna-pay-for-performance-icon-template
-                                                    [color]="PfpIconActiveColor"
-                                                    [width]="'20px'"
-                                                    [height]="'20px'"
-                                                >
-                                                </anna-pay-for-performance-icon-template>
-                                            </span>
-                                        </ng-container>
-                                        <ng-container *ngIf="subline.objectKey == 'bizRuleStatus'">
-                                            <anna-rejected-icon-template *ngIf="ROW_DATA.bizRuleStatus == 'REJECTED'"></anna-rejected-icon-template>
-                                            <anna-notify-icon-template *ngIf="ROW_DATA.bizRuleStatus == 'NOTIFY'"></anna-notify-icon-template>
-                                            <anna-buyer-approval-icon-template *ngIf="ROW_DATA.bizRuleStatus == 'AWAITING_APPROVAL'"></anna-buyer-approval-icon-template>
-                                        </ng-container>
-                                    </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'">
-                                            {{ ROW_DATA[columnDef.headerInfo[subLineIndex].objectKey] }}
-                                            <i
-                                                *ngIf="subline.objectKey == 'inventoryCode' && ROW_DATA['isSellerGroup'] && gtGeneralConfig.component == 'RATING' "
-                                                class="mdi mdi-alert-circle-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>
-                                        </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>
-                    </td>
-                </ng-container>
-            </ng-container>
-        </table>
-    </anna-table-virtual-scroll-viewport>
-
-    <anna-core-no-data-lib [width]="noDataWidth" *ngIf="!showSkeletonLoading && tableData.length == 0"> </anna-core-no-data-lib>
-</div>
-
-<!-- Checkbox template -->
-<ng-template #filterTooltip>
-    <div class="radio-container" *ngIf="showCheckboxFilterRadioButtons">
-        <div *ngFor="let data of radioButtons">
-            <input
-                type="radio"
-                id="{{ data.key }}"
-                [ngModel]="annaFilterService.selectedRadio"
-                name="toolTip"
-                value="{{ data.key }}"
-                (click)="populateTooltipDataBasedOnSelectedRadio(data.key)" *ngIf="radioButtons.length > 1"
-            />
-            <label for="{{ data.key }}">{{ data.label }}</label>
-        </div>
-    </div>
-    <button class="column-clear-all" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">Clear filter</button>
-    <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)]="searchBar"
-        />
-    </p>
-    <div class="dropdown-data-container">
-        <ng-container *ngIf="showAll">
-            <p class="input" (click)="allOptionClicked()">
-                <span *ngIf="allSelected == 1" role="button" class="mi mdi-check-box check-box"></span>
-                <span *ngIf="allSelected == 0" role="button" class="mi mdi-check-box-outline-blank check-box unchecked"></span>
-                <span *ngIf="allSelected == 2" role="button" class="mi mdi-indeterminate-check-box check-box"></span>
-                <span class="data">All</span>
-            </p>
-        </ng-container>
-        <ng-container *ngFor="let data of tempTooltipData | AnnafilterSearchedText: searchBar">
-            <p *ngIf="!data.isHidden" class="input" (click)="isCheckboxSelected(data)">
-                <span *ngIf="data.isSelected" role="button" class="mi mdi-check-box check-box"></span>
-                <span *ngIf="!data.isSelected" role="button" class="mi mdi-check-box-outline-blank check-box unchecked"></span>
-                <span class="data" title="{{ data.data }}">{{ data.data }}</span>
-            </p>
-        </ng-container>
-    </div>
-    <div class="buttons-container">
-        <button class="button" (click)="closeCheckboxFilter()">Cancel</button>
-        <button
-            class="button"
-            [ngClass]="{ disabled: disableCheckboxApply }"
-            (click)="applyFilters()"
-            [disabled]="disableCheckboxApply"
-        >
-            Apply
-        </button>
-    </div>
-</ng-template>
-
-<!-- Slider template -->
-<ng-template #sliderToolTip>
-    <div class="radio-container" *ngIf="gtGeneralConfig.component == 'DRRLISTING'">
-        <div *ngFor="let data of radioButtons">
-          <input type="radio" id="{{data.key}}" [ngModel]="annaFilterService.selectedRadio" name="toolTip" value="{{data.key}}"
-            (click)="populateTooltipDataBasedOnSelectedRadio(data.key)" *ngIf="radioButtons.length > 1">
-          <label for="{{data.key}}">{{data.label}}</label>
-        </div>
-      </div>
-    <button class="column-clear-all align-center" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">
-        Clear filter
-    </button>
-    <section class="min-maxContainer">
-        <input
-            type="number"
-            step="{{ sliderFilterTextBoxStep }}"
-            [ngModel]="sliderMinValue"
-            (ngModelChange)="minValueChanged($event)"
-            placeholder="Min"
-        />
-        <span>To</span>
-        <input
-            type="number"
-            step="{{ sliderFilterTextBoxStep }}"
-            [ngModel]="sliderMaxValue"
-            (ngModelChange)="maxValueChanged($event)"
-            placeholder="Max"
-        />
-    </section>
-    <div class="sidebar-slider">
-        <ngx-slider
-            [(value)]="sliderMinValue"
-            [(highValue)]="sliderMaxValue"
-            [options]="options"
-            (valueChange)="sliderValueChange()"
-            (highValueChange)="sliderValueChange()"
-        ></ngx-slider>
-    </div>
-    <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="gtGeneralConfig.component == 'DRRLISTING'">
-        <div *ngFor="let data of radioButtons">
-          <input type="radio" id="{{data.key}}" [ngModel]="annaFilterService.selectedRadio" name="toolTip" value="{{data.key}}"
-            (click)="populateTooltipDataBasedOnSelectedRadio(data.key)" *ngIf="radioButtons.length > 1">
-          <label for="{{data.key}}">{{data.label}}</label>
-        </div>
-      </div>
-    <div class="datepicker-container">
-        <button class="column-clear-all align-center" [disabled]="disableColumnClearAllBtn" (click)="clearColumnFilter()">
-            Clear filter
-        </button>
-        <anna-core-calendar-filter-lib
-            [minDate]="calendarMinEnabledDate"
-            [maxDate]="calendarMaxEnabledDate"
-            [selectedFromDate]="selectedMinDate"
-            [selectedToDate]="selectedMaxDate"
-            (apply)="applyDateFilter($event)"
-            (cancel)="cancelInDateFilter()"
-        >
-        </anna-core-calendar-filter-lib>
-    </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="gtGeneralConfig.component != 'RATING'">
-        <div *ngFor="let data of radioButtons">
-            <input
-                type="radio"
-                id="{{ data.key }}"
-                [ngModel]="annaFilterService.selectedRadio"
-                name="toolTip"
-                value="{{ data.key }}"
-                (click)="populateTooltipDataBasedOnSelectedRadio(data.key)"
-                *ngIf="radioButtons.length > 1"
-            />
-            <label for="{{ data.key }}">{{ data.label }}</label>
-        </div>
-    </div>
-    <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" [(ngModel)]="selectedFromTime[0]" disabled type="text" />
-        <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" [(ngModel)]="selectedFromTime[1]" type="text" disabled />
-        <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]" disabled 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" [(ngModel)]="selectedToTime[1]" disabled 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>
-    <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 #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>