cats-data-grid 2.0.65 → 2.0.66

package/fesm2022/cats-data-grid.mjs

@@ -3,7 +3,7 @@ import { Injectable, Pipe, EventEmitter, Output, Directive, Input, HostListener,
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 class CatsDataGridService {
     constructor() { }
@@ -930,6 +930,8 @@ class CatsDataGridComponent {
     onScrollEmitter = new EventEmitter();
     filter = new EventEmitter();
     onHideSettings = new EventEmitter();
+    onCellEdit = new EventEmitter();
+    onColCongifgChange = new EventEmitter();
     activeFilterIndex = null;
     originalRowData = [];
     activeAll = true;
@@ -1005,6 +1007,20 @@ class CatsDataGridComponent {
     isRowSelected = false;
     onRowClicked = new EventEmitter();
     onCellClicked = new EventEmitter();
+    isCellDblClicked = {};
+    cellClickedCtrl = new FormControl('');
+    previousId = '';
+    editingRow = null;
+    editingField = '';
+    clickTimer = null;
+    clickDelay = 200;
+    cellClickedColumn;
+    enterPressed = false;
+    leftPinned = [];
+    rightPinned = [];
+    centerArea = [];
+    groupingDisabled = false;
+    draggableColumn;
     constructor(renderer, zone, cd) {
         this.renderer = renderer;
         this.zone = zone;
@@ -1018,14 +1034,18 @@ class CatsDataGridComponent {
     ngOnChanges(changes) {
         if (changes['pageNumber']?.currentValue) {
             this.pageDetails.currentPage = changes['pageNumber']?.currentValue;
-            this.recordsToShow.min = (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
-            this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
+            this.recordsToShow.min =
+                (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
+            this.recordsToShow.max =
+                this.pageDetails.currentPage * this.pageDetails.pageSize;
             this.clearAllFilter();
         }
         if (changes['pageSize']?.currentValue) {
             this.pageDetails.pageSize = changes['pageSize']?.currentValue;
-            this.recordsToShow.min = (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
-            this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
+            this.recordsToShow.min =
+                (this.pageDetails.currentPage - 1) * this.pageDetails.pageSize;
+            this.recordsToShow.max =
+                this.pageDetails.currentPage * this.pageDetails.pageSize;
         }
         if (changes['colDefs']?.currentValue) {
             // this.resetPagination();
@@ -1034,6 +1054,13 @@ class CatsDataGridComponent {
                 this.applyAllFilters();
             });
             this.originalColDefs = [...this.colDefs];
+            this.centerArea = [...this.colDefs];
+            [...this.colDefs].forEach((col) => {
+                if (col.pin) {
+                    const index = this.colDefs.findIndex((c) => c.colId === col.colId);
+                    this.pinColumn(this.colDefs[index], index, col.pin);
+                }
+            });
         }
         if (changes['totalRecords']?.currentValue && this.resetPage) {
             this.resetPagination();
@@ -1106,14 +1133,27 @@ class CatsDataGridComponent {
             return col;
         });
         this.activeAll = this.colDefs.every((dt) => dt.active);
+        this.getActiveCols();
         this.atLeastOneColumnChecked = this.colDefs.some((dt) => dt.active);
     }
     changeActiveColSelection(event, col) {
         col.active = !col.active;
         this.atLeastOneColumnChecked = this.originalColDefs.some((dt) => dt.active);
+        this.getActiveCols();
         // Update activeAll state
         this.activeAll = this.originalColDefs.every((dt) => dt.active);
     }
+    getActiveCols() {
+        const activeCols = this.colDefs
+            .filter((col) => col.active)
+            .map((c) => {
+            if (c.fieldName.includes('.')) {
+                c.fieldName = c.fieldName.split('.')[0];
+            }
+            return c.fieldName;
+        });
+        this.onColCongifgChange.emit(activeCols);
+    }
     /**
      * @description Prepares and normalizes column definitions for filtering and menu behavior
      * @author Anand Pandey
@@ -1746,25 +1786,63 @@ class CatsDataGridComponent {
      * @param {number} index - The index of column from table on clicking pin or unpin from three dots menu.
      * @returns {void}
      */
+    // pinColumn(col: any, index: number, direction: string) {
+    //   this.pinActionClicked[col.colId] = direction;
+    //   if (col.pin) {
+    //     col.pin = direction;
+    //   }
+    //   col.leftPinned = direction === 'left';
+    //   col.rightPinned = direction === 'right';
+    //   if (col.leftPinned) {
+    //     this.colDefs.splice(index, 1);
+    //     this.colDefs = [col, ...this.colDefs];
+    //   } else if (col.rightPinned) {
+    //     this.colDefs.splice(index, 1);
+    //     this.colDefs.splice(this.colDefs.length - 1, 0, col);
+    //   } else {
+    //     const indx = this.originalColDefs.findIndex(
+    //       (dt) => dt.fieldName === col.fieldName,
+    //     );
+    //     if (index >= 0) {
+    //       this.colDefs.splice(index, 1);
+    //       this.colDefs.splice(indx, 0, col);
+    //     }
+    //   }
+    //   this.updatePinnedOffsets();
+    //   this.onClickOutside();
+    // }
     pinColumn(col, index, direction) {
         this.pinActionClicked[col.colId] = direction;
+        if (col.pin) {
+            col.pin = direction;
+        }
+        this.leftPinned = this.leftPinned.filter((c) => c.colId !== col.colId);
+        this.rightPinned = this.rightPinned.filter((c) => c.colId !== col.colId);
+        if (col.fieldName !== 'action') {
+            this.centerArea = this.centerArea.filter((c) => c.colId !== col.colId);
+        }
         col.leftPinned = direction === 'left';
         col.rightPinned = direction === 'right';
         if (col.leftPinned) {
-            this.colDefs.splice(index, 1);
-            this.colDefs = [col, ...this.colDefs];
+            this.leftPinned.push(col);
         }
         else if (col.rightPinned) {
-            this.colDefs.splice(index, 1);
-            this.colDefs.splice(this.colDefs.length - 1, 0, col);
+            this.rightPinned.unshift(col);
         }
         else {
-            const indx = this.originalColDefs.findIndex((dt) => dt.fieldName === col.fieldName);
+            const indx = this.centerArea.findIndex((dt) => dt.fieldName === col.fieldName);
             if (index >= 0) {
-                this.colDefs.splice(index, 1);
-                this.colDefs.splice(indx, 0, col);
+                this.centerArea.splice(indx, 0, col);
             }
         }
+        const fixedCols = this.centerArea.filter((c) => c.fieldName === 'action');
+        const movableCols = this.centerArea.filter((c) => c.fieldName !== 'action');
+        this.colDefs = [
+            ...this.leftPinned,
+            ...movableCols,
+            ...this.rightPinned,
+            ...fixedCols,
+        ];
         this.updatePinnedOffsets();
         this.onClickOutside();
     }
@@ -2128,7 +2206,7 @@ class CatsDataGridComponent {
      * @param {event object, index}
      * @returns {void}
      */
-    onDragStart(event, index) {
+    onDragStart(event, index, col) {
         this.dragGroupIndex = null;
         const target = event.target;
         if (this.isResizing) {
@@ -2140,6 +2218,7 @@ class CatsDataGridComponent {
         event.dataTransfer?.setData('text/plain', index.toString());
         // For group panel
         event.dataTransfer?.setData('columnIndex', index.toString());
+        this.draggableColumn = col;
         const th = target.closest('th');
         if (!th)
             return;
@@ -2226,6 +2305,12 @@ class CatsDataGridComponent {
      */
     onGroupDragOver(event) {
         event.preventDefault();
+        this.groupingDisabled = this.draggableColumn?.disableGrouping ?? false;
+        if (this.groupingDisabled) {
+            event.dataTransfer.dropEffect = 'none';
+            this.groupingDisabled = false;
+            return;
+        }
     }
     /**
      * @description Handles drag over on a group tag and updates the target index for reordering.
@@ -2247,6 +2332,9 @@ class CatsDataGridComponent {
      */
     onGroupDrop(event) {
         const colIndex = Number(event.dataTransfer?.getData('columnIndex'));
+        const col = this.colDefs[colIndex];
+        if (col.disableGrouping)
+            return;
         const groupIndex = Number(event.dataTransfer?.getData('groupIndex'));
         const target = event.target;
         const isOverGroupPanel = target.closest('.group-tag');
@@ -2287,6 +2375,8 @@ class CatsDataGridComponent {
      * @returns {void}
      */
     groupByColumnAction(col, index) {
+        if (col.disableGrouping)
+            return;
         this.activeGroups.push(col);
         this.groupBy.push(col.fieldName);
         this.colDefs.splice(index, 1);
@@ -2442,8 +2532,11 @@ class CatsDataGridComponent {
     }
     onBtLastClick() {
         this.pageDetails.currentPage = this.pageDetails.totalPages;
-        this.recordsToShow.max = this.pageDetails.currentPage * this.pageDetails.pageSize;
-        this.recordsToShow.min = this.pageDetails.currentPage * this.pageDetails.pageSize - this.pageDetails.pageSize;
+        this.recordsToShow.max =
+            this.pageDetails.currentPage * this.pageDetails.pageSize;
+        this.recordsToShow.min =
+            this.pageDetails.currentPage * this.pageDetails.pageSize -
+                this.pageDetails.pageSize;
         this.onPaginationChange.emit({
             page: this.pageDetails.currentPage - 1,
             pageSize: this.pageDetails.pageSize,
@@ -2453,23 +2546,90 @@ class CatsDataGridComponent {
         this.onRowClicked.emit({ row });
     }
     onCellClick(row, col) {
-        this.onCellClicked.emit({ row, col });
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+        }
+        this.clickTimer = setTimeout(() => {
+            this.onCellClicked.emit({ row, col });
+        }, this.clickDelay);
+    }
+    onCellDblClick(row, col) {
+        this.cellClickedColumn = col;
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+            this.clickTimer = null;
+        }
+        if (!col.editable)
+            return;
+        if (this.previousId) {
+            this.isCellDblClicked[this.previousId] = false;
+        }
+        const id = `${col.colId}-${row.rowId}`;
+        this.isCellDblClicked[id] = true;
+        let fieldName = col.fieldName;
+        const fieldValue = this.evaluateFieldValue(row, col.fieldName) || '';
+        this.editingRow = row;
+        this.editingField = fieldName;
+        this.cellClickedCtrl.setValue(fieldValue);
+        this.previousId = id;
+    }
+    onEnter() {
+        this.enterPressed = true;
+        this.onCellEditSave();
+    }
+    onBlur() {
+        if (this.enterPressed) {
+            this.enterPressed = false;
+            return;
+        }
+        this.onCellEditSave();
+    }
+    onCellEditSave() {
+        if (this.editingRow && this.editingField) {
+            this.setFieldValue(this.editingRow, this.editingField, this.cellClickedCtrl.value);
+        }
+        this.onCellEdit.emit({
+            row: this.editingRow,
+            col: this.cellClickedColumn,
+            changedValue: this.cellClickedCtrl.value,
+        });
+        if (this.previousId) {
+            this.isCellDblClicked[this.previousId] = false;
+        }
+        this.editingRow = null;
+        this.editingField = '';
+    }
+    setFieldValue(row, field, value) {
+        if (field.includes('.')) {
+            const parts = field.split('.');
+            let obj = row;
+            for (let i = 0; i < parts.length - 1; i++) {
+                obj = obj?.[parts[i]];
+                if (!obj)
+                    return;
+            }
+            obj[parts[parts.length - 1]] = value;
+        }
+        else {
+            row[field] = value;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\" #table>\n  @if (settingsRequired && settingsClicked) {\n    <div\n      class=\"setting_options\"\n      appOutsideClick\n      (clickOutside)=\"hideSettings()\"\n    >\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of colDefs; track col.colId) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n              [disabled]=\"col.headerLocked\"\n            />\n            <span>{{ col.headerName | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (groupByRequired) {\n    <!-- Group Panel -->\n    <div\n      class=\"group_panel\"\n      (dragover)=\"onGroupDragOver($event)\"\n      (drop)=\"onGroupDrop($event)\"\n    >\n      <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n      @for (g of activeGroups; track $index) {\n        <div\n          class=\"group_tag\"\n          draggable=\"true\"\n          (dragstart)=\"onGroupDragStart($event, $index)\"\n          (dragover)=\"onActiveDragOver($event, $index)\"\n          (drop)=\"onActiveGroupDrop($event, $index)\"\n        >\n          <img src=\"images/t-gripper.svg\" alt=\"\" />\n          <span>{{ g.headerName }}</span>\n          <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n            <img src=\"images/t-x.svg\" alt=\"\" />\n          </button>\n        </div>\n        <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n      }\n      @if (activeGroups.length === 0) {\n        <div class=\"group_placeholder\">Drag here to set row groups</div>\n      }\n    </div>\n  }\n  @if (activeFilters.size > 0) {\n    <div class=\"active_filters_container\">\n      <div class=\"tag_wrapper\">\n        @for (filter of appliedFilters; track filter.fieldName) {\n          @if(filter.filters?.length) {\n            <div class=\"active_filter_tag\">\n            <div class=\"active_filter_label ellipsis\">\n              @for (item of filter.filters; track $index) {\n                @if (item.filterValue) {\n                  @if ($index > 0 && item.filterValue) {\n                    <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\n                  }\n                  <span class=\"filter_field\">{{ filter.fieldName.split('.')[0] }}:</span>\n                  <span class=\"\"> {{ (item.filterOperation  == '=' || item.filterOperation == 'equals') ? ':' : item.filterOperation }}</span>\n                  <span class=\"filter_value\">{{ item.filterValue }}</span>\n                }\n              }\n            </div>\n            <button\n              class=\"remove_filter_btn\"\n              (click)=\"removeActiveFilter(filter)\"\n            >\n              <img src=\"images/t-x.svg\" alt=\"\" />\n            </button>\n          </div>\n          }          \n        }\n      </div>\n      <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n    </div>\n  }\n  <div\n    class=\"table_wrapper global\"\n    id=\"table_scroll\"\n    #parent\n    (scroll)=\"infinityScroll($event)\"\n    [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n    [class.no-horizontal-scroll]=\"\n      (!rowData || rowData.length === 0) &&\n      (!groupedResult || groupedResult.length === 0)\n    \"\n  >\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\">\n        <thead class=\"sticky-top\">\n          <tr>\n            @if (\n              checkBoxSelection &&\n              checkboxSelectionType == \"multiple\" &&\n              atLeastOneColumnChecked\n            ) {\n              <th style=\"min-width: 50px; width: 50px\">\n                <div class=\"th_wraper\">\n                  <span class=\"checkbox_container\"\n                    ><input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      name=\"\"\n                      id=\"\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkInterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                  /></span>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            }\n            @else{\n              @if(checkBoxSelection && checkboxSelectionType == \"single\") {\n                <th style=\"min-width: 50px; width: 50px\"></th>\n              }\n          } \n            @if (activeGroups.length > 0) {\n              <th class=\"active_group\">\n                <div class=\"th_wraper\">\n                  <div class=\"text_wrapper\">\n                    <span class=\"ellipsis headerName\">Group</span>\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <div class=\"three-dots\">\n                      <img src=\"images/t-more-vertical.svg\" />\n                    </div>\n                  </div>\n                </div>\n              </th>\n            }\n            @for (col of colDefs; track col.colId) {\n              @if (col.active) {\n                <th\n                  [ngStyle]=\"getStyle(col, 'action')\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === $index,\n                    pinned_column: col.leftPinned || col.rightPinned,\n                  }\"\n                  (dragover)=\"onDragOver($event, $index)\"\n                  (drop)=\"onDrop($event, $index)\"\n                  (mouseenter)=\"onMouseEnterHeader($index)\"\n                  (mouseleave)=\"onMouseLeaveHeader($index)\"\n                >\n                  <div class=\"th_wraper\">\n                    <div\n                      class=\"text_wrapper\"\n                      [ngStyle]=\"getStyle(col, 'action')\"\n                      (click)=\"onSortingRowData($index, col)\"\n                    >\n                      @if (showMoveIcon[$index] && !col.isAction) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing || columnDraggable[$index]\"\n                          (dragstart)=\"onDragStart($event, $index)\"\n                          (dragend)=\"onDragEnd()\"\n                          (mouseenter)=\"enableColumnDrag($event, $index)\"\n                          (mouseleave)=\"disableColumnDrag($event, $index)\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{\n                        col?.headerName\n                      }}</span>\n\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex == $index &&\n                        col?.sortable &&\n                        !col.isAction\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[$index] === \"asc\") {\n                            <img\n                              src=\"images/t-arrow-up.svg\"\n                              class=\"sorting_up\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (sortingType[$index] === \"dsc\") {\n                            <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n                            <img\n                              src=\"images/t-arrow-down.svg\"\n                              class=\"sorting_down\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Column Filters Logic-->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          #trigger\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, $index, $event)\"\n                        >\n                          @if (activeFilters.has(col.fieldName)) {\n                            <img\n                              src=\"images/t-filter-applied.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          } @else {\n                            <img\n                              src=\"images/t-filter.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (activeFilterIndex === $index) {\n                            <div class=\"filt_wrap\">\n                              <div\n                                adaptivePosition\n                                [trigger]=\"trigger\"\n                                [parentContainer]=\"parent\"\n                                [matchWidth]=\"false\"\n                                class=\"filter_wrapper\"\n                                id=\"filter_wrapper-{{ $index }}\"\n                                (click)=\"$event.stopPropagation()\"\n                                appOutsideClick\n                                (clickOutside)=\"onClickOutside()\"\n                              >\n                                <!-- Text Filter -->\n                                @if (col.filterType === \"text\") {\n                                  <lib-common-input\n                                    [options]=\"filterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"filterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                  }\n                                }\n\n                                <!-- Number Filter -->\n                                @if (col.filterType === \"number\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"number\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (input)=\"applyAllFilters()\"\n                       /> -->\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"number\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (input)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n                                  }\n                                }\n\n                                <!-- DATE FILTER -->\n                                @if (col.filterType === \"date\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"date\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (change)=\"applyAllFilters()\"\n                       /> -->\n                                  <lib-common-calendar\n                                    [dateConfig]=\"dateConfig\"\n                                    [(ngModel)]=\"col.filters[0].filterValue\"\n                                    [preSelectedValue]=\"\n                                      col.filters[0].filterValue\n                                    \"\n                                    (dateTimeSelected)=\"\n                                      dateTimeSelected($event)\n                                    \"\n                                  ></lib-common-calendar>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <lib-common-calendar\n                                      [dateConfig]=\"dateConfig\"\n                                      [(ngModel)]=\"col.filters[1].filterValue\"\n                                      [preSelectedValue]=\"\n                                        col.filters[1].filterValue\n                                      \"\n                                      (dateTimeSelected)=\"\n                                        dateTimeSelected($event)\n                                      \"\n                                    ></lib-common-calendar>\n                                  }\n                                }\n\n                                <!-- SET FILTER (CHECKBOX LIST) -->\n                                @if (col.filterType === \"set\") {\n                                  <!-- <input\n                         type=\"text\"\n                         placeholder=\"Search...\"\n                         (input)=\"filterSetOptions(col, $event)\"\n                       /> -->\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Search...\"\n                                      (input)=\"filterSetOptions(col, $event)\"\n                                    />\n                                  </div>\n\n                                  <div class=\"set_option_details\">\n                                    <label class=\"checkbox_container\">\n                                      <input\n                                        class=\"custom_check_box\"\n                                        type=\"checkbox\"\n                                        [checked]=\"isAllSelected(col)\"\n                                        (change)=\"toggleSelectAll(col, $event)\"\n                                      />\n                                      (Select All)\n                                    </label>\n                                    <div class=\"set_options\" id=\"table_scroll\">\n                                      @for (\n                                        opt of col.filteredOptions;\n                                        track $index\n                                      ) {\n                                        <label class=\"checkbox_container\">\n                                          <input\n                                            class=\"custom_check_box\"\n                                            type=\"checkbox\"\n                                            [checked]=\"\n                                              col.selectedValues.has(opt)\n                                            \"\n                                            (change)=\"\n                                              toggleSetOption(col, opt, $event)\n                                            \"\n                                          />\n                                          {{ opt }}\n                                        </label>\n                                      }\n                                    </div>\n                                  </div>\n                                }\n                                <div class=\"filter_btn\">\n                                  <button\n                                    class=\"reset_btn\"\n                                    type=\"button\"\n                                    (click)=\"resetFilter(col)\"\n                                  >\n                                    Reset\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired && col.columnAction) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, $index)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n                      @if (!col.isAction) {\n                        <span\n                          class=\"resize-handle\"\n                          (mousedown)=\"startResize($event, $index)\"\n                        >\n                          |\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- popup open -->\n                  @if (menuVisible[$index]) {\n                    <div\n                      #colActionMenu\n                      class=\"dropdown_wrapper\"\n                      adaptivePosition\n                      [trigger]=\"triggerColMenu\"\n                      [parentContainer]=\"parent\"\n                      [matchWidth]=\"false\"\n                      [isColumnActionMenu]=\"true\"\n                      (click)=\"$event.stopPropagation()\"\n                      appOutsideClick\n                      (clickOutside)=\"onClickOutside()\"\n                    >\n                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n                        @if (\n                          sortingType[$index] === \"dsc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'asc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img\n                                src=\"images/arrow-up.svg\"\n                                class=\"sorting_up\"\n                                [ngClass]=\"{ disable: !col.sortable }\"\n                              />\n                              <span class=\"text\">Sort Ascending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'dsc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/arrow-down.svg\" />\n                              <span class=\"text\">Sort Descending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"dsc\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, '', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/trash-2.svg\" />\n                              <span class=\"text\">Clear Sort</span>\n                            </div>\n                          </div>\n                        }\n                        <div class=\"divder\"></div>\n\n                        <div\n                          class=\"right_click_item\"\n                          (mouseenter)=\"showPinActions($event)\"\n                          (mouseleave)=\"hidePinActions()\"\n                        >\n                          <div class=\"left_item\">\n                            <img src=\"images/pin.svg\" />\n                            <span class=\"text\">Pin Column</span>\n                          </div>\n                          <div class=\"right_item\">\n                            <img src=\"images/chevron-right.svg\" />\n                            @if (showPin) {\n                              <div class=\"second_dropdown\" #pinMenu>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'none')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      (pinActionClicked[col.colId] ??\n                                        \"none\") === \"none\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">No Pin</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'left')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"left\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Left</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'right')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"right\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Right</span>\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'left')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">{{\n                           col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n                         }}</span>\n                       </div>\n                     </div>\n                     <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'right')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">\n                           {{\n                             col.rightPinned\n                               ? \"Unpin Right Column\"\n                               : \"Pin Column Right\"\n                           }}\n                         </span>\n                       </div>\n                       <div class=\"right_item\">\n                         <img src=\"images/arrow-right.svg\" alt=\"\" />\n                       </div>\n                     </div> -->\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize This Column</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize All Columns</span>\n                          </div>\n                        </div>\n                        <div\n                          class=\"right_click_item\"\n                          [ngClass]=\"{ disabled_option: !groupByRequired }\"\n                        >\n                          <div\n                            class=\"left_item\"\n                            (click)=\"groupByColumnAction(col, $index)\"\n                          >\n                            <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n                            <span class=\"text\"\n                              >Group by {{ col.headerName }}</span\n                            >\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"images/t-choose-column.svg\" alt=\"\" />\n                            <span class=\"text\">Choose Columns</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Reset Columns</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (groupedResult && groupedResult.length > 0) {\n            @for (group of groupedResult; track group.key) {\n              <tr (click)=\"toggleGroup(group)\">\n                <td\n                  class=\"group-cell\"\n                  [attr.colspan]=\"\n                    colDefs.length +\n                    (checkBoxSelection ? 1 : 0) +\n                    (activeGroups.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <span class=\"group-toggle\">\n                    <img\n                      src=\"images/{{\n                        group.expanded\n                          ? 'chevron-down.svg'\n                          : 'chevron-right.svg'\n                      }}\"\n                    />\n                    {{ group.key }} ({{ group.children.length }})\n                  </span>\n                </td>\n              </tr>\n\n              @if (group.expanded) {\n                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n                @if (group.children[0]?.children) {\n                  @for (child of group.children; track child.key) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: child,\n                        colDefs: colDefs,\n                        checkBoxSelection: checkBoxSelection,\n                        activeGroups: activeGroups,\n                        level: 1,\n                      }\"\n                    ></ng-container>\n                  }\n                }\n\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n                @if (!group.children[0]?.children) {\n                  @for (row of group.children; track row.rowId) {\n                    <tr [ngClass]=\"row | addClass: tableOptions\">\n                      <!-- Checkbox column if any -->\n                      @if (checkBoxSelection) {\n                        <td>\n                          <span class=\"checkbox_container\">\n                            <input\n                              class=\"custom_check_box\"\n                              type=\"checkbox\"\n                              [checked]=\"row.isSelected\"\n                          /></span>\n                        </td>\n                      }\n                      @if (activeGroups.length > 0) {\n                        <td class=\"group-placeholder\"></td>\n                      }\n\n                      <!-- Render columns -->\n                      @for (col of colDefs; track col.colId) {\n                        <td\n                          [ngStyle]=\"getStyle(col)\"\n                          [ngClass]=\"[\n                            col?.addClass ? col.addClass(row) : '',\n                            col.leftPinned || col.rightPinned\n                              ? 'pinned_column'\n                              : '',\n                          ]\"\n                        >\n                          <!-- {{ row[col.fieldName] }} -->\n                          @if (!col?.cellRenderer) {\n                            <div class=\"cell-value ellipsis\">\n                              <div\n                                class=\"more_data_wrapper\"\n                                [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                              >\n                                {{ parseColValue(row, col) }}\n                              </div>\n                              <div class=\"see_more_data\" id=\"table_scroll\">\n                                <div class=\"item\">\n                                  <span class=\"desc\">\n                                    {{ parseColValue(row, col) }}</span\n                                  >\n                                </div>\n                              </div>\n                            </div>\n                          } @else {\n                            <div\n                              [rowParam]=\"row\"\n                              [col]=\"col\"\n                              [api]=\"tableOptions\"\n                              [currentValue]=\"row[col.fieldName]\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              }\n            }\n          } @else {\n            @for (data of rowData; track data.rowId) {\n              <tr\n                [ngClass]=\"data | addClass: tableOptions\"\n                (dragover)=\"allowRowDrop($event)\"\n                (drop)=\"dropRow(data)\"\n                (click)=\"onRowClick(data)\"\n              >\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px\">\n                    @if (checkboxSelectionType == \"multiple\") {\n                      <span class=\"checkbox_container\"\n                        ><input\n                          type=\"checkbox\"\n                          class=\"pointer custom_check_box\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [disabled]=\"data.isLocked\"\n                          [checked]=\"data.isSelected || data.isLocked\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                      /></span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [checked]=\"data?.isSelected\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                        />\n                        <label [for]=\"data.rowId\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n                @for (col of colDefs; track col.colId) {\n                  @if (col.active) {\n                    <td (click)=\"onCellClick(data, col)\"\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col?.addClass ? col.addClass(data) : '',\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      <div class=\"col_wrapper\">\n                        @if (\n                          rowGripFieldName &&\n                          rowGripFieldName === col?.fieldName\n                        ) {\n                          <div\n                            [draggable]=\"true\"\n                            (dragstart)=\"dragRow($event, data)\"\n                            class=\"gripper\"\n                          >\n                            <img class=\"gripper-img\" src=\"images/gripper.svg\" />\n                          </div>\n                        }\n\n                        @if (!col?.cellRenderer) {\n                          <div class=\"cell-value ellipsis\">\n                            <div\n                              class=\"more_data_wrapper\"\n                              [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                            >\n                              {{ parseColValue(data, col) }}\n                            </div>\n                            <div class=\"see_more_data\" id=\"table_scroll\">\n                              <div class=\"item\">\n                                <span class=\"desc\">\n                                  {{ parseColValue(data, col) }}</span\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"data\"\n                            [col]=\"col\"\n                            [api]=\"tableOptions\"\n                            [currentValue]=\"data[col.fieldName]\"\n                            appRendererParser\n                          ></div>\n                        }\n                      </div>\n                      <!-- Commented for later use -->\n                      <!-- <div class=\"tool_tip\">\n                <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n              </div> -->\n                    </td>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tbody>\n\n        <ng-template\n          #groupTemplate\n          let-node\n          let-colDefs=\"colDefs\"\n          let-checkBoxSelection=\"checkBoxSelection\"\n          let-activeGroups=\"activeGroups\"\n          let-level=\"level\"\n        >\n          <!-- GROUP HEADER -->\n          <tr (click)=\"toggleGroup(node)\">\n            <td\n              [attr.colspan]=\"\n                colDefs.length +\n                (checkBoxSelection ? 1 : 0) +\n                (activeGroups.length > 0 ? 1 : 0)\n              \"\n              [style.paddingLeft.px]=\"level * 20\"\n              class=\"group-cell\"\n            >\n              <span class=\"group-toggle\">\n                <img\n                  src=\"images/{{\n                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n                  }}\"\n                />\n                {{ node.key }} ({{ node.children.length }})\n              </span>\n            </td>\n          </tr>\n\n          <!-- CHILDREN -->\n          @if (node.expanded) {\n            <!-- CASE: more groups -->\n            @if (node.children[0]?.children) {\n              @for (child of node.children; track child.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"groupTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: child,\n                    colDefs: colDefs,\n                    checkBoxSelection: checkBoxSelection,\n                    activeGroups: activeGroups,\n                    level: level + 1,\n                  }\"\n                >\n                </ng-container>\n              }\n            }\n\n            <!-- CASE: final rows -->\n            @if (!node.children[0]?.children) {\n              @for (row of node.children; track row.rowId) {\n                <tr [ngClass]=\"row | addClass: tableOptions\">\n                  <!-- Checkbox column if any -->\n                  @if (checkBoxSelection) {\n                    <td>\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox custom_check_box\"\n                          [checked]=\"row.isSelected\"\n                      /></span>\n                    </td>\n                  }\n                  @if (activeGroups.length > 0) {\n                    <td class=\"group-placeholder\"></td>\n                  }\n\n                  <!-- Render columns -->\n                  @for (col of colDefs; track col.colId) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                    >\n                      <!-- {{ row[col.fieldName] }} -->\n                      @if (!col?.cellRenderer) {\n                        <div class=\"cell-value ellipsis\">\n                          <div\n                            class=\"more_data_wrapper\"\n                            [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                          >\n                            {{ parseColValue(row, col) }}\n                          </div>\n                          <div class=\"see_more_data\" id=\"table_scroll\">\n                            <div class=\"item\">\n                              <span class=\"desc\">\n                                {{ parseColValue(row, col) }}</span\n                              >\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <div\n                          [rowParam]=\"row\"\n                          [col]=\"col\"\n                          [api]=\"tableOptions\"\n                          [currentValue]=\"row[col.fieldName]\"\n                          appRendererParser\n                        ></div>\n                      }\n                    </td>\n                  }\n                </tr>\n              }\n            }\n          }\n        </ng-template>\n      </table>\n\n      @if (\n        (!rowData || rowData.length === 0) &&\n        (!groupedResult || groupedResult.length === 0)\n      ) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            @if (tableOptions?.noDataTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n              ></ng-container>\n            } @else {\n              <span>No Data To Show</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  <!--  Table Wrapper Ends-->\n  @if (paginationRequired) {\n    <div class=\"pagination_main\">\n      <div class=\"entries_details\">\n        <span>Showing</span>\n        <div class=\"pagination_select\">\n          <div\n            class=\"select_dropdown pointer\"\n            (click)=\"showPageSizeList = !showPageSizeList\"\n          >\n            <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n            <span class=\"chevron_img\">\n              <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n            </span>\n          </div>\n          @if (showPageSizeList) {\n            <div\n              class=\"select_option\"\n              appOutsideClick\n              (clickOutside)=\"onClickOutside()\"\n            >\n              @for (option of pageSizeList; track $index) {\n                <span\n                  class=\"pointer\"\n                  (click)=\"onPageSizeChanged(option); onClickOutside()\"\n                  >{{ option }}</span\n                >\n              }\n            </div>\n          }\n        </div>\n        <span\n          >Rows |\n          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n          {{\n            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n          }}\n          of\n          {{ totalRecords }} Entries</span\n        >\n      </div>\n      <div class=\"pagination_form\">\n        <!-- <span>Page</span> -->\n\n        <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n        </button>\n        <button\n          class=\"outlined_btn prev_btn\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n          type=\"button\"\n          (click)=\"onBtPrevClick()\"\n        >\n          <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n        </button>\n        <div>\n          <input\n            class=\"input_style\"\n            type=\"number\"\n            [(ngModel)]=\"pageDetails.currentPage\"\n            (change)=\"goToSelectedPage($event)\"\n            name=\"\"\n            id=\"\"\n          />\n        </div>\n        <button\n          class=\"outlined_btn next_btn\"\n          type=\"button\"\n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n          (click)=\"onBtNextClick()\"\n        >\n          <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n        </button>\n        <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n        <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\"        \n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n        </button>\n      </div>\n    </div>\n  }\n  <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n  <div class=\"right_click_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/scissors.svg\" />\n        <span class=\"text\">Cut</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+X</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+C</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Group Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/clipboard.svg\" alt=\"\" />\n        <span class=\"text\">Paste</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+V</span>\n    </div>\n\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\n        <span class=\"text\">Chart</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/download.svg\" alt=\"\" />\n        <span class=\"text\">Export</span>\n      </div>\n\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Chart section Start Here -->\n  <div class=\"second_dropdown\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <span class=\"text\">Column</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Bar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Pie</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Line</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Area</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">XY(Scatter)</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Polar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stastical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Hierarchical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Specialized</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Funnel</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Combination</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Export Section start Here -->\n  <div class=\"export_section d-none\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">CSV Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">Excel Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Column Group Section Start Here -->\n  <div class=\"third_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Grouped</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stacked</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">100% Stacked</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0}.tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-500)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:nth-last-child(2) .second_dropdown,.tableArea .table_wrapper table thead th:nth-last-child(3) .second_dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{bottom:calc(2.1666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td .gripper{cursor:grab}.tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));width:inherit;max-width:-webkit-fill-available}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:0;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0;border-bottom:0}.active_filters_container .tag_wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 10.8333333333rem / var(--scale));overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.active_filters_container .tag_wrapper .active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .tag_wrapper .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.active_filters_container .clear_all{font-size:var(--fs-16);line-height:calc(1.5rem / var(--scale));font-weight:500;color:var(--blue-600);cursor:pointer}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--blue-100)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .pagination_form .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-left:0;border-right:0;border-bottom:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--blue-100);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting_options{position:absolute;background:var(--white);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.setting_options .column_header{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;height:calc(2.5rem / var(--scale));color:var(--neutral-600)}.setting_options .item_container{max-height:calc(16.6666666667rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale))}.setting_options .item_container .column_item{color:var(--neutral-600);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", onCellEdit: "onCellEdit", onColCongifgChange: "onColCongifgChange", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\" #table>\n  @if (settingsRequired && settingsClicked) {\n    <div\n      class=\"setting_options\"\n      appOutsideClick\n      (clickOutside)=\"hideSettings()\"\n    >\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of colDefs; track col.colId) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n              [disabled]=\"col.headerLocked\"\n            />\n            <span>{{ col.headerName | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (groupByRequired) {\n    <!-- Group Panel -->\n    <div\n      class=\"group_panel\"\n      [ngClass]=\"{ disable_group: groupingDisabled }\"\n      (dragover)=\"onGroupDragOver($event)\"\n      (drop)=\"onGroupDrop($event)\"\n    >\n      <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n      @for (g of activeGroups; track $index) {\n        <div\n          class=\"group_tag\"\n          draggable=\"true\"\n          (dragstart)=\"onGroupDragStart($event, $index)\"\n          (dragover)=\"onActiveDragOver($event, $index)\"\n          (drop)=\"onActiveGroupDrop($event, $index)\"\n        >\n          <img src=\"images/t-gripper.svg\" alt=\"\" />\n          <span>{{ g.headerName }}</span>\n          <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n            <img src=\"images/t-x.svg\" alt=\"\" />\n          </button>\n        </div>\n        <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n      }\n      @if (activeGroups.length === 0) {\n        <div class=\"group_placeholder\">Drag here to set row groups</div>\n      }\n    </div>\n  }\n  @if (activeFilters.size > 0) {\n    <div class=\"active_filters_container\">\n      <div class=\"tag_wrapper\">\n        @for (filter of appliedFilters; track filter.fieldName) {\n          @if (filter.filters?.length) {\n            <div class=\"active_filter_tag\">\n              <div class=\"active_filter_label ellipsis\">\n                @for (item of filter.filters; track $index) {\n                  @if (item.filterValue) {\n                    @if ($index > 0 && item.filterValue) {\n                      <span class=\"filter_logic\">\n                        {{ filter.filterLogic }}\n                      </span>\n                    }\n                    <span class=\"filter_field\"\n                      >{{ filter.fieldName.split(\".\")[0] }}:</span\n                    >\n                    <span class=\"\">\n                      {{\n                        item.filterOperation == \"=\" ||\n                        item.filterOperation == \"equals\"\n                          ? \":\"\n                          : item.filterOperation\n                      }}</span\n                    >\n                    <span class=\"filter_value\">{{ item.filterValue }}</span>\n                  }\n                }\n              </div>\n              <button\n                class=\"remove_filter_btn\"\n                (click)=\"removeActiveFilter(filter)\"\n              >\n                <img src=\"images/t-x.svg\" alt=\"\" />\n              </button>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n    </div>\n  }\n  <div\n    class=\"table_wrapper global\"\n    id=\"table_scroll\"\n    #parent\n    (scroll)=\"infinityScroll($event)\"\n    [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n    [class.no-horizontal-scroll]=\"\n      (!rowData || rowData.length === 0) &&\n      (!groupedResult || groupedResult.length === 0)\n    \"\n  >\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\">\n        <thead class=\"sticky-top\">\n          <tr>\n            @if (\n              checkBoxSelection &&\n              checkboxSelectionType == \"multiple\" &&\n              atLeastOneColumnChecked\n            ) {\n              <th style=\"min-width: 50px; width: 50px\">\n                <div class=\"th_wraper\">\n                  <span class=\"checkbox_container\"\n                    ><input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      name=\"\"\n                      id=\"\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkInterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                  /></span>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            } @else {\n              @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n                <th style=\"min-width: 50px; width: 50px\"></th>\n              }\n            }\n            @if (activeGroups.length > 0) {\n              <th class=\"active_group\">\n                <div class=\"th_wraper\">\n                  <div class=\"text_wrapper\">\n                    <span class=\"ellipsis headerName\">Group</span>\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <div class=\"three-dots\">\n                      <img src=\"images/t-more-vertical.svg\" />\n                    </div>\n                  </div>\n                </div>\n              </th>\n            }\n            @for (col of colDefs; track col.colId) {\n              @if (col.active) {\n                <th\n                  [ngStyle]=\"getStyle(col, 'action')\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === $index,\n                    pinned_column: col.leftPinned || col.rightPinned,\n                  }\"\n                  (dragover)=\"onDragOver($event, $index)\"\n                  (drop)=\"onDrop($event, $index)\"\n                  (mouseenter)=\"onMouseEnterHeader($index)\"\n                  (mouseleave)=\"onMouseLeaveHeader($index)\"\n                >\n                  <div class=\"th_wraper\">\n                    <div\n                      class=\"text_wrapper\"\n                      [ngStyle]=\"getStyle(col, 'action')\"\n                      (click)=\"onSortingRowData($index, col)\"\n                    >\n                      @if (showMoveIcon[$index] && !col.isAction) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing || columnDraggable[$index]\"\n                          (dragstart)=\"onDragStart($event, $index, col)\"\n                          (dragend)=\"onDragEnd()\"\n                          (mouseenter)=\"enableColumnDrag($event, $index)\"\n                          (mouseleave)=\"disableColumnDrag($event, $index)\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{\n                        col?.headerName\n                      }}</span>\n\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex == $index &&\n                        col?.sortable &&\n                        !col.isAction\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[$index] === \"asc\") {\n                            <img\n                              src=\"images/t-arrow-up.svg\"\n                              class=\"sorting_up\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (sortingType[$index] === \"dsc\") {\n                            <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n                            <img\n                              src=\"images/t-arrow-down.svg\"\n                              class=\"sorting_down\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Column Filters Logic-->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          #trigger\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, $index, $event)\"\n                        >\n                          @if (activeFilters.has(col.fieldName)) {\n                            <img\n                              src=\"images/t-filter-applied.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          } @else {\n                            <img\n                              src=\"images/t-filter.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (activeFilterIndex === $index) {\n                            <div class=\"filt_wrap\">\n                              <div\n                                adaptivePosition\n                                [trigger]=\"trigger\"\n                                [parentContainer]=\"parent\"\n                                [matchWidth]=\"false\"\n                                class=\"filter_wrapper\"\n                                id=\"filter_wrapper-{{ $index }}\"\n                                (click)=\"$event.stopPropagation()\"\n                                appOutsideClick\n                                (clickOutside)=\"onClickOutside()\"\n                              >\n                                <!-- Text Filter -->\n                                @if (col.filterType === \"text\") {\n                                  <lib-common-input\n                                    [options]=\"filterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"filterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                  }\n                                }\n\n                                <!-- Number Filter -->\n                                @if (col.filterType === \"number\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"number\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (input)=\"applyAllFilters()\"\n                       /> -->\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"number\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (input)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n                                  }\n                                }\n\n                                <!-- DATE FILTER -->\n                                @if (col.filterType === \"date\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"date\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (change)=\"applyAllFilters()\"\n                       /> -->\n                                  <lib-common-calendar\n                                    [dateConfig]=\"dateConfig\"\n                                    [(ngModel)]=\"col.filters[0].filterValue\"\n                                    [preSelectedValue]=\"\n                                      col.filters[0].filterValue\n                                    \"\n                                    (dateTimeSelected)=\"\n                                      dateTimeSelected($event)\n                                    \"\n                                  ></lib-common-calendar>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <lib-common-calendar\n                                      [dateConfig]=\"dateConfig\"\n                                      [(ngModel)]=\"col.filters[1].filterValue\"\n                                      [preSelectedValue]=\"\n                                        col.filters[1].filterValue\n                                      \"\n                                      (dateTimeSelected)=\"\n                                        dateTimeSelected($event)\n                                      \"\n                                    ></lib-common-calendar>\n                                  }\n                                }\n\n                                <!-- SET FILTER (CHECKBOX LIST) -->\n                                @if (col.filterType === \"set\") {\n                                  <!-- <input\n                         type=\"text\"\n                         placeholder=\"Search...\"\n                         (input)=\"filterSetOptions(col, $event)\"\n                       /> -->\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Search...\"\n                                      (input)=\"filterSetOptions(col, $event)\"\n                                    />\n                                  </div>\n\n                                  <div class=\"set_option_details\">\n                                    <label class=\"checkbox_container\">\n                                      <input\n                                        class=\"custom_check_box\"\n                                        type=\"checkbox\"\n                                        [checked]=\"isAllSelected(col)\"\n                                        (change)=\"toggleSelectAll(col, $event)\"\n                                      />\n                                      (Select All)\n                                    </label>\n                                    <div class=\"set_options\" id=\"table_scroll\">\n                                      @for (\n                                        opt of col.filteredOptions;\n                                        track $index\n                                      ) {\n                                        <label class=\"checkbox_container\">\n                                          <input\n                                            class=\"custom_check_box\"\n                                            type=\"checkbox\"\n                                            [checked]=\"\n                                              col.selectedValues.has(opt)\n                                            \"\n                                            (change)=\"\n                                              toggleSetOption(col, opt, $event)\n                                            \"\n                                          />\n                                          {{ opt }}\n                                        </label>\n                                      }\n                                    </div>\n                                  </div>\n                                }\n                                <div class=\"filter_btn\">\n                                  <button\n                                    class=\"reset_btn\"\n                                    type=\"button\"\n                                    (click)=\"resetFilter(col)\"\n                                  >\n                                    Reset\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired && col.columnAction) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, $index)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n                      @if (!col.isAction) {\n                        <span\n                          class=\"resize-handle\"\n                          (mousedown)=\"startResize($event, $index)\"\n                        >\n                          |\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- popup open -->\n                  @if (menuVisible[$index]) {\n                    <div\n                      #colActionMenu\n                      class=\"dropdown_wrapper\"\n                      adaptivePosition\n                      [trigger]=\"triggerColMenu\"\n                      [parentContainer]=\"parent\"\n                      [matchWidth]=\"false\"\n                      [isColumnActionMenu]=\"true\"\n                      (click)=\"$event.stopPropagation()\"\n                      appOutsideClick\n                      (clickOutside)=\"onClickOutside()\"\n                    >\n                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n                        @if (\n                          sortingType[$index] === \"dsc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'asc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img\n                                src=\"images/arrow-up.svg\"\n                                class=\"sorting_up\"\n                                [ngClass]=\"{ disable: !col.sortable }\"\n                              />\n                              <span class=\"text\">Sort Ascending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'dsc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/arrow-down.svg\" />\n                              <span class=\"text\">Sort Descending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"dsc\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, '', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/trash-2.svg\" />\n                              <span class=\"text\">Clear Sort</span>\n                            </div>\n                          </div>\n                        }\n                        <div class=\"divder\"></div>\n\n                        <div\n                          class=\"right_click_item\"\n                          (mouseenter)=\"showPinActions($event)\"\n                          (mouseleave)=\"hidePinActions()\"\n                        >\n                          <div class=\"left_item\">\n                            <img src=\"images/pin.svg\" />\n                            <span class=\"text\">Pin Column</span>\n                          </div>\n                          <div class=\"right_item\">\n                            <img src=\"images/chevron-right.svg\" />\n                            @if (showPin) {\n                              <div class=\"second_dropdown\" #pinMenu>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'none')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      (pinActionClicked[col.colId] ??\n                                        \"none\") === \"none\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">No Pin</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'left')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"left\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Left</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'right')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"right\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Right</span>\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'left')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">{{\n                           col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n                         }}</span>\n                       </div>\n                     </div>\n                     <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'right')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">\n                           {{\n                             col.rightPinned\n                               ? \"Unpin Right Column\"\n                               : \"Pin Column Right\"\n                           }}\n                         </span>\n                       </div>\n                       <div class=\"right_item\">\n                         <img src=\"images/arrow-right.svg\" alt=\"\" />\n                       </div>\n                     </div> -->\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize This Column</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize All Columns</span>\n                          </div>\n                        </div>\n                        <div\n                          class=\"right_click_item\"\n                          [ngClass]=\"{\n                            disabled_option:\n                              !groupByRequired || col.disableGrouping,\n                          }\"\n                        >\n                          <div\n                            class=\"left_item\"\n                            (click)=\"groupByColumnAction(col, $index)\"\n                          >\n                            <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n                            <span class=\"text\"\n                              >Group by {{ col.headerName }}</span\n                            >\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"images/t-choose-column.svg\" alt=\"\" />\n                            <span class=\"text\">Choose Columns</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Reset Columns</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (groupedResult && groupedResult.length > 0) {\n            @for (group of groupedResult; track group.key) {\n              <tr (click)=\"toggleGroup(group)\">\n                <td\n                  class=\"group-cell\"\n                  [attr.colspan]=\"\n                    colDefs.length +\n                    (checkBoxSelection ? 1 : 0) +\n                    (activeGroups.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <span class=\"group-toggle\">\n                    <img\n                      src=\"images/{{\n                        group.expanded\n                          ? 'chevron-down.svg'\n                          : 'chevron-right.svg'\n                      }}\"\n                    />\n                    {{ group.key }} ({{ group.children.length }})\n                  </span>\n                </td>\n              </tr>\n\n              @if (group.expanded) {\n                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n                @if (group.children[0]?.children) {\n                  @for (child of group.children; track child.key) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: child,\n                        colDefs: colDefs,\n                        checkBoxSelection: checkBoxSelection,\n                        activeGroups: activeGroups,\n                        level: 1,\n                      }\"\n                    ></ng-container>\n                  }\n                }\n\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n                @if (!group.children[0]?.children) {\n                  @for (row of group.children; track row.rowId) {\n                    <tr [ngClass]=\"row | addClass: tableOptions\">\n                      <!-- Checkbox column if any -->\n                      @if (checkBoxSelection) {\n                        <td>\n                          <span class=\"checkbox_container\">\n                            <input\n                              class=\"custom_check_box\"\n                              type=\"checkbox\"\n                              [checked]=\"row.isSelected\"\n                          /></span>\n                        </td>\n                      }\n                      @if (activeGroups.length > 0) {\n                        <td class=\"group-placeholder\"></td>\n                      }\n\n                      <!-- Render columns -->\n                      @for (col of colDefs; track col.colId) {\n                        <td\n                          [ngStyle]=\"getStyle(col)\"\n                          [ngClass]=\"[\n                            col?.addClass ? col.addClass(row) : '',\n                            col.leftPinned || col.rightPinned\n                              ? 'pinned_column'\n                              : '',\n                          ]\"\n                        >\n                          <!-- {{ row[col.fieldName] }} -->\n                          @if (!col?.cellRenderer) {\n                            <div class=\"cell-value ellipsis\">\n                              <div\n                                class=\"more_data_wrapper\"\n                                [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                              >\n                                {{ parseColValue(row, col) }}\n                              </div>\n                              <div class=\"see_more_data\" id=\"table_scroll\">\n                                <div class=\"item\">\n                                  <span class=\"desc\">\n                                    {{ parseColValue(row, col) }}</span\n                                  >\n                                </div>\n                              </div>\n                            </div>\n                          } @else {\n                            <div\n                              [rowParam]=\"row\"\n                              [col]=\"col\"\n                              [api]=\"tableOptions\"\n                              [currentValue]=\"row[col.fieldName]\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              }\n            }\n          } @else {\n            @for (data of rowData; track data.rowId) {\n              <tr\n                [ngClass]=\"data | addClass: tableOptions\"\n                (dragover)=\"allowRowDrop($event)\"\n                (drop)=\"dropRow(data)\"\n                (click)=\"onRowClick(data)\"\n              >\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px\">\n                    @if (checkboxSelectionType == \"multiple\") {\n                      <span class=\"checkbox_container\"\n                        ><input\n                          type=\"checkbox\"\n                          class=\"pointer custom_check_box\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [disabled]=\"data.isLocked\"\n                          [checked]=\"data.isSelected || data.isLocked\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                      /></span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [checked]=\"data?.isSelected\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                        />\n                        <label [for]=\"data.rowId\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n                @for (col of colDefs; track col.colId) {\n                  @if (col.active) {\n                    <td\n                      (click)=\"onCellClick(data, col)\"\n                      (dblclick)=\"onCellDblClick(data, col)\"\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col?.addClass ? col.addClass(data) : '',\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      <div class=\"col_wrapper\">\n                        @if (isCellDblClicked[`${col.colId}-${data.rowId}`]) {\n                          <input\n                            [formControl]=\"cellClickedCtrl\"\n                            type=\"text\"\n                            name=\"cellClickedCtrl\"\n                            (blur)=\"onBlur()\"\n                            (keydown.enter)=\"onEnter()\"\n                          />\n                        }\n                        @if (\n                          rowGripFieldName &&\n                          rowGripFieldName === col?.fieldName\n                        ) {\n                          <div\n                            [draggable]=\"true\"\n                            (dragstart)=\"dragRow($event, data)\"\n                            class=\"gripper\"\n                          >\n                            <img class=\"gripper-img\" src=\"images/gripper.svg\" />\n                          </div>\n                        }\n\n                        @if (!col?.cellRenderer) {\n                          <div class=\"cell-value ellipsis\">\n                            <div\n                              class=\"more_data_wrapper\"\n                              [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                            >\n                              {{ parseColValue(data, col) }}\n                            </div>\n                            <div class=\"see_more_data\" id=\"table_scroll\">\n                              <div class=\"item\">\n                                <span class=\"desc\">\n                                  {{ parseColValue(data, col) }}</span\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"data\"\n                            [col]=\"col\"\n                            [api]=\"tableOptions\"\n                            [currentValue]=\"data[col.fieldName]\"\n                            appRendererParser\n                          ></div>\n                        }\n                      </div>\n                      <!-- Commented for later use -->\n                      <!-- <div class=\"tool_tip\">\n                <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n              </div> -->\n                    </td>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tbody>\n\n        <ng-template\n          #groupTemplate\n          let-node\n          let-colDefs=\"colDefs\"\n          let-checkBoxSelection=\"checkBoxSelection\"\n          let-activeGroups=\"activeGroups\"\n          let-level=\"level\"\n        >\n          <!-- GROUP HEADER -->\n          <tr (click)=\"toggleGroup(node)\">\n            <td\n              [attr.colspan]=\"\n                colDefs.length +\n                (checkBoxSelection ? 1 : 0) +\n                (activeGroups.length > 0 ? 1 : 0)\n              \"\n              [style.paddingLeft.px]=\"level * 20\"\n              class=\"group-cell\"\n            >\n              <span class=\"group-toggle\">\n                <img\n                  src=\"images/{{\n                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n                  }}\"\n                />\n                {{ node.key }} ({{ node.children.length }})\n              </span>\n            </td>\n          </tr>\n\n          <!-- CHILDREN -->\n          @if (node.expanded) {\n            <!-- CASE: more groups -->\n            @if (node.children[0]?.children) {\n              @for (child of node.children; track child.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"groupTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: child,\n                    colDefs: colDefs,\n                    checkBoxSelection: checkBoxSelection,\n                    activeGroups: activeGroups,\n                    level: level + 1,\n                  }\"\n                >\n                </ng-container>\n              }\n            }\n\n            <!-- CASE: final rows -->\n            @if (!node.children[0]?.children) {\n              @for (row of node.children; track row.rowId) {\n                <tr [ngClass]=\"row | addClass: tableOptions\">\n                  <!-- Checkbox column if any -->\n                  @if (checkBoxSelection) {\n                    <td>\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox custom_check_box\"\n                          [checked]=\"row.isSelected\"\n                      /></span>\n                    </td>\n                  }\n                  @if (activeGroups.length > 0) {\n                    <td class=\"group-placeholder\"></td>\n                  }\n\n                  <!-- Render columns -->\n                  @for (col of colDefs; track col.colId) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                    >\n                      <!-- {{ row[col.fieldName] }} -->\n                      @if (!col?.cellRenderer) {\n                        <div class=\"cell-value ellipsis\">\n                          <div\n                            class=\"more_data_wrapper\"\n                            [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                          >\n                            {{ parseColValue(row, col) }}\n                          </div>\n                          <div class=\"see_more_data\" id=\"table_scroll\">\n                            <div class=\"item\">\n                              <span class=\"desc\">\n                                {{ parseColValue(row, col) }}</span\n                              >\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <div\n                          [rowParam]=\"row\"\n                          [col]=\"col\"\n                          [api]=\"tableOptions\"\n                          [currentValue]=\"row[col.fieldName]\"\n                          appRendererParser\n                        ></div>\n                      }\n                    </td>\n                  }\n                </tr>\n              }\n            }\n          }\n        </ng-template>\n      </table>\n\n      @if (\n        (!rowData || rowData.length === 0) &&\n        (!groupedResult || groupedResult.length === 0)\n      ) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            @if (tableOptions?.noDataTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n              ></ng-container>\n            } @else {\n              <span>No Data To Show</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  <!--  Table Wrapper Ends-->\n  @if (paginationRequired) {\n    <div class=\"pagination_main\">\n      <div class=\"entries_details\">\n        <span>Showing</span>\n        <div class=\"pagination_select\">\n          <div\n            class=\"select_dropdown pointer\"\n            (click)=\"showPageSizeList = !showPageSizeList\"\n          >\n            <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n            <span class=\"chevron_img\">\n              <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n            </span>\n          </div>\n          @if (showPageSizeList) {\n            <div\n              class=\"select_option\"\n              appOutsideClick\n              (clickOutside)=\"onClickOutside()\"\n            >\n              @for (option of pageSizeList; track $index) {\n                <span\n                  class=\"pointer\"\n                  (click)=\"onPageSizeChanged(option); onClickOutside()\"\n                  >{{ option }}</span\n                >\n              }\n            </div>\n          }\n        </div>\n        <span\n          >Rows |\n          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n          {{\n            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n          }}\n          of\n          {{ totalRecords }} Entries</span\n        >\n      </div>\n      <div class=\"pagination_form\">\n        <!-- <span>Page</span> -->\n\n        <button\n          class=\"outlined_btn first_btn\"\n          type=\"button\"\n          (click)=\"onBtFirstClick()\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n        >\n          <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n        </button>\n        <button\n          class=\"outlined_btn prev_btn\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n          type=\"button\"\n          (click)=\"onBtPrevClick()\"\n        >\n          <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n        </button>\n        <div>\n          <input\n            class=\"input_style\"\n            type=\"number\"\n            [(ngModel)]=\"pageDetails.currentPage\"\n            (change)=\"goToSelectedPage($event)\"\n            name=\"\"\n            id=\"\"\n          />\n        </div>\n        <button\n          class=\"outlined_btn next_btn\"\n          type=\"button\"\n          [ngClass]=\"\n            pageDetails.currentPage < pageDetails.totalPages\n              ? ''\n              : 'disable_btn'\n          \"\n          (click)=\"onBtNextClick()\"\n        >\n          <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n        </button>\n        <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n        <button\n          class=\"outlined_btn last_btn\"\n          type=\"button\"\n          (click)=\"onBtLastClick()\"\n          [ngClass]=\"\n            pageDetails.currentPage < pageDetails.totalPages\n              ? ''\n              : 'disable_btn'\n          \"\n        >\n          <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n        </button>\n      </div>\n    </div>\n  }\n  <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n  <div class=\"right_click_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/scissors.svg\" />\n        <span class=\"text\">Cut</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+X</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+C</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Group Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/clipboard.svg\" alt=\"\" />\n        <span class=\"text\">Paste</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+V</span>\n    </div>\n\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\n        <span class=\"text\">Chart</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/download.svg\" alt=\"\" />\n        <span class=\"text\">Export</span>\n      </div>\n\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Chart section Start Here -->\n  <div class=\"second_dropdown\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <span class=\"text\">Column</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Bar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Pie</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Line</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Area</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">XY(Scatter)</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Polar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stastical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Hierarchical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Specialized</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Funnel</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Combination</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Export Section start Here -->\n  <div class=\"export_section d-none\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">CSV Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">Excel Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Column Group Section Start Here -->\n  <div class=\"third_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Grouped</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stacked</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">100% Stacked</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0}.tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-500)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:nth-last-child(2) .second_dropdown,.tableArea .table_wrapper table thead th:nth-last-child(3) .second_dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{bottom:calc(2.1666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td .gripper{cursor:grab}.tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));width:inherit;max-width:-webkit-fill-available}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:0;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0;border-bottom:0}.active_filters_container .tag_wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 10.8333333333rem / var(--scale));overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.active_filters_container .tag_wrapper .active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .tag_wrapper .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.active_filters_container .clear_all{font-size:var(--fs-16);line-height:calc(1.5rem / var(--scale));font-weight:500;color:var(--blue-600);cursor:pointer}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--blue-100)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .pagination_form .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-left:0;border-right:0;border-bottom:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--blue-100);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting_options{position:absolute;background:var(--white);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.setting_options .column_header{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;height:calc(2.5rem / var(--scale));color:var(--neutral-600)}.setting_options .item_container{max-height:calc(16.6666666667rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale))}.setting_options .item_container .column_item{color:var(--neutral-600);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.disable_group{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cats-data-grid', imports: [
                         CommonModule,
                         FormsModule,
+                        ReactiveFormsModule,
                         CommonCalendarComponent,
                         OutsideClickDirective,
                         AdaptivePositionDirective,
                         RendererParserDirective,
                         AddClassPipe,
                         CommonInputComponent,
-                    ], template: "<div class=\"tableArea\" #table>\n  @if (settingsRequired && settingsClicked) {\n    <div\n      class=\"setting_options\"\n      appOutsideClick\n      (clickOutside)=\"hideSettings()\"\n    >\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of colDefs; track col.colId) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n              [disabled]=\"col.headerLocked\"\n            />\n            <span>{{ col.headerName | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (groupByRequired) {\n    <!-- Group Panel -->\n    <div\n      class=\"group_panel\"\n      (dragover)=\"onGroupDragOver($event)\"\n      (drop)=\"onGroupDrop($event)\"\n    >\n      <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n      @for (g of activeGroups; track $index) {\n        <div\n          class=\"group_tag\"\n          draggable=\"true\"\n          (dragstart)=\"onGroupDragStart($event, $index)\"\n          (dragover)=\"onActiveDragOver($event, $index)\"\n          (drop)=\"onActiveGroupDrop($event, $index)\"\n        >\n          <img src=\"images/t-gripper.svg\" alt=\"\" />\n          <span>{{ g.headerName }}</span>\n          <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n            <img src=\"images/t-x.svg\" alt=\"\" />\n          </button>\n        </div>\n        <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n      }\n      @if (activeGroups.length === 0) {\n        <div class=\"group_placeholder\">Drag here to set row groups</div>\n      }\n    </div>\n  }\n  @if (activeFilters.size > 0) {\n    <div class=\"active_filters_container\">\n      <div class=\"tag_wrapper\">\n        @for (filter of appliedFilters; track filter.fieldName) {\n          @if(filter.filters?.length) {\n            <div class=\"active_filter_tag\">\n            <div class=\"active_filter_label ellipsis\">\n              @for (item of filter.filters; track $index) {\n                @if (item.filterValue) {\n                  @if ($index > 0 && item.filterValue) {\n                    <span class=\"filter_logic\"> {{ filter.filterLogic }} </span>\n                  }\n                  <span class=\"filter_field\">{{ filter.fieldName.split('.')[0] }}:</span>\n                  <span class=\"\"> {{ (item.filterOperation  == '=' || item.filterOperation == 'equals') ? ':' : item.filterOperation }}</span>\n                  <span class=\"filter_value\">{{ item.filterValue }}</span>\n                }\n              }\n            </div>\n            <button\n              class=\"remove_filter_btn\"\n              (click)=\"removeActiveFilter(filter)\"\n            >\n              <img src=\"images/t-x.svg\" alt=\"\" />\n            </button>\n          </div>\n          }          \n        }\n      </div>\n      <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n    </div>\n  }\n  <div\n    class=\"table_wrapper global\"\n    id=\"table_scroll\"\n    #parent\n    (scroll)=\"infinityScroll($event)\"\n    [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n    [class.no-horizontal-scroll]=\"\n      (!rowData || rowData.length === 0) &&\n      (!groupedResult || groupedResult.length === 0)\n    \"\n  >\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\">\n        <thead class=\"sticky-top\">\n          <tr>\n            @if (\n              checkBoxSelection &&\n              checkboxSelectionType == \"multiple\" &&\n              atLeastOneColumnChecked\n            ) {\n              <th style=\"min-width: 50px; width: 50px\">\n                <div class=\"th_wraper\">\n                  <span class=\"checkbox_container\"\n                    ><input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      name=\"\"\n                      id=\"\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkInterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                  /></span>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            }\n            @else{\n              @if(checkBoxSelection && checkboxSelectionType == \"single\") {\n                <th style=\"min-width: 50px; width: 50px\"></th>\n              }\n          } \n            @if (activeGroups.length > 0) {\n              <th class=\"active_group\">\n                <div class=\"th_wraper\">\n                  <div class=\"text_wrapper\">\n                    <span class=\"ellipsis headerName\">Group</span>\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <div class=\"three-dots\">\n                      <img src=\"images/t-more-vertical.svg\" />\n                    </div>\n                  </div>\n                </div>\n              </th>\n            }\n            @for (col of colDefs; track col.colId) {\n              @if (col.active) {\n                <th\n                  [ngStyle]=\"getStyle(col, 'action')\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === $index,\n                    pinned_column: col.leftPinned || col.rightPinned,\n                  }\"\n                  (dragover)=\"onDragOver($event, $index)\"\n                  (drop)=\"onDrop($event, $index)\"\n                  (mouseenter)=\"onMouseEnterHeader($index)\"\n                  (mouseleave)=\"onMouseLeaveHeader($index)\"\n                >\n                  <div class=\"th_wraper\">\n                    <div\n                      class=\"text_wrapper\"\n                      [ngStyle]=\"getStyle(col, 'action')\"\n                      (click)=\"onSortingRowData($index, col)\"\n                    >\n                      @if (showMoveIcon[$index] && !col.isAction) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing || columnDraggable[$index]\"\n                          (dragstart)=\"onDragStart($event, $index)\"\n                          (dragend)=\"onDragEnd()\"\n                          (mouseenter)=\"enableColumnDrag($event, $index)\"\n                          (mouseleave)=\"disableColumnDrag($event, $index)\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{\n                        col?.headerName\n                      }}</span>\n\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex == $index &&\n                        col?.sortable &&\n                        !col.isAction\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[$index] === \"asc\") {\n                            <img\n                              src=\"images/t-arrow-up.svg\"\n                              class=\"sorting_up\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (sortingType[$index] === \"dsc\") {\n                            <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n                            <img\n                              src=\"images/t-arrow-down.svg\"\n                              class=\"sorting_down\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Column Filters Logic-->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          #trigger\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, $index, $event)\"\n                        >\n                          @if (activeFilters.has(col.fieldName)) {\n                            <img\n                              src=\"images/t-filter-applied.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          } @else {\n                            <img\n                              src=\"images/t-filter.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (activeFilterIndex === $index) {\n                            <div class=\"filt_wrap\">\n                              <div\n                                adaptivePosition\n                                [trigger]=\"trigger\"\n                                [parentContainer]=\"parent\"\n                                [matchWidth]=\"false\"\n                                class=\"filter_wrapper\"\n                                id=\"filter_wrapper-{{ $index }}\"\n                                (click)=\"$event.stopPropagation()\"\n                                appOutsideClick\n                                (clickOutside)=\"onClickOutside()\"\n                              >\n                                <!-- Text Filter -->\n                                @if (col.filterType === \"text\") {\n                                  <lib-common-input\n                                    [options]=\"filterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"filterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                  }\n                                }\n\n                                <!-- Number Filter -->\n                                @if (col.filterType === \"number\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"number\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (input)=\"applyAllFilters()\"\n                       /> -->\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"number\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (input)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n                                  }\n                                }\n\n                                <!-- DATE FILTER -->\n                                @if (col.filterType === \"date\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"date\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (change)=\"applyAllFilters()\"\n                       /> -->\n                                  <lib-common-calendar\n                                    [dateConfig]=\"dateConfig\"\n                                    [(ngModel)]=\"col.filters[0].filterValue\"\n                                    [preSelectedValue]=\"\n                                      col.filters[0].filterValue\n                                    \"\n                                    (dateTimeSelected)=\"\n                                      dateTimeSelected($event)\n                                    \"\n                                  ></lib-common-calendar>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <lib-common-calendar\n                                      [dateConfig]=\"dateConfig\"\n                                      [(ngModel)]=\"col.filters[1].filterValue\"\n                                      [preSelectedValue]=\"\n                                        col.filters[1].filterValue\n                                      \"\n                                      (dateTimeSelected)=\"\n                                        dateTimeSelected($event)\n                                      \"\n                                    ></lib-common-calendar>\n                                  }\n                                }\n\n                                <!-- SET FILTER (CHECKBOX LIST) -->\n                                @if (col.filterType === \"set\") {\n                                  <!-- <input\n                         type=\"text\"\n                         placeholder=\"Search...\"\n                         (input)=\"filterSetOptions(col, $event)\"\n                       /> -->\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Search...\"\n                                      (input)=\"filterSetOptions(col, $event)\"\n                                    />\n                                  </div>\n\n                                  <div class=\"set_option_details\">\n                                    <label class=\"checkbox_container\">\n                                      <input\n                                        class=\"custom_check_box\"\n                                        type=\"checkbox\"\n                                        [checked]=\"isAllSelected(col)\"\n                                        (change)=\"toggleSelectAll(col, $event)\"\n                                      />\n                                      (Select All)\n                                    </label>\n                                    <div class=\"set_options\" id=\"table_scroll\">\n                                      @for (\n                                        opt of col.filteredOptions;\n                                        track $index\n                                      ) {\n                                        <label class=\"checkbox_container\">\n                                          <input\n                                            class=\"custom_check_box\"\n                                            type=\"checkbox\"\n                                            [checked]=\"\n                                              col.selectedValues.has(opt)\n                                            \"\n                                            (change)=\"\n                                              toggleSetOption(col, opt, $event)\n                                            \"\n                                          />\n                                          {{ opt }}\n                                        </label>\n                                      }\n                                    </div>\n                                  </div>\n                                }\n                                <div class=\"filter_btn\">\n                                  <button\n                                    class=\"reset_btn\"\n                                    type=\"button\"\n                                    (click)=\"resetFilter(col)\"\n                                  >\n                                    Reset\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired && col.columnAction) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, $index)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n                      @if (!col.isAction) {\n                        <span\n                          class=\"resize-handle\"\n                          (mousedown)=\"startResize($event, $index)\"\n                        >\n                          |\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- popup open -->\n                  @if (menuVisible[$index]) {\n                    <div\n                      #colActionMenu\n                      class=\"dropdown_wrapper\"\n                      adaptivePosition\n                      [trigger]=\"triggerColMenu\"\n                      [parentContainer]=\"parent\"\n                      [matchWidth]=\"false\"\n                      [isColumnActionMenu]=\"true\"\n                      (click)=\"$event.stopPropagation()\"\n                      appOutsideClick\n                      (clickOutside)=\"onClickOutside()\"\n                    >\n                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n                        @if (\n                          sortingType[$index] === \"dsc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'asc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img\n                                src=\"images/arrow-up.svg\"\n                                class=\"sorting_up\"\n                                [ngClass]=\"{ disable: !col.sortable }\"\n                              />\n                              <span class=\"text\">Sort Ascending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'dsc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/arrow-down.svg\" />\n                              <span class=\"text\">Sort Descending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"dsc\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, '', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/trash-2.svg\" />\n                              <span class=\"text\">Clear Sort</span>\n                            </div>\n                          </div>\n                        }\n                        <div class=\"divder\"></div>\n\n                        <div\n                          class=\"right_click_item\"\n                          (mouseenter)=\"showPinActions($event)\"\n                          (mouseleave)=\"hidePinActions()\"\n                        >\n                          <div class=\"left_item\">\n                            <img src=\"images/pin.svg\" />\n                            <span class=\"text\">Pin Column</span>\n                          </div>\n                          <div class=\"right_item\">\n                            <img src=\"images/chevron-right.svg\" />\n                            @if (showPin) {\n                              <div class=\"second_dropdown\" #pinMenu>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'none')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      (pinActionClicked[col.colId] ??\n                                        \"none\") === \"none\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">No Pin</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'left')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"left\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Left</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'right')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"right\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Right</span>\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'left')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">{{\n                           col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n                         }}</span>\n                       </div>\n                     </div>\n                     <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'right')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">\n                           {{\n                             col.rightPinned\n                               ? \"Unpin Right Column\"\n                               : \"Pin Column Right\"\n                           }}\n                         </span>\n                       </div>\n                       <div class=\"right_item\">\n                         <img src=\"images/arrow-right.svg\" alt=\"\" />\n                       </div>\n                     </div> -->\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize This Column</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize All Columns</span>\n                          </div>\n                        </div>\n                        <div\n                          class=\"right_click_item\"\n                          [ngClass]=\"{ disabled_option: !groupByRequired }\"\n                        >\n                          <div\n                            class=\"left_item\"\n                            (click)=\"groupByColumnAction(col, $index)\"\n                          >\n                            <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n                            <span class=\"text\"\n                              >Group by {{ col.headerName }}</span\n                            >\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"images/t-choose-column.svg\" alt=\"\" />\n                            <span class=\"text\">Choose Columns</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Reset Columns</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (groupedResult && groupedResult.length > 0) {\n            @for (group of groupedResult; track group.key) {\n              <tr (click)=\"toggleGroup(group)\">\n                <td\n                  class=\"group-cell\"\n                  [attr.colspan]=\"\n                    colDefs.length +\n                    (checkBoxSelection ? 1 : 0) +\n                    (activeGroups.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <span class=\"group-toggle\">\n                    <img\n                      src=\"images/{{\n                        group.expanded\n                          ? 'chevron-down.svg'\n                          : 'chevron-right.svg'\n                      }}\"\n                    />\n                    {{ group.key }} ({{ group.children.length }})\n                  </span>\n                </td>\n              </tr>\n\n              @if (group.expanded) {\n                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n                @if (group.children[0]?.children) {\n                  @for (child of group.children; track child.key) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: child,\n                        colDefs: colDefs,\n                        checkBoxSelection: checkBoxSelection,\n                        activeGroups: activeGroups,\n                        level: 1,\n                      }\"\n                    ></ng-container>\n                  }\n                }\n\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n                @if (!group.children[0]?.children) {\n                  @for (row of group.children; track row.rowId) {\n                    <tr [ngClass]=\"row | addClass: tableOptions\">\n                      <!-- Checkbox column if any -->\n                      @if (checkBoxSelection) {\n                        <td>\n                          <span class=\"checkbox_container\">\n                            <input\n                              class=\"custom_check_box\"\n                              type=\"checkbox\"\n                              [checked]=\"row.isSelected\"\n                          /></span>\n                        </td>\n                      }\n                      @if (activeGroups.length > 0) {\n                        <td class=\"group-placeholder\"></td>\n                      }\n\n                      <!-- Render columns -->\n                      @for (col of colDefs; track col.colId) {\n                        <td\n                          [ngStyle]=\"getStyle(col)\"\n                          [ngClass]=\"[\n                            col?.addClass ? col.addClass(row) : '',\n                            col.leftPinned || col.rightPinned\n                              ? 'pinned_column'\n                              : '',\n                          ]\"\n                        >\n                          <!-- {{ row[col.fieldName] }} -->\n                          @if (!col?.cellRenderer) {\n                            <div class=\"cell-value ellipsis\">\n                              <div\n                                class=\"more_data_wrapper\"\n                                [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                              >\n                                {{ parseColValue(row, col) }}\n                              </div>\n                              <div class=\"see_more_data\" id=\"table_scroll\">\n                                <div class=\"item\">\n                                  <span class=\"desc\">\n                                    {{ parseColValue(row, col) }}</span\n                                  >\n                                </div>\n                              </div>\n                            </div>\n                          } @else {\n                            <div\n                              [rowParam]=\"row\"\n                              [col]=\"col\"\n                              [api]=\"tableOptions\"\n                              [currentValue]=\"row[col.fieldName]\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              }\n            }\n          } @else {\n            @for (data of rowData; track data.rowId) {\n              <tr\n                [ngClass]=\"data | addClass: tableOptions\"\n                (dragover)=\"allowRowDrop($event)\"\n                (drop)=\"dropRow(data)\"\n                (click)=\"onRowClick(data)\"\n              >\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px\">\n                    @if (checkboxSelectionType == \"multiple\") {\n                      <span class=\"checkbox_container\"\n                        ><input\n                          type=\"checkbox\"\n                          class=\"pointer custom_check_box\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [disabled]=\"data.isLocked\"\n                          [checked]=\"data.isSelected || data.isLocked\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                      /></span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [checked]=\"data?.isSelected\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                        />\n                        <label [for]=\"data.rowId\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n                @for (col of colDefs; track col.colId) {\n                  @if (col.active) {\n                    <td (click)=\"onCellClick(data, col)\"\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col?.addClass ? col.addClass(data) : '',\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      <div class=\"col_wrapper\">\n                        @if (\n                          rowGripFieldName &&\n                          rowGripFieldName === col?.fieldName\n                        ) {\n                          <div\n                            [draggable]=\"true\"\n                            (dragstart)=\"dragRow($event, data)\"\n                            class=\"gripper\"\n                          >\n                            <img class=\"gripper-img\" src=\"images/gripper.svg\" />\n                          </div>\n                        }\n\n                        @if (!col?.cellRenderer) {\n                          <div class=\"cell-value ellipsis\">\n                            <div\n                              class=\"more_data_wrapper\"\n                              [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                            >\n                              {{ parseColValue(data, col) }}\n                            </div>\n                            <div class=\"see_more_data\" id=\"table_scroll\">\n                              <div class=\"item\">\n                                <span class=\"desc\">\n                                  {{ parseColValue(data, col) }}</span\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"data\"\n                            [col]=\"col\"\n                            [api]=\"tableOptions\"\n                            [currentValue]=\"data[col.fieldName]\"\n                            appRendererParser\n                          ></div>\n                        }\n                      </div>\n                      <!-- Commented for later use -->\n                      <!-- <div class=\"tool_tip\">\n                <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n              </div> -->\n                    </td>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tbody>\n\n        <ng-template\n          #groupTemplate\n          let-node\n          let-colDefs=\"colDefs\"\n          let-checkBoxSelection=\"checkBoxSelection\"\n          let-activeGroups=\"activeGroups\"\n          let-level=\"level\"\n        >\n          <!-- GROUP HEADER -->\n          <tr (click)=\"toggleGroup(node)\">\n            <td\n              [attr.colspan]=\"\n                colDefs.length +\n                (checkBoxSelection ? 1 : 0) +\n                (activeGroups.length > 0 ? 1 : 0)\n              \"\n              [style.paddingLeft.px]=\"level * 20\"\n              class=\"group-cell\"\n            >\n              <span class=\"group-toggle\">\n                <img\n                  src=\"images/{{\n                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n                  }}\"\n                />\n                {{ node.key }} ({{ node.children.length }})\n              </span>\n            </td>\n          </tr>\n\n          <!-- CHILDREN -->\n          @if (node.expanded) {\n            <!-- CASE: more groups -->\n            @if (node.children[0]?.children) {\n              @for (child of node.children; track child.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"groupTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: child,\n                    colDefs: colDefs,\n                    checkBoxSelection: checkBoxSelection,\n                    activeGroups: activeGroups,\n                    level: level + 1,\n                  }\"\n                >\n                </ng-container>\n              }\n            }\n\n            <!-- CASE: final rows -->\n            @if (!node.children[0]?.children) {\n              @for (row of node.children; track row.rowId) {\n                <tr [ngClass]=\"row | addClass: tableOptions\">\n                  <!-- Checkbox column if any -->\n                  @if (checkBoxSelection) {\n                    <td>\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox custom_check_box\"\n                          [checked]=\"row.isSelected\"\n                      /></span>\n                    </td>\n                  }\n                  @if (activeGroups.length > 0) {\n                    <td class=\"group-placeholder\"></td>\n                  }\n\n                  <!-- Render columns -->\n                  @for (col of colDefs; track col.colId) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                    >\n                      <!-- {{ row[col.fieldName] }} -->\n                      @if (!col?.cellRenderer) {\n                        <div class=\"cell-value ellipsis\">\n                          <div\n                            class=\"more_data_wrapper\"\n                            [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                          >\n                            {{ parseColValue(row, col) }}\n                          </div>\n                          <div class=\"see_more_data\" id=\"table_scroll\">\n                            <div class=\"item\">\n                              <span class=\"desc\">\n                                {{ parseColValue(row, col) }}</span\n                              >\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <div\n                          [rowParam]=\"row\"\n                          [col]=\"col\"\n                          [api]=\"tableOptions\"\n                          [currentValue]=\"row[col.fieldName]\"\n                          appRendererParser\n                        ></div>\n                      }\n                    </td>\n                  }\n                </tr>\n              }\n            }\n          }\n        </ng-template>\n      </table>\n\n      @if (\n        (!rowData || rowData.length === 0) &&\n        (!groupedResult || groupedResult.length === 0)\n      ) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            @if (tableOptions?.noDataTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n              ></ng-container>\n            } @else {\n              <span>No Data To Show</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  <!--  Table Wrapper Ends-->\n  @if (paginationRequired) {\n    <div class=\"pagination_main\">\n      <div class=\"entries_details\">\n        <span>Showing</span>\n        <div class=\"pagination_select\">\n          <div\n            class=\"select_dropdown pointer\"\n            (click)=\"showPageSizeList = !showPageSizeList\"\n          >\n            <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n            <span class=\"chevron_img\">\n              <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n            </span>\n          </div>\n          @if (showPageSizeList) {\n            <div\n              class=\"select_option\"\n              appOutsideClick\n              (clickOutside)=\"onClickOutside()\"\n            >\n              @for (option of pageSizeList; track $index) {\n                <span\n                  class=\"pointer\"\n                  (click)=\"onPageSizeChanged(option); onClickOutside()\"\n                  >{{ option }}</span\n                >\n              }\n            </div>\n          }\n        </div>\n        <span\n          >Rows |\n          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n          {{\n            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n          }}\n          of\n          {{ totalRecords }} Entries</span\n        >\n      </div>\n      <div class=\"pagination_form\">\n        <!-- <span>Page</span> -->\n\n        <button class=\"outlined_btn first_btn\" type=\"button\" (click)=\"onBtFirstClick()\" [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n        </button>\n        <button\n          class=\"outlined_btn prev_btn\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n          type=\"button\"\n          (click)=\"onBtPrevClick()\"\n        >\n          <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n        </button>\n        <div>\n          <input\n            class=\"input_style\"\n            type=\"number\"\n            [(ngModel)]=\"pageDetails.currentPage\"\n            (change)=\"goToSelectedPage($event)\"\n            name=\"\"\n            id=\"\"\n          />\n        </div>\n        <button\n          class=\"outlined_btn next_btn\"\n          type=\"button\"\n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\"\n          (click)=\"onBtNextClick()\"\n        >\n          <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n        </button>\n        <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n        <button class=\"outlined_btn last_btn\" type=\"button\" (click)=\"onBtLastClick()\"        \n          [ngClass]=\"pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\">\n          <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n        </button>\n      </div>\n    </div>\n  }\n  <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n  <div class=\"right_click_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/scissors.svg\" />\n        <span class=\"text\">Cut</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+X</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+C</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Group Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/clipboard.svg\" alt=\"\" />\n        <span class=\"text\">Paste</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+V</span>\n    </div>\n\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\n        <span class=\"text\">Chart</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/download.svg\" alt=\"\" />\n        <span class=\"text\">Export</span>\n      </div>\n\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Chart section Start Here -->\n  <div class=\"second_dropdown\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <span class=\"text\">Column</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Bar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Pie</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Line</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Area</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">XY(Scatter)</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Polar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stastical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Hierarchical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Specialized</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Funnel</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Combination</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Export Section start Here -->\n  <div class=\"export_section d-none\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">CSV Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">Excel Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Column Group Section Start Here -->\n  <div class=\"third_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Grouped</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stacked</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">100% Stacked</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0}.tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-500)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:nth-last-child(2) .second_dropdown,.tableArea .table_wrapper table thead th:nth-last-child(3) .second_dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{bottom:calc(2.1666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td .gripper{cursor:grab}.tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));width:inherit;max-width:-webkit-fill-available}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:0;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0;border-bottom:0}.active_filters_container .tag_wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 10.8333333333rem / var(--scale));overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.active_filters_container .tag_wrapper .active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .tag_wrapper .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.active_filters_container .clear_all{font-size:var(--fs-16);line-height:calc(1.5rem / var(--scale));font-weight:500;color:var(--blue-600);cursor:pointer}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--blue-100)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .pagination_form .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-left:0;border-right:0;border-bottom:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--blue-100);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting_options{position:absolute;background:var(--white);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.setting_options .column_header{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;height:calc(2.5rem / var(--scale));color:var(--neutral-600)}.setting_options .item_container{max-height:calc(16.6666666667rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale))}.setting_options .item_container .column_item{color:var(--neutral-600);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}\n"] }]
+                    ], template: "<div class=\"tableArea\" #table>\n  @if (settingsRequired && settingsClicked) {\n    <div\n      class=\"setting_options\"\n      appOutsideClick\n      (clickOutside)=\"hideSettings()\"\n    >\n      <div class=\"column_header\">Select Headers</div>\n      <div class=\"checkbox_container\">\n        <input\n          class=\"custom_check_box\"\n          type=\"checkbox\"\n          [checked]=\"activeAll\"\n          (change)=\"activeAllSelection($event)\"\n        />\n        <span>Select All</span>\n      </div>\n\n      <div class=\"item_container\" id=\"table_scroll\">\n        @for (col of colDefs; track col.colId) {\n          <div class=\"column_item checkbox_container\">\n            <input\n              class=\"custom_check_box\"\n              type=\"checkbox\"\n              [checked]=\"col.active\"\n              (change)=\"changeActiveColSelection($event, col)\"\n              [disabled]=\"col.headerLocked\"\n            />\n            <span>{{ col.headerName | titlecase }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (groupByRequired) {\n    <!-- Group Panel -->\n    <div\n      class=\"group_panel\"\n      [ngClass]=\"{ disable_group: groupingDisabled }\"\n      (dragover)=\"onGroupDragOver($event)\"\n      (drop)=\"onGroupDrop($event)\"\n    >\n      <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n      @for (g of activeGroups; track $index) {\n        <div\n          class=\"group_tag\"\n          draggable=\"true\"\n          (dragstart)=\"onGroupDragStart($event, $index)\"\n          (dragover)=\"onActiveDragOver($event, $index)\"\n          (drop)=\"onActiveGroupDrop($event, $index)\"\n        >\n          <img src=\"images/t-gripper.svg\" alt=\"\" />\n          <span>{{ g.headerName }}</span>\n          <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\n            <img src=\"images/t-x.svg\" alt=\"\" />\n          </button>\n        </div>\n        <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n      }\n      @if (activeGroups.length === 0) {\n        <div class=\"group_placeholder\">Drag here to set row groups</div>\n      }\n    </div>\n  }\n  @if (activeFilters.size > 0) {\n    <div class=\"active_filters_container\">\n      <div class=\"tag_wrapper\">\n        @for (filter of appliedFilters; track filter.fieldName) {\n          @if (filter.filters?.length) {\n            <div class=\"active_filter_tag\">\n              <div class=\"active_filter_label ellipsis\">\n                @for (item of filter.filters; track $index) {\n                  @if (item.filterValue) {\n                    @if ($index > 0 && item.filterValue) {\n                      <span class=\"filter_logic\">\n                        {{ filter.filterLogic }}\n                      </span>\n                    }\n                    <span class=\"filter_field\"\n                      >{{ filter.fieldName.split(\".\")[0] }}:</span\n                    >\n                    <span class=\"\">\n                      {{\n                        item.filterOperation == \"=\" ||\n                        item.filterOperation == \"equals\"\n                          ? \":\"\n                          : item.filterOperation\n                      }}</span\n                    >\n                    <span class=\"filter_value\">{{ item.filterValue }}</span>\n                  }\n                }\n              </div>\n              <button\n                class=\"remove_filter_btn\"\n                (click)=\"removeActiveFilter(filter)\"\n              >\n                <img src=\"images/t-x.svg\" alt=\"\" />\n              </button>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"clear_all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n    </div>\n  }\n  <div\n    class=\"table_wrapper global\"\n    id=\"table_scroll\"\n    #parent\n    (scroll)=\"infinityScroll($event)\"\n    [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n    [class.no-horizontal-scroll]=\"\n      (!rowData || rowData.length === 0) &&\n      (!groupedResult || groupedResult.length === 0)\n    \"\n  >\n    <div class=\"table-inner-wrapper\">\n      <table cellspacing=\"0\" cellpadding=\"0\">\n        <thead class=\"sticky-top\">\n          <tr>\n            @if (\n              checkBoxSelection &&\n              checkboxSelectionType == \"multiple\" &&\n              atLeastOneColumnChecked\n            ) {\n              <th style=\"min-width: 50px; width: 50px\">\n                <div class=\"th_wraper\">\n                  <span class=\"checkbox_container\"\n                    ><input\n                      class=\"pointer custom_check_box\"\n                      type=\"checkbox\"\n                      name=\"\"\n                      id=\"\"\n                      [checked]=\"checkAllSelected()\"\n                      [indeterminate]=\"checkInterminate()\"\n                      (change)=\"onHeaderCheckboxChange($event)\"\n                  /></span>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <span class=\"resize-handle default_cursor\"> | </span>\n                  </div>\n                </div>\n              </th>\n            } @else {\n              @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n                <th style=\"min-width: 50px; width: 50px\"></th>\n              }\n            }\n            @if (activeGroups.length > 0) {\n              <th class=\"active_group\">\n                <div class=\"th_wraper\">\n                  <div class=\"text_wrapper\">\n                    <span class=\"ellipsis headerName\">Group</span>\n                  </div>\n                  <div class=\"filter_three_dot_wrapper\">\n                    <div class=\"three-dots\">\n                      <img src=\"images/t-more-vertical.svg\" />\n                    </div>\n                  </div>\n                </div>\n              </th>\n            }\n            @for (col of colDefs; track col.colId) {\n              @if (col.active) {\n                <th\n                  [ngStyle]=\"getStyle(col, 'action')\"\n                  [ngClass]=\"{\n                    'drag-over': dragOverIndex === $index,\n                    pinned_column: col.leftPinned || col.rightPinned,\n                  }\"\n                  (dragover)=\"onDragOver($event, $index)\"\n                  (drop)=\"onDrop($event, $index)\"\n                  (mouseenter)=\"onMouseEnterHeader($index)\"\n                  (mouseleave)=\"onMouseLeaveHeader($index)\"\n                >\n                  <div class=\"th_wraper\">\n                    <div\n                      class=\"text_wrapper\"\n                      [ngStyle]=\"getStyle(col, 'action')\"\n                      (click)=\"onSortingRowData($index, col)\"\n                    >\n                      @if (showMoveIcon[$index] && !col.isAction) {\n                        <img\n                          src=\"images/t-move.svg\"\n                          class=\"move-icon\"\n                          [draggable]=\"!isResizing || columnDraggable[$index]\"\n                          (dragstart)=\"onDragStart($event, $index, col)\"\n                          (dragend)=\"onDragEnd()\"\n                          (mouseenter)=\"enableColumnDrag($event, $index)\"\n                          (mouseleave)=\"disableColumnDrag($event, $index)\"\n                        />\n                      }\n                      <span class=\"ellipsis headerName\">{{\n                        col?.headerName\n                      }}</span>\n\n                      @if (\n                        sortingRequired &&\n                        sortingColumnIndex == $index &&\n                        col?.sortable &&\n                        !col.isAction\n                      ) {\n                        <span class=\"sorting_icon\">\n                          @if (sortingType[$index] === \"asc\") {\n                            <img\n                              src=\"images/t-arrow-up.svg\"\n                              class=\"sorting_up\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (sortingType[$index] === \"dsc\") {\n                            <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n                            <img\n                              src=\"images/t-arrow-down.svg\"\n                              class=\"sorting_down\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                        </span>\n                      }\n                    </div>\n                    <div class=\"filter_three_dot_wrapper\">\n                      <!-- Column Filters Logic-->\n                      @if (filterRequired && col.filterable) {\n                        <div\n                          #trigger\n                          class=\"filters\"\n                          (click)=\"toggleFilter(col, $index, $event)\"\n                        >\n                          @if (activeFilters.has(col.fieldName)) {\n                            <img\n                              src=\"images/t-filter-applied.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          } @else {\n                            <img\n                              src=\"images/t-filter.svg\"\n                              class=\"filter-icon\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          }\n                          @if (activeFilterIndex === $index) {\n                            <div class=\"filt_wrap\">\n                              <div\n                                adaptivePosition\n                                [trigger]=\"trigger\"\n                                [parentContainer]=\"parent\"\n                                [matchWidth]=\"false\"\n                                class=\"filter_wrapper\"\n                                id=\"filter_wrapper-{{ $index }}\"\n                                (click)=\"$event.stopPropagation()\"\n                                appOutsideClick\n                                (clickOutside)=\"onClickOutside()\"\n                              >\n                                <!-- Text Filter -->\n                                @if (col.filterType === \"text\") {\n                                  <lib-common-input\n                                    [options]=\"filterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (keyup)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"filterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                  }\n                                }\n\n                                <!-- Number Filter -->\n                                @if (col.filterType === \"number\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"number\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (input)=\"applyAllFilters()\"\n                       /> -->\n\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"number\"\n                                      placeholder=\"Filter\"\n                                      [(ngModel)]=\"col.filters[0].filterValue\"\n                                      (input)=\"applyAllFilters()\"\n                                    />\n                                  </div>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <div class=\"search_input\">\n                                      <img src=\"images/search.svg\" alt=\"\" />\n                                      <input\n                                        type=\"text\"\n                                        placeholder=\"Filter\"\n                                        [(ngModel)]=\"col.filters[1].filterValue\"\n                                        (keyup)=\"applyAllFilters()\"\n                                      />\n                                    </div>\n                                    <!-- <input\n                         type=\"text\"\n                         [(ngModel)]=\"col.filters[1].filterValue\"\n                         placeholder=\"Filter\u2026\"\n                         (keyup)=\"applyAllFilters()\"\n                       /> -->\n                                  }\n                                }\n\n                                <!-- DATE FILTER -->\n                                @if (col.filterType === \"date\") {\n                                  <lib-common-input\n                                    [options]=\"numberFilterOptions\"\n                                    [selectedValue]=\"\n                                      col.filters[0].filterOperation\n                                    \"\n                                    placeholder=\"Select filter\"\n                                    (valueChange)=\"\n                                      col.filters[0].filterOperation = $event;\n                                      applyAllFilters()\n                                    \"\n                                  ></lib-common-input>\n\n                                  <!-- <input\n                         type=\"date\"\n                         [(ngModel)]=\"col.filters[0].filterValue\"\n                         (change)=\"applyAllFilters()\"\n                       /> -->\n                                  <lib-common-calendar\n                                    [dateConfig]=\"dateConfig\"\n                                    [(ngModel)]=\"col.filters[0].filterValue\"\n                                    [preSelectedValue]=\"\n                                      col.filters[0].filterValue\n                                    \"\n                                    (dateTimeSelected)=\"\n                                      dateTimeSelected($event)\n                                    \"\n                                  ></lib-common-calendar>\n\n                                  @if (col.filters[0].filterValue) {\n                                    <div class=\"logic-row radio_option\">\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"AND\"\n                                        id=\"{{ $index }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index\">AND</label>\n\n                                      <input\n                                        type=\"radio\"\n                                        name=\"filterLogic{{ col.fieldName }}\"\n                                        [(ngModel)]=\"col.filterLogic\"\n                                        value=\"OR\"\n                                        id=\"{{ $index + 1 }}\"\n                                        (change)=\"applyAllFilters()\"\n                                      />\n                                      <label [for]=\"$index + 1\">OR</label>\n                                    </div>\n\n                                    <lib-common-input\n                                      [options]=\"numberFilterOptions\"\n                                      [selectedValue]=\"\n                                        col.filters[1].filterOperation\n                                      \"\n                                      placeholder=\"Select filter\"\n                                      (valueChange)=\"\n                                        col.filters[1].filterOperation = $event;\n                                        applyAllFilters()\n                                      \"\n                                    ></lib-common-input>\n\n                                    <lib-common-calendar\n                                      [dateConfig]=\"dateConfig\"\n                                      [(ngModel)]=\"col.filters[1].filterValue\"\n                                      [preSelectedValue]=\"\n                                        col.filters[1].filterValue\n                                      \"\n                                      (dateTimeSelected)=\"\n                                        dateTimeSelected($event)\n                                      \"\n                                    ></lib-common-calendar>\n                                  }\n                                }\n\n                                <!-- SET FILTER (CHECKBOX LIST) -->\n                                @if (col.filterType === \"set\") {\n                                  <!-- <input\n                         type=\"text\"\n                         placeholder=\"Search...\"\n                         (input)=\"filterSetOptions(col, $event)\"\n                       /> -->\n                                  <div class=\"search_input\">\n                                    <img src=\"images/search.svg\" alt=\"\" />\n                                    <input\n                                      type=\"text\"\n                                      placeholder=\"Search...\"\n                                      (input)=\"filterSetOptions(col, $event)\"\n                                    />\n                                  </div>\n\n                                  <div class=\"set_option_details\">\n                                    <label class=\"checkbox_container\">\n                                      <input\n                                        class=\"custom_check_box\"\n                                        type=\"checkbox\"\n                                        [checked]=\"isAllSelected(col)\"\n                                        (change)=\"toggleSelectAll(col, $event)\"\n                                      />\n                                      (Select All)\n                                    </label>\n                                    <div class=\"set_options\" id=\"table_scroll\">\n                                      @for (\n                                        opt of col.filteredOptions;\n                                        track $index\n                                      ) {\n                                        <label class=\"checkbox_container\">\n                                          <input\n                                            class=\"custom_check_box\"\n                                            type=\"checkbox\"\n                                            [checked]=\"\n                                              col.selectedValues.has(opt)\n                                            \"\n                                            (change)=\"\n                                              toggleSetOption(col, opt, $event)\n                                            \"\n                                          />\n                                          {{ opt }}\n                                        </label>\n                                      }\n                                    </div>\n                                  </div>\n                                }\n                                <div class=\"filter_btn\">\n                                  <button\n                                    class=\"reset_btn\"\n                                    type=\"button\"\n                                    (click)=\"resetFilter(col)\"\n                                  >\n                                    Reset\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      <!-- Three dots menu-->\n                      <div #triggerColMenu>\n                        @if (threeDotsMenuRequired && col.columnAction) {\n                          <div\n                            class=\"three-dots\"\n                            (click)=\"openMenu($event, col, $index)\"\n                          >\n                            <img\n                              src=\"images/t-more-vertical.svg\"\n                              [draggable]=\"false\"\n                              (dragstart)=\"\n                                $event.preventDefault();\n                                $event.stopPropagation()\n                              \"\n                            />\n                          </div>\n                        }\n                      </div>\n                      @if (!col.isAction) {\n                        <span\n                          class=\"resize-handle\"\n                          (mousedown)=\"startResize($event, $index)\"\n                        >\n                          |\n                        </span>\n                      }\n                    </div>\n                  </div>\n\n                  <!-- popup open -->\n                  @if (menuVisible[$index]) {\n                    <div\n                      #colActionMenu\n                      class=\"dropdown_wrapper\"\n                      adaptivePosition\n                      [trigger]=\"triggerColMenu\"\n                      [parentContainer]=\"parent\"\n                      [matchWidth]=\"false\"\n                      [isColumnActionMenu]=\"true\"\n                      (click)=\"$event.stopPropagation()\"\n                      appOutsideClick\n                      (clickOutside)=\"onClickOutside()\"\n                    >\n                      <div class=\"right_click_dropdown\" id=\"table_scroll\">\n                        @if (\n                          sortingType[$index] === \"dsc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'asc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img\n                                src=\"images/arrow-up.svg\"\n                                class=\"sorting_up\"\n                                [ngClass]=\"{ disable: !col.sortable }\"\n                              />\n                              <span class=\"text\">Sort Ascending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, 'dsc', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/arrow-down.svg\" />\n                              <span class=\"text\">Sort Descending</span>\n                            </div>\n                          </div>\n                        }\n                        @if (\n                          sortingType[$index] === \"asc\" ||\n                          sortingType[$index] === \"dsc\"\n                        ) {\n                          <div\n                            class=\"right_click_item\"\n                            (click)=\"onSort(col, '', $index)\"\n                          >\n                            <div class=\"left_item\">\n                              <img src=\"images/trash-2.svg\" />\n                              <span class=\"text\">Clear Sort</span>\n                            </div>\n                          </div>\n                        }\n                        <div class=\"divder\"></div>\n\n                        <div\n                          class=\"right_click_item\"\n                          (mouseenter)=\"showPinActions($event)\"\n                          (mouseleave)=\"hidePinActions()\"\n                        >\n                          <div class=\"left_item\">\n                            <img src=\"images/pin.svg\" />\n                            <span class=\"text\">Pin Column</span>\n                          </div>\n                          <div class=\"right_item\">\n                            <img src=\"images/chevron-right.svg\" />\n                            @if (showPin) {\n                              <div class=\"second_dropdown\" #pinMenu>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'none')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      (pinActionClicked[col.colId] ??\n                                        \"none\") === \"none\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">No Pin</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'left')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"left\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Left</span>\n                                  </div>\n                                </div>\n                                <div\n                                  (click)=\"pinColumn(col, $index, 'right')\"\n                                  class=\"right_click_item\"\n                                >\n                                  <div class=\"left_item\">\n                                    @if (\n                                      pinActionClicked[col.colId] === \"right\"\n                                    ) {\n                                      <img src=\"images/check.svg\" />\n                                    } @else {\n                                      <img src=\"\" alt=\"\" />\n                                    }\n                                    <span class=\"text\">Pin Right</span>\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        <!-- <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'left')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">{{\n                           col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n                         }}</span>\n                       </div>\n                     </div>\n                     <div\n                       class=\"right_click_item\"\n                       (click)=\"pinColumn(col, $index, 'right')\"\n                     >\n                       <div class=\"left_item\">\n                         <img src=\"images/pin.svg\" />\n                         <span class=\"text\">\n                           {{\n                             col.rightPinned\n                               ? \"Unpin Right Column\"\n                               : \"Pin Column Right\"\n                           }}\n                         </span>\n                       </div>\n                       <div class=\"right_item\">\n                         <img src=\"images/arrow-right.svg\" alt=\"\" />\n                       </div>\n                     </div> -->\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize This Column</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Autosize All Columns</span>\n                          </div>\n                        </div>\n                        <div\n                          class=\"right_click_item\"\n                          [ngClass]=\"{\n                            disabled_option:\n                              !groupByRequired || col.disableGrouping,\n                          }\"\n                        >\n                          <div\n                            class=\"left_item\"\n                            (click)=\"groupByColumnAction(col, $index)\"\n                          >\n                            <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n                            <span class=\"text\"\n                              >Group by {{ col.headerName }}</span\n                            >\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"images/t-choose-column.svg\" alt=\"\" />\n                            <span class=\"text\">Choose Columns</span>\n                          </div>\n                        </div>\n                        <div class=\"right_click_item\">\n                          <div class=\"left_item\">\n                            <img src=\"\" alt=\"\" />\n                            <span class=\"text\">Reset Columns</span>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @if (groupedResult && groupedResult.length > 0) {\n            @for (group of groupedResult; track group.key) {\n              <tr (click)=\"toggleGroup(group)\">\n                <td\n                  class=\"group-cell\"\n                  [attr.colspan]=\"\n                    colDefs.length +\n                    (checkBoxSelection ? 1 : 0) +\n                    (activeGroups.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <span class=\"group-toggle\">\n                    <img\n                      src=\"images/{{\n                        group.expanded\n                          ? 'chevron-down.svg'\n                          : 'chevron-right.svg'\n                      }}\"\n                    />\n                    {{ group.key }} ({{ group.children.length }})\n                  </span>\n                </td>\n              </tr>\n\n              @if (group.expanded) {\n                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n                @if (group.children[0]?.children) {\n                  @for (child of group.children; track child.key) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: child,\n                        colDefs: colDefs,\n                        checkBoxSelection: checkBoxSelection,\n                        activeGroups: activeGroups,\n                        level: 1,\n                      }\"\n                    ></ng-container>\n                  }\n                }\n\n                <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n                @if (!group.children[0]?.children) {\n                  @for (row of group.children; track row.rowId) {\n                    <tr [ngClass]=\"row | addClass: tableOptions\">\n                      <!-- Checkbox column if any -->\n                      @if (checkBoxSelection) {\n                        <td>\n                          <span class=\"checkbox_container\">\n                            <input\n                              class=\"custom_check_box\"\n                              type=\"checkbox\"\n                              [checked]=\"row.isSelected\"\n                          /></span>\n                        </td>\n                      }\n                      @if (activeGroups.length > 0) {\n                        <td class=\"group-placeholder\"></td>\n                      }\n\n                      <!-- Render columns -->\n                      @for (col of colDefs; track col.colId) {\n                        <td\n                          [ngStyle]=\"getStyle(col)\"\n                          [ngClass]=\"[\n                            col?.addClass ? col.addClass(row) : '',\n                            col.leftPinned || col.rightPinned\n                              ? 'pinned_column'\n                              : '',\n                          ]\"\n                        >\n                          <!-- {{ row[col.fieldName] }} -->\n                          @if (!col?.cellRenderer) {\n                            <div class=\"cell-value ellipsis\">\n                              <div\n                                class=\"more_data_wrapper\"\n                                [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                              >\n                                {{ parseColValue(row, col) }}\n                              </div>\n                              <div class=\"see_more_data\" id=\"table_scroll\">\n                                <div class=\"item\">\n                                  <span class=\"desc\">\n                                    {{ parseColValue(row, col) }}</span\n                                  >\n                                </div>\n                              </div>\n                            </div>\n                          } @else {\n                            <div\n                              [rowParam]=\"row\"\n                              [col]=\"col\"\n                              [api]=\"tableOptions\"\n                              [currentValue]=\"row[col.fieldName]\"\n                              appRendererParser\n                            ></div>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              }\n            }\n          } @else {\n            @for (data of rowData; track data.rowId) {\n              <tr\n                [ngClass]=\"data | addClass: tableOptions\"\n                (dragover)=\"allowRowDrop($event)\"\n                (drop)=\"dropRow(data)\"\n                (click)=\"onRowClick(data)\"\n              >\n                @if (checkBoxSelection && atLeastOneColumnChecked) {\n                  <td style=\"min-width: 50px\">\n                    @if (checkboxSelectionType == \"multiple\") {\n                      <span class=\"checkbox_container\"\n                        ><input\n                          type=\"checkbox\"\n                          class=\"pointer custom_check_box\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [disabled]=\"data.isLocked\"\n                          [checked]=\"data.isSelected || data.isLocked\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                      /></span>\n                    } @else {\n                      <span class=\"radio_option\">\n                        <input\n                          type=\"radio\"\n                          name=\"\"\n                          id=\"{{ data.rowId }}\"\n                          [checked]=\"data?.isSelected\"\n                          (change)=\"onRowCheckboxSelection($event)\"\n                        />\n                        <label [for]=\"data.rowId\"></label>\n                      </span>\n                    }\n                  </td>\n                }\n                @for (col of colDefs; track col.colId) {\n                  @if (col.active) {\n                    <td\n                      (click)=\"onCellClick(data, col)\"\n                      (dblclick)=\"onCellDblClick(data, col)\"\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col?.addClass ? col.addClass(data) : '',\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                      class=\"table_cell\"\n                    >\n                      <div class=\"col_wrapper\">\n                        @if (isCellDblClicked[`${col.colId}-${data.rowId}`]) {\n                          <input\n                            [formControl]=\"cellClickedCtrl\"\n                            type=\"text\"\n                            name=\"cellClickedCtrl\"\n                            (blur)=\"onBlur()\"\n                            (keydown.enter)=\"onEnter()\"\n                          />\n                        }\n                        @if (\n                          rowGripFieldName &&\n                          rowGripFieldName === col?.fieldName\n                        ) {\n                          <div\n                            [draggable]=\"true\"\n                            (dragstart)=\"dragRow($event, data)\"\n                            class=\"gripper\"\n                          >\n                            <img class=\"gripper-img\" src=\"images/gripper.svg\" />\n                          </div>\n                        }\n\n                        @if (!col?.cellRenderer) {\n                          <div class=\"cell-value ellipsis\">\n                            <div\n                              class=\"more_data_wrapper\"\n                              [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                            >\n                              {{ parseColValue(data, col) }}\n                            </div>\n                            <div class=\"see_more_data\" id=\"table_scroll\">\n                              <div class=\"item\">\n                                <span class=\"desc\">\n                                  {{ parseColValue(data, col) }}</span\n                                >\n                              </div>\n                            </div>\n                          </div>\n                        } @else {\n                          <div\n                            [rowParam]=\"data\"\n                            [col]=\"col\"\n                            [api]=\"tableOptions\"\n                            [currentValue]=\"data[col.fieldName]\"\n                            appRendererParser\n                          ></div>\n                        }\n                      </div>\n                      <!-- Commented for later use -->\n                      <!-- <div class=\"tool_tip\">\n                <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n              </div> -->\n                    </td>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tbody>\n\n        <ng-template\n          #groupTemplate\n          let-node\n          let-colDefs=\"colDefs\"\n          let-checkBoxSelection=\"checkBoxSelection\"\n          let-activeGroups=\"activeGroups\"\n          let-level=\"level\"\n        >\n          <!-- GROUP HEADER -->\n          <tr (click)=\"toggleGroup(node)\">\n            <td\n              [attr.colspan]=\"\n                colDefs.length +\n                (checkBoxSelection ? 1 : 0) +\n                (activeGroups.length > 0 ? 1 : 0)\n              \"\n              [style.paddingLeft.px]=\"level * 20\"\n              class=\"group-cell\"\n            >\n              <span class=\"group-toggle\">\n                <img\n                  src=\"images/{{\n                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n                  }}\"\n                />\n                {{ node.key }} ({{ node.children.length }})\n              </span>\n            </td>\n          </tr>\n\n          <!-- CHILDREN -->\n          @if (node.expanded) {\n            <!-- CASE: more groups -->\n            @if (node.children[0]?.children) {\n              @for (child of node.children; track child.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"groupTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: child,\n                    colDefs: colDefs,\n                    checkBoxSelection: checkBoxSelection,\n                    activeGroups: activeGroups,\n                    level: level + 1,\n                  }\"\n                >\n                </ng-container>\n              }\n            }\n\n            <!-- CASE: final rows -->\n            @if (!node.children[0]?.children) {\n              @for (row of node.children; track row.rowId) {\n                <tr [ngClass]=\"row | addClass: tableOptions\">\n                  <!-- Checkbox column if any -->\n                  @if (checkBoxSelection) {\n                    <td>\n                      <span class=\"checkbox_container\">\n                        <input\n                          type=\"checkbox custom_check_box\"\n                          [checked]=\"row.isSelected\"\n                      /></span>\n                    </td>\n                  }\n                  @if (activeGroups.length > 0) {\n                    <td class=\"group-placeholder\"></td>\n                  }\n\n                  <!-- Render columns -->\n                  @for (col of colDefs; track col.colId) {\n                    <td\n                      [ngStyle]=\"getStyle(col)\"\n                      [ngClass]=\"[\n                        col.leftPinned || col.rightPinned\n                          ? 'pinned_column'\n                          : '',\n                      ]\"\n                    >\n                      <!-- {{ row[col.fieldName] }} -->\n                      @if (!col?.cellRenderer) {\n                        <div class=\"cell-value ellipsis\">\n                          <div\n                            class=\"more_data_wrapper\"\n                            [ngClass]=\"{ ellipsis: !col.wrapText }\"\n                          >\n                            {{ parseColValue(row, col) }}\n                          </div>\n                          <div class=\"see_more_data\" id=\"table_scroll\">\n                            <div class=\"item\">\n                              <span class=\"desc\">\n                                {{ parseColValue(row, col) }}</span\n                              >\n                            </div>\n                          </div>\n                        </div>\n                      } @else {\n                        <div\n                          [rowParam]=\"row\"\n                          [col]=\"col\"\n                          [api]=\"tableOptions\"\n                          [currentValue]=\"row[col.fieldName]\"\n                          appRendererParser\n                        ></div>\n                      }\n                    </td>\n                  }\n                </tr>\n              }\n            }\n          }\n        </ng-template>\n      </table>\n\n      @if (\n        (!rowData || rowData.length === 0) &&\n        (!groupedResult || groupedResult.length === 0)\n      ) {\n        <div class=\"empty_overlay\">\n          <div class=\"empty_content\">\n            @if (tableOptions?.noDataTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n              ></ng-container>\n            } @else {\n              <span>No Data To Show</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n  <!--  Table Wrapper Ends-->\n  @if (paginationRequired) {\n    <div class=\"pagination_main\">\n      <div class=\"entries_details\">\n        <span>Showing</span>\n        <div class=\"pagination_select\">\n          <div\n            class=\"select_dropdown pointer\"\n            (click)=\"showPageSizeList = !showPageSizeList\"\n          >\n            <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n            <span class=\"chevron_img\">\n              <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n            </span>\n          </div>\n          @if (showPageSizeList) {\n            <div\n              class=\"select_option\"\n              appOutsideClick\n              (clickOutside)=\"onClickOutside()\"\n            >\n              @for (option of pageSizeList; track $index) {\n                <span\n                  class=\"pointer\"\n                  (click)=\"onPageSizeChanged(option); onClickOutside()\"\n                  >{{ option }}</span\n                >\n              }\n            </div>\n          }\n        </div>\n        <span\n          >Rows |\n          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n          {{\n            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n          }}\n          of\n          {{ totalRecords }} Entries</span\n        >\n      </div>\n      <div class=\"pagination_form\">\n        <!-- <span>Page</span> -->\n\n        <button\n          class=\"outlined_btn first_btn\"\n          type=\"button\"\n          (click)=\"onBtFirstClick()\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n        >\n          <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n        </button>\n        <button\n          class=\"outlined_btn prev_btn\"\n          [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n          type=\"button\"\n          (click)=\"onBtPrevClick()\"\n        >\n          <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n        </button>\n        <div>\n          <input\n            class=\"input_style\"\n            type=\"number\"\n            [(ngModel)]=\"pageDetails.currentPage\"\n            (change)=\"goToSelectedPage($event)\"\n            name=\"\"\n            id=\"\"\n          />\n        </div>\n        <button\n          class=\"outlined_btn next_btn\"\n          type=\"button\"\n          [ngClass]=\"\n            pageDetails.currentPage < pageDetails.totalPages\n              ? ''\n              : 'disable_btn'\n          \"\n          (click)=\"onBtNextClick()\"\n        >\n          <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n        </button>\n        <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n        <button\n          class=\"outlined_btn last_btn\"\n          type=\"button\"\n          (click)=\"onBtLastClick()\"\n          [ngClass]=\"\n            pageDetails.currentPage < pageDetails.totalPages\n              ? ''\n              : 'disable_btn'\n          \"\n        >\n          <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n        </button>\n      </div>\n    </div>\n  }\n  <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"dropdown_wrapper d-none\">\n  <div class=\"right_click_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/scissors.svg\" />\n        <span class=\"text\">Cut</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+X</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+C</span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/copy.svg\" alt=\"\" />\n        <span class=\"text\">Copy with Group Headers</span>\n      </div>\n      <span class=\"right_item\"></span>\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/clipboard.svg\" alt=\"\" />\n        <span class=\"text\">Paste</span>\n      </div>\n\n      <span class=\"right_item\">Ctrl+V</span>\n    </div>\n\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\n        <span class=\"text\">Chart</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/download.svg\" alt=\"\" />\n        <span class=\"text\">Export</span>\n      </div>\n\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Chart section Start Here -->\n  <div class=\"second_dropdown\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <span class=\"text\">Column</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Bar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Pie</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Line</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Area</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">XY(Scatter)</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Polar</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stastical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Hierarchical</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Specialized</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Funnel</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Combination</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Export Section start Here -->\n  <div class=\"export_section d-none\">\n    <div class=\"right_click_item active\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">CSV Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <img src=\"images/file.svg\" alt=\"\" />\n        <span class=\"text\">Excel Report</span>\n      </div>\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\n    </div>\n  </div>\n\n  <!-- Column Group Section Start Here -->\n  <div class=\"third_dropdown\">\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Grouped</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">Stacked</span>\n      </div>\n    </div>\n    <div class=\"right_click_item\">\n      <div class=\"left_item\">\n        <span class=\"text\">100% Stacked</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0}.tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}.tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--neutral-500);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table td.pinned_column,.tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.tableArea .table_wrapper table td .cell-value.ellipsis,.tableArea .table_wrapper table td .cell-value .ellipsis,.tableArea .table_wrapper table th .cell-value.ellipsis,.tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.tableArea .table_wrapper table td .cell-value.ellipsis:hover .see_more_data,.tableArea .table_wrapper table th .cell-value.ellipsis:hover .see_more_data{display:flex}.tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-500)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--neutral-50)}.tableArea .table_wrapper table thead th:nth-last-child(2) .second_dropdown,.tableArea .table_wrapper table thead th:nth-last-child(3) .second_dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.tableArea .table_wrapper table thead th:last-child .th_wraper{border:0}.tableArea .table_wrapper table thead th:hover .none{display:block}.tableArea .table_wrapper table thead th:hover .up,.tableArea .table_wrapper table thead th:hover .down{display:none}.tableArea .table_wrapper table tbody{background-color:var(--white)}.tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--neutral-50)}.tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr:hover,.tableArea .table_wrapper table tbody tr:hover td{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{bottom:calc(2.1666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.tableArea .table_wrapper table tbody tr td:hover{background-color:var(--blue-100)!important}.tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--blue-600)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td .gripper{cursor:grab}.tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale));width:inherit;max-width:-webkit-fill-available}.tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th_wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th_wraper .text_wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th_wraper .text_wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th_wraper .filter_three_dot_wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th_wraper .filter_three_dot_wrapper .filters:hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:0;left:0;width:calc(18.8333333333rem / var(--scale));background:var(--neutral-50);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper lib-common-input{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details{width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .set_option_details .set_options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--white);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.th_wraper .filter_three_dot_wrapper .filt_wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th_wraper .filter_three_dot_wrapper .three-dots :hover{background:var(--neutral-200);border-radius:calc(.1666666667rem / var(--scale))}.th_wraper .filter_three_dot_wrapper .resize-handle{color:var(--neutral-200);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th_wraper .filter_three_dot_wrapper .default_cursor{cursor:default}.active_filters_container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1.3333333333rem / var(--scale));padding:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-left:0;border-right:0;border-bottom:0}.active_filters_container .tag_wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 10.8333333333rem / var(--scale));overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.active_filters_container .tag_wrapper .active_filter_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(2.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .active_filter_label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;max-width:calc(29.1666666667rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .filter_logic{font-size:var(--fs-12);line-height:calc(1.3333333333rem / var(--scale));font-weight:500;color:var(--neutral-400)}.active_filters_container .tag_wrapper .active_filter_tag .filter_value{padding-left:calc(.3333333333rem / var(--scale))}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active_filters_container .tag_wrapper .active_filter_tag .remove_filter_btn img{max-width:calc(1.3333333333rem / var(--scale))}.active_filters_container .clear_all{font-size:var(--fs-16);line-height:calc(1.5rem / var(--scale));font-weight:500;color:var(--blue-600);cursor:pointer}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination_main .entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select{position:relative}.pagination_main .entries_details .pagination_select .select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination_main .entries_details .pagination_select .select_dropdown .chevron_img img{width:calc(1.3333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--white);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination_main .entries_details .pagination_select .select_option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination_main .entries_details .pagination_select .select_option span:hover{background-color:var(--blue-100)}.pagination_main .pagination_form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination_main .pagination_form .prev_btn,.pagination_main .pagination_form .next_btn,.pagination_main .pagination_form .first_btn,.pagination_main .pagination_form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .pagination_form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-500);cursor:pointer}.pagination_main .pagination_form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--neutral-200)}.pagination_main .pagination_form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination_main .pagination_form .input_style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));color:var(--neutral-600);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--white);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.d-none{display:none}.group_panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--neutral-50);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(0rem / var(--scale));border-left:0;border-right:0;border-bottom:0;height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.group_panel img.divider:last-child{display:none}.group_panel .group_tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;cursor:grab}.group_panel .group_tag .remove_tag{border:0;padding:0;cursor:pointer}.group_panel .group_placeholder{color:var(--neutral-500)}.group_panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--neutral-600);cursor:pointer}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--blue-100);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.dropdown_wrapper{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:0}.dropdown_wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--neutral-300)}.dropdown_wrapper .right_click_dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.dropdown_wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.dropdown_wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.dropdown_wrapper .right_click_item:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-100)}.dropdown_wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.dropdown_wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-600)}.dropdown_wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500)}.dropdown_wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.dropdown_wrapper .right_click_item .right_chevron{stroke:var(--neutral-400)}.second_dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting_options{position:absolute;background:var(--white);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);width:calc(20.8333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.setting_options .column_header{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;height:calc(2.5rem / var(--scale));color:var(--neutral-600)}.setting_options .item_container{max-height:calc(16.6666666667rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale))}.setting_options .item_container .column_item{color:var(--neutral-600);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;height:calc(1.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.disable_group{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { pinMenu: [{
                 type: ViewChild,
                 args: ['pinMenu']
@@ -2523,6 +2683,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }], onHideSettings: [{
                 type: Output
+            }], onCellEdit: [{
+                type: Output
+            }], onColCongifgChange: [{
+                type: Output
             }], pageSizeList: [{
                 type: Input
             }], groupByField: [{
@@ -2840,7 +3004,7 @@ class CommonRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\n@if (type === \"switch\") {\n  <div class=\"table_switch_wrapper\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n  <div class=\"action-menu\">\n    <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n      <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n    </button>\n\n    @if (openActionMenu) {\n      <div\n        class=\"menu\"\n        appOutsideClick\n        (clickOutside)=\"clickOutside($event)\"\n        adaptivePosition\n        [trigger]=\"tagTrigger\"\n        [isAction]=\"true\"\n        [matchWidth]=\"false\"\n      >\n        <div class=\"item_wrapper\" id=\"table_scroll\">\n          @for (act of actions; track $index) {\n            <div\n              class=\"{{ 'menu_item' + ' ' + act.class }}\"\n              [ngClass]=\"{\n                disabled_item:\n                  params?.data?.disabledActions?.includes(act.label) ||\n                  act.disabled,\n              }\"\n              (click)=\"onActionClick(act)\"\n            >\n              @if (act.icon) {\n                <img src=\"images/{{ act.icon }}.svg\" />\n              } @else {\n                <img src=\"{{ act?.image }}\" />\n              }\n\n              <span class=\"ellipsis\">{{ act.label }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n  <div\n    class=\"tag_wrapper\"\n    (mouseover)=\"toggleDropdown($event)\"\n    (mouseout)=\"closeDropdown($event)\"\n    #tagTrigger\n  >\n    @for (tag of visibleTags; track $index) {\n      <div\n        class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n        [ngClass]=\"paramsVal | addClass: params.cellParams\"\n      >\n      @if(subType === 'bedge') {\n        <span class=\"circle\" [class]=\"tag.bedgeClass\"></span>\n      }\n      @if(tag.image){\n        <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n      }\n        \n\n        <div class=\"more_data_section\">\n          <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n          <div class=\"cell-value ellipsis\">\n            <div class=\"more_data_wrapper textTruncate\">\n              {{ tag.tagValue }}\n            </div>\n            <div class=\"see_more_data\" id=\"table_scroll\">\n              <div class=\"item\">\n                <span class=\"desc\"> {{ tag.tagValue }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (hiddenCount > 0) {\n      <div class=\"hidden_list\">\n        <span class=\"tag_more\">+{{ hiddenCount }}</span>\n        @if (openDropdown) {\n          <div\n            class=\"tag_dropdown\"\n            id=\"table_scroll\"\n            adaptivePosition\n            [trigger]=\"tagTrigger\"\n            [matchWidth]=\"false\"\n          >\n            @for (tag of allTags; track $index) {\n              <div\n                class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n              >\n                {{ tag.tagValue }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (type === \"link\") {\n  <div class=\"more_data_section cell-value ellipsis\">\n    <!-- @for (link of linkVal; track $index) { -->\n    <div class=\"more_data_wrapper textTruncate\">\n      <span\n        class=\"grid-link\"\n        (click)=\"linkSingleClick()\"\n        (dblclick)=\"linkDoubleClick()\"\n      >\n        {{ linkVal }}\n      </span>\n    </div>\n    <div class=\"see_more_data\" id=\"table_scroll\">\n      <div class=\"item\">\n        <span class=\"desc\"> {{ linkVal }}</span>\n      </div>\n    </div>\n    <!-- } -->\n  </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));position:relative}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;right:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}.cell-value{line-height:calc(1.5rem / var(--scale))!important}.cell-value.ellipsis,.cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cell-value.ellipsis:hover .see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.grid-link{color:var(--blue-700);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}.grid-link:hover{text-decoration:underline}.grid-link:active{opacity:.8}.grid-link:focus{outline:none;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonRendererComponent, isStandalone: true, selector: "lib-common-renderer", ngImport: i0, template: "<!-- Switch -->\n@if (type === \"switch\") {\n  <div class=\"table_switch_wrapper\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n  <div class=\"action-menu\">\n    <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n      <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n    </button>\n\n    @if (openActionMenu) {\n      <div\n        class=\"menu\"\n        appOutsideClick\n        (clickOutside)=\"clickOutside($event)\"\n        adaptivePosition\n        [trigger]=\"tagTrigger\"\n        [isAction]=\"true\"\n        [matchWidth]=\"false\"\n      >\n        <div class=\"item_wrapper\" id=\"table_scroll\">\n          @for (act of actions; track $index) {\n            <div\n              class=\"{{ 'menu_item' + ' ' + act.class }}\"\n              [ngClass]=\"{\n                disabled_item:\n                  params?.data?.disabledActions?.includes(act.label) ||\n                  act.disabled,\n              }\"\n              (click)=\"onActionClick(act)\"\n            >\n              @if (act.icon) {\n                <img src=\"images/{{ act.icon }}.svg\" />\n              } @else {\n                <img src=\"{{ act?.image }}\" />\n              }\n\n              <span class=\"ellipsis\">{{ act.label }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n  <div\n    class=\"tag_wrapper\"\n    (mouseover)=\"toggleDropdown($event)\"\n    (mouseout)=\"closeDropdown($event)\"\n    #tagTrigger\n  >\n    @for (tag of visibleTags; track $index) {\n      <div\n        class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n        [ngClass]=\"paramsVal | addClass: params.cellParams\"\n      >\n      @if(subType === 'badge') {\n        <span class=\"circle\" [class]=\"tag.badgeClass\"></span>\n      }\n      @if(tag.image){\n        <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n      }\n        \n\n        <div class=\"more_data_section\">\n          <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n          <div class=\"cell-value ellipsis\">\n            <div class=\"more_data_wrapper textTruncate\">\n              {{ tag.tagValue }}\n            </div>\n            <div class=\"see_more_data\" id=\"table_scroll\">\n              <div class=\"item\">\n                <span class=\"desc\"> {{ tag.tagValue }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (hiddenCount > 0) {\n      <div class=\"hidden_list\">\n        <span class=\"tag_more\">+{{ hiddenCount }}</span>\n        @if (openDropdown) {\n          <div\n            class=\"tag_dropdown\"\n            id=\"table_scroll\"\n            adaptivePosition\n            [trigger]=\"tagTrigger\"\n            [matchWidth]=\"false\"\n          >\n            @for (tag of allTags; track $index) {\n              <div\n                class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n              >\n                {{ tag.tagValue }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (type === \"link\") {\n  <div class=\"more_data_section cell-value ellipsis\">\n    <!-- @for (link of linkVal; track $index) { -->\n    <div class=\"more_data_wrapper textTruncate\">\n      <span\n        class=\"grid-link\"\n        (click)=\"linkSingleClick()\"\n        (dblclick)=\"linkDoubleClick()\"\n      >\n        {{ linkVal }}\n      </span>\n    </div>\n    <div class=\"see_more_data\" id=\"table_scroll\">\n      <div class=\"item\">\n        <span class=\"desc\"> {{ linkVal }}</span>\n      </div>\n    </div>\n    <!-- } -->\n  </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));position:relative}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;right:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}.cell-value{line-height:calc(1.5rem / var(--scale))!important}.cell-value.ellipsis,.cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cell-value.ellipsis:hover .see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.grid-link{color:var(--blue-700);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}.grid-link:hover{text-decoration:underline}.grid-link:active{opacity:.8}.grid-link:focus{outline:none;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonRendererComponent, decorators: [{
             type: Component,
@@ -2849,7 +3013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AdaptivePositionDirective,
                         CommonModule,
                         AddClassPipe,
-                    ], template: "<!-- Switch -->\n@if (type === \"switch\") {\n  <div class=\"table_switch_wrapper\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n  <div class=\"action-menu\">\n    <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n      <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n    </button>\n\n    @if (openActionMenu) {\n      <div\n        class=\"menu\"\n        appOutsideClick\n        (clickOutside)=\"clickOutside($event)\"\n        adaptivePosition\n        [trigger]=\"tagTrigger\"\n        [isAction]=\"true\"\n        [matchWidth]=\"false\"\n      >\n        <div class=\"item_wrapper\" id=\"table_scroll\">\n          @for (act of actions; track $index) {\n            <div\n              class=\"{{ 'menu_item' + ' ' + act.class }}\"\n              [ngClass]=\"{\n                disabled_item:\n                  params?.data?.disabledActions?.includes(act.label) ||\n                  act.disabled,\n              }\"\n              (click)=\"onActionClick(act)\"\n            >\n              @if (act.icon) {\n                <img src=\"images/{{ act.icon }}.svg\" />\n              } @else {\n                <img src=\"{{ act?.image }}\" />\n              }\n\n              <span class=\"ellipsis\">{{ act.label }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n  <div\n    class=\"tag_wrapper\"\n    (mouseover)=\"toggleDropdown($event)\"\n    (mouseout)=\"closeDropdown($event)\"\n    #tagTrigger\n  >\n    @for (tag of visibleTags; track $index) {\n      <div\n        class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n        [ngClass]=\"paramsVal | addClass: params.cellParams\"\n      >\n      @if(subType === 'bedge') {\n        <span class=\"circle\" [class]=\"tag.bedgeClass\"></span>\n      }\n      @if(tag.image){\n        <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n      }\n        \n\n        <div class=\"more_data_section\">\n          <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n          <div class=\"cell-value ellipsis\">\n            <div class=\"more_data_wrapper textTruncate\">\n              {{ tag.tagValue }}\n            </div>\n            <div class=\"see_more_data\" id=\"table_scroll\">\n              <div class=\"item\">\n                <span class=\"desc\"> {{ tag.tagValue }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (hiddenCount > 0) {\n      <div class=\"hidden_list\">\n        <span class=\"tag_more\">+{{ hiddenCount }}</span>\n        @if (openDropdown) {\n          <div\n            class=\"tag_dropdown\"\n            id=\"table_scroll\"\n            adaptivePosition\n            [trigger]=\"tagTrigger\"\n            [matchWidth]=\"false\"\n          >\n            @for (tag of allTags; track $index) {\n              <div\n                class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n              >\n                {{ tag.tagValue }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (type === \"link\") {\n  <div class=\"more_data_section cell-value ellipsis\">\n    <!-- @for (link of linkVal; track $index) { -->\n    <div class=\"more_data_wrapper textTruncate\">\n      <span\n        class=\"grid-link\"\n        (click)=\"linkSingleClick()\"\n        (dblclick)=\"linkDoubleClick()\"\n      >\n        {{ linkVal }}\n      </span>\n    </div>\n    <div class=\"see_more_data\" id=\"table_scroll\">\n      <div class=\"item\">\n        <span class=\"desc\"> {{ linkVal }}</span>\n      </div>\n    </div>\n    <!-- } -->\n  </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));position:relative}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;right:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}.cell-value{line-height:calc(1.5rem / var(--scale))!important}.cell-value.ellipsis,.cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cell-value.ellipsis:hover .see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.grid-link{color:var(--blue-700);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}.grid-link:hover{text-decoration:underline}.grid-link:active{opacity:.8}.grid-link:focus{outline:none;text-decoration:underline}\n"] }]
+                    ], template: "<!-- Switch -->\n@if (type === \"switch\") {\n  <div class=\"table_switch_wrapper\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" [checked]=\"value\" (change)=\"onToggle($event)\" />\n      <span class=\"slider\"></span>\n    </label>\n  </div>\n}\n\n<!-- Action Menu -->\n\n@if (type === \"action-menu\") {\n  <div class=\"action-menu\">\n    <button class=\"action_dots\" (click)=\"onThreeDotsMenuClick()\" #tagTrigger>\n      <img src=\"images/more-{{ actionSubType || 'vertical' }}.svg\" />\n    </button>\n\n    @if (openActionMenu) {\n      <div\n        class=\"menu\"\n        appOutsideClick\n        (clickOutside)=\"clickOutside($event)\"\n        adaptivePosition\n        [trigger]=\"tagTrigger\"\n        [isAction]=\"true\"\n        [matchWidth]=\"false\"\n      >\n        <div class=\"item_wrapper\" id=\"table_scroll\">\n          @for (act of actions; track $index) {\n            <div\n              class=\"{{ 'menu_item' + ' ' + act.class }}\"\n              [ngClass]=\"{\n                disabled_item:\n                  params?.data?.disabledActions?.includes(act.label) ||\n                  act.disabled,\n              }\"\n              (click)=\"onActionClick(act)\"\n            >\n              @if (act.icon) {\n                <img src=\"images/{{ act.icon }}.svg\" />\n              } @else {\n                <img src=\"{{ act?.image }}\" />\n              }\n\n              <span class=\"ellipsis\">{{ act.label }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Tags -->\n\n@if (type === \"tag\") {\n  <div\n    class=\"tag_wrapper\"\n    (mouseover)=\"toggleDropdown($event)\"\n    (mouseout)=\"closeDropdown($event)\"\n    #tagTrigger\n  >\n    @for (tag of visibleTags; track $index) {\n      <div\n        class=\"{{ 'tag_chip' + ' ' + tag.class }}\"\n        [ngClass]=\"paramsVal | addClass: params.cellParams\"\n      >\n      @if(subType === 'badge') {\n        <span class=\"circle\" [class]=\"tag.badgeClass\"></span>\n      }\n      @if(tag.image){\n        <img src=\"{{ tag.image }}\" alt=\"\" class=\"icon\" />\n      }\n        \n\n        <div class=\"more_data_section\">\n          <!-- <span class=\"textTruncate\"> {{ tag.tagValue }}</span> -->\n          <div class=\"cell-value ellipsis\">\n            <div class=\"more_data_wrapper textTruncate\">\n              {{ tag.tagValue }}\n            </div>\n            <div class=\"see_more_data\" id=\"table_scroll\">\n              <div class=\"item\">\n                <span class=\"desc\"> {{ tag.tagValue }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (hiddenCount > 0) {\n      <div class=\"hidden_list\">\n        <span class=\"tag_more\">+{{ hiddenCount }}</span>\n        @if (openDropdown) {\n          <div\n            class=\"tag_dropdown\"\n            id=\"table_scroll\"\n            adaptivePosition\n            [trigger]=\"tagTrigger\"\n            [matchWidth]=\"false\"\n          >\n            @for (tag of allTags; track $index) {\n              <div\n                class=\"{{ 'dropdown_item' + ' ' + tag.class }}\"\n              >\n                {{ tag.tagValue }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n@if (type === \"link\") {\n  <div class=\"more_data_section cell-value ellipsis\">\n    <!-- @for (link of linkVal; track $index) { -->\n    <div class=\"more_data_wrapper textTruncate\">\n      <span\n        class=\"grid-link\"\n        (click)=\"linkSingleClick()\"\n        (dblclick)=\"linkDoubleClick()\"\n      >\n        {{ linkVal }}\n      </span>\n    </div>\n    <div class=\"see_more_data\" id=\"table_scroll\">\n      <div class=\"item\">\n        <span class=\"desc\"> {{ linkVal }}</span>\n      </div>\n    </div>\n    <!-- } -->\n  </div>\n}\n", styles: [":root{--white: #ffffff;--pagination-text: var(--neutral-500);--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-300: #c8dff9;--blue-600: #2680ea;--blue-700: #1c60af;--grey-50: #e9eaeb;--green-100: #ecf4ec;--green-200: #e1eee2;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-100: #faeaea;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-100: #fff9e7;--yellow-300: #ffefc1;--yellow-700: #bf9105;--orange-600: #ff9800;--box-shadow: #0a0d1214}html{font-size:12px}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--neutral-200);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--neutral-500);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--neutral-100);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-100) 72.5%,var(--neutral-100) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--neutral-200) 70.5%,var(--neutral-200) 72.5%,var(--neutral-300) 72.5%,var(--neutral-300) 100%)}.radio_option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:not(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:not(:checked)[disabled]+label:before{background-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label{color:var(--neutral-300);cursor:default}.radio_option [type=radio]:is(:checked)[disabled]+label:before{border-color:var(--neutral-100)}.radio_option [type=radio]:is(:checked)[disabled]+label:after{background-color:var(--neutral-100)}.radio_option [type=radio]:not(:checked)+label:before,.radio_option [type=radio]:checked+label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--white)}.radio_option [type=radio]:checked,.radio_option [type=radio]:not(:checked){position:absolute;left:-9999px}.radio_option [type=radio]:checked+label,.radio_option [type=radio]:not(:checked)+label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--neutral-600);line-height:calc(1.3333333333rem / var(--scale))}.radio_option [type=radio]:checked+label:before{border:calc(.125rem / var(--scale)) solid var(--blue-600);border-radius:100%}.radio_option [type=radio]:not(:checked)+label:before{border:calc(.125rem / var(--scale)) solid var(--neutral-200);border-radius:100%}.radio_option [type=radio]:checked+label:after,.radio_option [type=radio]:not(:checked)+label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--blue-600);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.radio_option [type=radio]:not(:checked)+label:after{opacity:0;transform:scale(0)}.radio_option [type=radio]:checked+label:after{opacity:1;transform:scale(1)}.checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.checkbox_container input[type=checkbox].custom_check_box[disabled],.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--white);position:relative;transition:all .2s ease}.checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--white);color:var(--neutral-600);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--white);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--neutral-600)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--neutral-50)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--white);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.search_input input::placeholder{color:var(--neutral-500)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--neutral-100);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--white);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--blue-600)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea.big .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.text-primary{color:var(--blue-600)}.text-danger{color:var(--red)!important}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.action-menu{position:relative;text-align:center}.action-menu .action_dots{background:transparent;border:none;cursor:pointer}.action-menu .action_dots img{max-width:calc(1.3333333333rem / var(--scale))}.action-menu .menu{background-color:var(--white);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));z-index:99;width:max-content;min-width:calc(10rem / var(--scale));max-width:calc(16.6666666667rem / var(--scale));position:absolute;top:calc(.8333333333rem / var(--scale))}.action-menu .menu .item_wrapper{position:relative;max-height:calc(20rem / var(--scale));overflow-y:auto;margin:calc(.3333333333rem / var(--scale)) 0}.action-menu .menu .item_wrapper .menu_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));cursor:pointer;position:relative;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--neutral-600)}.action-menu .menu .item_wrapper .menu_item.disabled_item{color:var(--neutral-300);pointer-events:none}.action-menu .menu .item_wrapper .menu_item.disabled_item img{opacity:.3}.action-menu .menu .item_wrapper .menu_item:hover{background-color:var(--blue-50)}.action-menu .menu .item_wrapper .menu_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.tag_wrapper .hidden_list .tag_more,.tag_wrapper .tag_chip{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);background-color:var(--white);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper{position:relative;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:6px}.tag_wrapper .more_data_wrapper{max-width:calc(12.5rem / var(--scale))}.tag_wrapper .tag_chip{white-space:nowrap;display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));position:relative}.tag_wrapper .tag_chip .circle{width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));border-radius:50%;background-color:var(--neutral-500)}.tag_wrapper .tag_chip .circle.bg_error{background-color:var(--red-700)}.tag_wrapper .tag_chip .circle.bg_pending{background-color:var(--yellow-700)}.tag_wrapper .tag_chip .circle.bg_active{background-color:var(--green-600)}.tag_wrapper .tag_chip .circle.bg_info{background-color:var(--blue-700)}.tag_wrapper .tag_chip .suffix{order:1}.tag_wrapper .tag_chip .icon{max-width:calc(1.3333333333rem / var(--scale));max-height:calc(1.3333333333rem / var(--scale))}.tag_wrapper .hidden_list{display:flex}.tag_wrapper .hidden_list .tag_more{cursor:pointer;background-color:var(--neutral-50)}.tag_wrapper .hidden_list .tag_dropdown{position:relative;top:100%;right:0;max-width:calc(15rem / var(--scale));min-width:calc(10rem / var(--scale));max-height:calc(18.3333333333rem / var(--scale));overflow:auto;overflow-x:hidden;background:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) var(--box-shadow);z-index:1;padding:calc(.6666666667rem / var(--scale));display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.tag_wrapper .hidden_list .tag_dropdown .dropdown_item{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--neutral-500);padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));width:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.3333333333rem / var(--scale))}.tag_wrapper .tag_chip.active,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.active{background-color:var(--green-100);border-color:var(--green-200);color:var(--green-700)}.tag_wrapper .tag_chip.pending,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.pending{background-color:var(--yellow-100);border-color:var(--yellow-300);color:var(--yellow-700)}.tag_wrapper .tag_chip.error,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.error{background-color:var(--red-100);border-color:var(--red-300);color:var(--red-700)}.tag_wrapper .tag_chip.info,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.info{background-color:var(--blue-100);border-color:var(--blue-300);color:var(--blue-700)}.tag_wrapper .tag_chip.disable,.tag_wrapper .hidden_list .tag_dropdown .dropdown_item.disable{background-color:var(--neutral-50);border-color:var(--neutral-300);color:var(--neutral-400);cursor:not-allowed}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep td:has(.action-menu:focus-within){z-index:15!important}.cell-value{line-height:calc(1.5rem / var(--scale))!important}.cell-value.ellipsis,.cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cell-value.ellipsis:hover .see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-word}.grid-link{color:var(--blue-700);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}.grid-link:hover{text-decoration:underline}.grid-link:active{opacity:.8}.grid-link:focus{outline:none;text-decoration:underline}\n"] }]
         }] });
 
 class TooltipComponent {