cats-data-grid 2.0.33 → 2.0.34

package/fesm2022/cats-data-grid.mjs

@@ -876,8 +876,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }] } });
 
+class ColDefs {
+    fieldName;
+    headerName;
+    width;
+    minWidth;
+    sortable = true;
+    filterable = true;
+    cellRenderer;
+}
 class CatsDataGridComponent {
     cd;
+    zone;
     tableOptions;
     totalRecords = 0;
     sortingRequired = true;
@@ -915,7 +925,7 @@ class CatsDataGridComponent {
     dragOverIndex = null;
     draggedIndex = null;
     originalColDefs = [];
-    filteredRowData = [];
+    // filteredRowData: any[] = [];
     filteredData = [];
     currentColumn;
     currentIndex;
@@ -953,18 +963,20 @@ class CatsDataGridComponent {
     ];
     showPin = false;
     pinActionClicked = {};
-    constructor(cd) {
+    constructor(cd, zone) {
         this.cd = cd;
+        this.zone = zone;
     }
     ngOnInit() {
-        this.originalRowData = structuredClone(this.rowData);
-        this.filteredRowData = structuredClone(this.rowData);
-        this.originalColDefs = [...this.colDefs];
+        // this.originalRowData = structuredClone(this.rowData);
+        // this.filteredRowData = structuredClone(this.rowData);
+        // this.originalColDefs = [...this.colDefs];
     }
     ngOnChanges(changes) {
         if (changes['colDefs']?.currentValue) {
             this.resetTableConfig();
             this.colDefs = this.getUpdatedColDefs(changes['colDefs']?.currentValue);
+            this.originalColDefs = [...this.colDefs];
         }
         if (changes['totalRecords']?.currentValue) {
             this.setPageCount();
@@ -979,6 +991,11 @@ class CatsDataGridComponent {
                 return row;
             });
             // this.originalRowData = structuredClone(this.rowData);
+            // this.filteredRowData = structuredClone(this.rowData);
+            if (!this.activeFilters.size) {
+                this.originalRowData = structuredClone(this.rowData);
+            }
+            console.log(this.activeFilters.size);
             this.getGroupedData();
         }
     }
@@ -1406,9 +1423,38 @@ class CatsDataGridComponent {
         this.resizingColumnIndex = index;
         this.startX = event.clientX;
         this.startWidth = this.colDefs[index].width;
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseup', this.stopResize);
+        this.zone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', this.onMouseMove);
+            document.addEventListener('mouseup', this.stopResize);
+        });
     }
+    // startResize(event: MouseEvent, index: number) {
+    //   event.preventDefault();
+    //   this.isResizing = true;
+    //   this.resizingColumnIndex = index;
+    //   this.startX = event.clientX;
+    //   this.startWidth = this.colDefs[index].width;
+    //   document.addEventListener('mousemove', this.onMouseMove);
+    //   document.addEventListener('mouseup', this.stopResize);
+    // }
+    /**
+     * @description Handles column resizing as the mouse moves.
+     * @author Anand Pandey
+     * @param {MouseEvent} event - Mouse movement event during resizing.
+     * @returns {void}
+     */
+    // onMouseMove = (event: MouseEvent) => {
+    //   if (
+    //     this.resizingColumnIndex === null ||
+    //     this.resizingColumnIndex === undefined
+    //   )
+    //     return;
+    //   const movement = event.clientX - this.startX;
+    //   const newWidth = this.startWidth + movement;
+    //   if (newWidth > 50) {
+    //     this.colDefs[this.resizingColumnIndex].width = newWidth;
+    //   }
+    // };
     /**
      * @description Handles column resizing as the mouse moves.
      * @author Anand Pandey
@@ -1416,13 +1462,15 @@ class CatsDataGridComponent {
      * @returns {void}
      */
     onMouseMove = (event) => {
-        if (this.resizingColumnIndex === null ||
-            this.resizingColumnIndex === undefined)
+        if (this.resizingColumnIndex == null)
             return;
         const movement = event.clientX - this.startX;
         const newWidth = this.startWidth + movement;
         if (newWidth > 50) {
-            this.colDefs[this.resizingColumnIndex].width = newWidth;
+            this.zone.run(() => {
+                this.colDefs[this.resizingColumnIndex].width = newWidth;
+                this.cd.markForCheck();
+            });
         }
     };
     /**
@@ -2093,8 +2141,8 @@ class CatsDataGridComponent {
     dateTimeSelected(date) {
         this.applyAllFilters();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n  @if(groupByRequired){\r\n  <!-- Group Panel -->\r\n  <div\r\n    class=\"group_panel\"\r\n    (dragover)=\"onGroupDragOver($event)\"\r\n    (drop)=\"onGroupDrop($event)\"\r\n  >\r\n    <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n    @for(g of activeGroups; track $index){\r\n    <div\r\n      class=\"group_tag\"\r\n      draggable=\"true\"\r\n      (dragstart)=\"onGroupDragStart($event, $index)\"\r\n      (dragover)=\"onActiveDragOver($event, $index)\"\r\n      (drop)=\"onActiveGroupDrop($event, $index)\"\r\n    >\r\n      <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n      <span>{{ g.headerName }}</span>\r\n      <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n        <img src=\"images/t-x.svg\" alt=\"\" />\r\n      </button>\r\n    </div>\r\n    <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n    } @if(activeGroups.length === 0){\r\n    <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n    }\r\n  </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"width: 50px\">\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                class=\"pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n\r\n          } \r\n          <!-- @else{\r\n          <th></th>\r\n          }  -->\r\n          @if(activeGroups.length > 0){\r\n          <th class=\"active_group\">\r\n            <div class=\"th_wraper\">\r\n              <div class=\"text_wrapper\">\r\n                <span class=\"ellipsis headerName\">Group</span>\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <div class=\"three-dots\">\r\n                  <img src=\"images/t-more-vertical.svg\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </th>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col, 'action')\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (mouseenter)=\"onMouseEnterHeader($index)\"\r\n            (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"text_wrapper\"\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                @if(showMoveIcon[$index] && !col.isAction){\r\n                <img\r\n                  src=\"images/t-move.svg\"\r\n                  class=\"move-icon\"\r\n                  [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n                  (dragstart)=\"onDragStart($event, $index)\"\r\n                  (dragend)=\"onDragEnd()\"\r\n                  (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n                  (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n                />\r\n\r\n                }\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable && !col.isAction) {\r\n                <span class=\"sorting_icon\">\r\n                  @if(sortingType[$index]=== 'asc'){\r\n                  <img\r\n                    src=\"images/t-arrow-up.svg\"\r\n                    class=\"sorting_up\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if(sortingType[$index]=== 'dsc'){\r\n                  <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                  <img\r\n                    src=\"images/t-arrow-down.svg\"\r\n                    class=\"sorting_down\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filterable){\r\n                <div\r\n                  #trigger\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  @if(activeFilters.has(col.fieldName)){\r\n                  <img\r\n                    src=\"images/t-filter-applied.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }@else {\r\n                  <img\r\n                    src=\"images/t-filter.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    adaptivePosition\r\n                    [trigger]=\"trigger\"\r\n                    [parentContainer]=\"parent\"\r\n                    [matchWidth]=\"false\"\r\n                    class=\"filter_wrapper\"\r\n                    id=\"filter_wrapper-{{ $index }}\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.filterType === 'text'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"number\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                        (input)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    @if(col.filterType === 'date'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n                    } }\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    @if(col.filterType === 'set'){\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      placeholder=\"Search...\"\r\n                      (input)=\"filterSetOptions(col, $event)\"\r\n                    /> -->\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n                    </div>\r\n\r\n                    <div class=\"set_option_details\">\r\n                      <label class=\"checkbox_container\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isAllSelected(col)\"\r\n                          (change)=\"toggleSelectAll(col, $event)\"\r\n                        />\r\n                        (Select All)\r\n                      </label>\r\n                      <div class=\"set_options\" id=\"container_scroll\">\r\n                        @for(opt of col.filteredOptions; track $index){\r\n                        <label class=\"checkbox_container\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"filter_btn\">\r\n                      <button\r\n                        class=\"reset_btn\"\r\n                        type=\"button\"\r\n                        (click)=\"resetFilter(col)\"\r\n                      >\r\n                        Reset\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                <div #triggerColMenu>\r\n                  @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                  <div\r\n                    class=\"three-dots\"\r\n                    (click)=\"openMenu($event, col, $index)\"\r\n                  >\r\n                    <img\r\n                      src=\"images/t-more-vertical.svg\"\r\n                      [draggable]=\"false\"\r\n                      (dragstart)=\"\r\n                        $event.preventDefault(); $event.stopPropagation()\r\n                      \"\r\n                    />\r\n                  </div>\r\n                  }\r\n                </div>\r\n                @if(!col.isAction){\r\n                <span\r\n                  class=\"resize-handle\"\r\n                  (mousedown)=\"startResize($event, $index)\"\r\n                >\r\n                  |\r\n                </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            @if(menuVisible[$index]){\r\n            <div\r\n              class=\"dropdown_wrapper\"\r\n              adaptivePosition\r\n              [trigger]=\"triggerColMenu\"\r\n              [parentContainer]=\"parent\"\r\n              [matchWidth]=\"false\"\r\n              [isColumnActionMenu]=\"true\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n                @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'asc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img\r\n                      src=\"images/arrow-up.svg\"\r\n                      class=\"sorting_up\"\r\n                      [ngClass]=\"{ disable: !col.sortable }\"\r\n                    />\r\n                    <span class=\"text\">Sort Ascending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'dsc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/arrow-down.svg\" />\r\n                    <span class=\"text\">Sort Descending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                'dsc'){\r\n                <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/trash-2.svg\" />\r\n                    <span class=\"text\">Clear Sort</span>\r\n                  </div>\r\n                </div>\r\n                }\r\n                <div class=\"divder\"></div>\r\n\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (mouseenter)=\"showPinActions()\"\r\n                  (mouseleave)=\"hidePinActions()\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/pin.svg\" />\r\n                    <span class=\"text\">Pin Column</span>\r\n                  </div>\r\n                  <div class=\"right_item\">\r\n                    <img src=\"images/chevron-right.svg\" />\r\n                    @if(showPin){\r\n                    <div class=\"second_dropdown\">\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'none')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if((pinActionClicked[col.colId]?? 'none') ===\r\n                          'none'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">No Pin</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'left')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'left'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Left</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'right')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'right'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Right</span>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'left')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">{{\r\n                        col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'right')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">\r\n                        {{\r\n                          col.rightPinned\r\n                            ? \"Unpin Right Column\"\r\n                            : \"Pin Column Right\"\r\n                        }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"right_item\">\r\n                      <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n                    </div>\r\n                  </div> -->\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize This Column</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize All Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div\r\n                    class=\"left_item\"\r\n                    (click)=\"groupByColumnAction(col, $index)\"\r\n                  >\r\n                    <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n                    <span class=\"text\">Group by {{ col.headerName }}</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n                    <span class=\"text\">Choose Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Reset Columns</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n        groupedResult; track group.key){\r\n        <tr (click)=\"toggleGroup(group)\">\r\n          <td\r\n            class=\"group-cell\"\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ group.key }} ({{ group.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        @if(group.expanded){\r\n        <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n        @if (group.children[0]?.children) { @for (child of group.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: 1\r\n          }\"\r\n        ></ng-container>\r\n        } }\r\n\r\n        <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n        @if (!group.children[0]?.children) { @for (row of group.children; track\r\n        row.rowId) {\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [disabled]=\"data.isLocked\"\r\n                [checked]=\"data.isSelected || data.isLocked\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"radio_option\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n              <label [for]=\"data.rowId\"></label>\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        } }\r\n      </tbody>\r\n\r\n      <ng-template\r\n        #groupTemplate\r\n        let-node\r\n        let-colDefs=\"colDefs\"\r\n        let-checkBoxSelection=\"checkBoxSelection\"\r\n        let-activeGroups=\"activeGroups\"\r\n        let-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n            [style.paddingLeft.px]=\"level * 20\"\r\n            class=\"group-cell\"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ node.key }} ({{ node.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (node.expanded) {\r\n\r\n        <!-- CASE: more groups -->\r\n        @if (node.children[0]?.children) { @for (child of node.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: level + 1\r\n          }\"\r\n        >\r\n        </ng-container>\r\n        } }\r\n\r\n        <!-- CASE: final rows -->\r\n        @if (!node.children[0]?.children) { @for (row of node.children; track\r\n        row.rowId) {\r\n\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } }\r\n      </ng-template>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div class=\"pagination_select\">\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form\">\r\n      <!-- <span>Page</span> -->\r\n\r\n      <button class=\"outlined_btn first_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n      <button class=\"outlined_btn last_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n  <div class=\"right_click_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/scissors.svg\" />\r\n        <span class=\"text\">Cut</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+X</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+C</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Group Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/clipboard.svg\" alt=\"\" />\r\n        <span class=\"text\">Paste</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+V</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n        <span class=\"text\">Chart</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/download.svg\" alt=\"\" />\r\n        <span class=\"text\">Export</span>\r\n      </div>\r\n\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chart section Start Here -->\r\n  <div class=\"second_dropdown\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Column</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Bar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Pie</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Line</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Area</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">XY(Scatter)</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Polar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stastical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Hierarchical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Specialized</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Funnel</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Combination</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Export Section start Here -->\r\n  <div class=\"export_section d-none\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">CSV Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">Excel Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Column Group Section Start Here -->\r\n  <div class=\"third_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Grouped</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stacked</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">100% Stacked</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_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}#container_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}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_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))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.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][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{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]: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]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.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%;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{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;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}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;right:0;padding:calc(.5rem / var(--scale)) 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%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;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:13}.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}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:0!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);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.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: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));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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}.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-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / 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-50)!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}.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:20px;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));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 .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}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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(--neutral-50)}.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 .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}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.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-top: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}.active_group{width:100px}.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))}.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:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.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(-20rem / 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)}\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"] }, { 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: AddClassPipe, name: "addClass" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n  @if(groupByRequired){\r\n  <!-- Group Panel -->\r\n  <div\r\n    class=\"group_panel\"\r\n    (dragover)=\"onGroupDragOver($event)\"\r\n    (drop)=\"onGroupDrop($event)\"\r\n  >\r\n    <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n    @for(g of activeGroups; track $index){\r\n    <div\r\n      class=\"group_tag\"\r\n      draggable=\"true\"\r\n      (dragstart)=\"onGroupDragStart($event, $index)\"\r\n      (dragover)=\"onActiveDragOver($event, $index)\"\r\n      (drop)=\"onActiveGroupDrop($event, $index)\"\r\n    >\r\n      <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n      <span>{{ g.headerName }}</span>\r\n      <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n        <img src=\"images/t-x.svg\" alt=\"\" />\r\n      </button>\r\n    </div>\r\n    <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n    } @if(activeGroups.length === 0){\r\n    <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n    }\r\n  </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"min-width: 50px; width: 50px;\">\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                class=\"pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n\r\n          } \r\n          <!-- @else{\r\n          <th></th>\r\n          }  -->\r\n          @if(activeGroups.length > 0){\r\n          <th class=\"active_group\">\r\n            <div class=\"th_wraper\">\r\n              <div class=\"text_wrapper\">\r\n                <span class=\"ellipsis headerName\">Group</span>\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <div class=\"three-dots\">\r\n                  <img src=\"images/t-more-vertical.svg\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </th>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col, 'action')\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (mouseenter)=\"onMouseEnterHeader($index)\"\r\n            (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"text_wrapper\"\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                @if(showMoveIcon[$index] && !col.isAction){\r\n                <img\r\n                  src=\"images/t-move.svg\"\r\n                  class=\"move-icon\"\r\n                  [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n                  (dragstart)=\"onDragStart($event, $index)\"\r\n                  (dragend)=\"onDragEnd()\"\r\n                  (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n                  (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n                />\r\n\r\n                }\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable && !col.isAction) {\r\n                <span class=\"sorting_icon\">\r\n                  @if(sortingType[$index]=== 'asc'){\r\n                  <img\r\n                    src=\"images/t-arrow-up.svg\"\r\n                    class=\"sorting_up\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if(sortingType[$index]=== 'dsc'){\r\n                  <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                  <img\r\n                    src=\"images/t-arrow-down.svg\"\r\n                    class=\"sorting_down\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filterable){\r\n                <div\r\n                  #trigger\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  @if(activeFilters.has(col.fieldName)){\r\n                  <img\r\n                    src=\"images/t-filter-applied.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }@else {\r\n                  <img\r\n                    src=\"images/t-filter.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    adaptivePosition\r\n                    [trigger]=\"trigger\"\r\n                    [parentContainer]=\"parent\"\r\n                    [matchWidth]=\"false\"\r\n                    class=\"filter_wrapper\"\r\n                    id=\"filter_wrapper-{{ $index }}\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.filterType === 'text'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"number\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                        (input)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    @if(col.filterType === 'date'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n                    } }\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    @if(col.filterType === 'set'){\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      placeholder=\"Search...\"\r\n                      (input)=\"filterSetOptions(col, $event)\"\r\n                    /> -->\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n                    </div>\r\n\r\n                    <div class=\"set_option_details\">\r\n                      <label class=\"checkbox_container\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isAllSelected(col)\"\r\n                          (change)=\"toggleSelectAll(col, $event)\"\r\n                        />\r\n                        (Select All)\r\n                      </label>\r\n                      <div class=\"set_options\" id=\"container_scroll\">\r\n                        @for(opt of col.filteredOptions; track $index){\r\n                        <label class=\"checkbox_container\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"filter_btn\">\r\n                      <button\r\n                        class=\"reset_btn\"\r\n                        type=\"button\"\r\n                        (click)=\"resetFilter(col)\"\r\n                      >\r\n                        Reset\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                <div #triggerColMenu>\r\n                  @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                  <div\r\n                    class=\"three-dots\"\r\n                    (click)=\"openMenu($event, col, $index)\"\r\n                  >\r\n                    <img\r\n                      src=\"images/t-more-vertical.svg\"\r\n                      [draggable]=\"false\"\r\n                      (dragstart)=\"\r\n                        $event.preventDefault(); $event.stopPropagation()\r\n                      \"\r\n                    />\r\n                  </div>\r\n                  }\r\n                </div>\r\n                @if(!col.isAction){\r\n                <span\r\n                  class=\"resize-handle\"\r\n                  (mousedown)=\"startResize($event, $index)\"\r\n                >\r\n                  |\r\n                </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            @if(menuVisible[$index]){\r\n            <div\r\n              class=\"dropdown_wrapper\"\r\n              adaptivePosition\r\n              [trigger]=\"triggerColMenu\"\r\n              [parentContainer]=\"parent\"\r\n              [matchWidth]=\"false\"\r\n              [isColumnActionMenu]=\"true\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n                @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'asc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img\r\n                      src=\"images/arrow-up.svg\"\r\n                      class=\"sorting_up\"\r\n                      [ngClass]=\"{ disable: !col.sortable }\"\r\n                    />\r\n                    <span class=\"text\">Sort Ascending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'dsc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/arrow-down.svg\" />\r\n                    <span class=\"text\">Sort Descending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                'dsc'){\r\n                <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/trash-2.svg\" />\r\n                    <span class=\"text\">Clear Sort</span>\r\n                  </div>\r\n                </div>\r\n                }\r\n                <div class=\"divder\"></div>\r\n\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (mouseenter)=\"showPinActions()\"\r\n                  (mouseleave)=\"hidePinActions()\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/pin.svg\" />\r\n                    <span class=\"text\">Pin Column</span>\r\n                  </div>\r\n                  <div class=\"right_item\">\r\n                    <img src=\"images/chevron-right.svg\" />\r\n                    @if(showPin){\r\n                    <div class=\"second_dropdown\">\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'none')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if((pinActionClicked[col.colId]?? 'none') ===\r\n                          'none'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">No Pin</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'left')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'left'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Left</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'right')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'right'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Right</span>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'left')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">{{\r\n                        col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'right')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">\r\n                        {{\r\n                          col.rightPinned\r\n                            ? \"Unpin Right Column\"\r\n                            : \"Pin Column Right\"\r\n                        }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"right_item\">\r\n                      <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n                    </div>\r\n                  </div> -->\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize This Column</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize All Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div\r\n                    class=\"left_item\"\r\n                    (click)=\"groupByColumnAction(col, $index)\"\r\n                  >\r\n                    <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n                    <span class=\"text\">Group by {{ col.headerName }}</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n                    <span class=\"text\">Choose Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Reset Columns</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n        groupedResult; track group.key){\r\n        <tr (click)=\"toggleGroup(group)\">\r\n          <td\r\n            class=\"group-cell\"\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ group.key }} ({{ group.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        @if(group.expanded){\r\n        <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n        @if (group.children[0]?.children) { @for (child of group.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: 1\r\n          }\"\r\n        ></ng-container>\r\n        } }\r\n\r\n        <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n        @if (!group.children[0]?.children) { @for (row of group.children; track\r\n        row.rowId) {\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [disabled]=\"data.isLocked\"\r\n                [checked]=\"data.isSelected || data.isLocked\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"radio_option\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n              <label [for]=\"data.rowId\"></label>\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        } }\r\n      </tbody>\r\n\r\n      <ng-template\r\n        #groupTemplate\r\n        let-node\r\n        let-colDefs=\"colDefs\"\r\n        let-checkBoxSelection=\"checkBoxSelection\"\r\n        let-activeGroups=\"activeGroups\"\r\n        let-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n            [style.paddingLeft.px]=\"level * 20\"\r\n            class=\"group-cell\"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ node.key }} ({{ node.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (node.expanded) {\r\n\r\n        <!-- CASE: more groups -->\r\n        @if (node.children[0]?.children) { @for (child of node.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: level + 1\r\n          }\"\r\n        >\r\n        </ng-container>\r\n        } }\r\n\r\n        <!-- CASE: final rows -->\r\n        @if (!node.children[0]?.children) { @for (row of node.children; track\r\n        row.rowId) {\r\n\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } }\r\n      </ng-template>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div class=\"pagination_select\">\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form\">\r\n      <!-- <span>Page</span> -->\r\n\r\n      <button class=\"outlined_btn first_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n      <button class=\"outlined_btn last_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n  <div class=\"right_click_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/scissors.svg\" />\r\n        <span class=\"text\">Cut</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+X</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+C</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Group Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/clipboard.svg\" alt=\"\" />\r\n        <span class=\"text\">Paste</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+V</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n        <span class=\"text\">Chart</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/download.svg\" alt=\"\" />\r\n        <span class=\"text\">Export</span>\r\n      </div>\r\n\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chart section Start Here -->\r\n  <div class=\"second_dropdown\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Column</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Bar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Pie</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Line</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Area</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">XY(Scatter)</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Polar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stastical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Hierarchical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Specialized</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Funnel</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Combination</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Export Section start Here -->\r\n  <div class=\"export_section d-none\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">CSV Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">Excel Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Column Group Section Start Here -->\r\n  <div class=\"third_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Grouped</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stacked</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">100% Stacked</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_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}#container_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}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_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))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.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][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{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]: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]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.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%;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{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;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}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;right:0;padding:calc(.5rem / var(--scale)) 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%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;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:13}.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}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:0!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);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.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: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));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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}.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-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / 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-50)!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}.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:20px;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));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 .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}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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(--neutral-50)}.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 .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}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.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-top: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}.active_group{width:100px}.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))}.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:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.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(-20rem / 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)}\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"] }, { 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: AddClassPipe, name: "addClass" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CatsDataGridComponent, decorators: [{
             type: Component,
@@ -2107,8 +2155,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         RendererParserDirective,
                         AddClassPipe,
                         CommonInputComponent,
-                    ], template: "<div class=\"tableArea\">\r\n  @if(groupByRequired){\r\n  <!-- Group Panel -->\r\n  <div\r\n    class=\"group_panel\"\r\n    (dragover)=\"onGroupDragOver($event)\"\r\n    (drop)=\"onGroupDrop($event)\"\r\n  >\r\n    <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n    @for(g of activeGroups; track $index){\r\n    <div\r\n      class=\"group_tag\"\r\n      draggable=\"true\"\r\n      (dragstart)=\"onGroupDragStart($event, $index)\"\r\n      (dragover)=\"onActiveDragOver($event, $index)\"\r\n      (drop)=\"onActiveGroupDrop($event, $index)\"\r\n    >\r\n      <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n      <span>{{ g.headerName }}</span>\r\n      <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n        <img src=\"images/t-x.svg\" alt=\"\" />\r\n      </button>\r\n    </div>\r\n    <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n    } @if(activeGroups.length === 0){\r\n    <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n    }\r\n  </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"width: 50px\">\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                class=\"pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n\r\n          } \r\n          <!-- @else{\r\n          <th></th>\r\n          }  -->\r\n          @if(activeGroups.length > 0){\r\n          <th class=\"active_group\">\r\n            <div class=\"th_wraper\">\r\n              <div class=\"text_wrapper\">\r\n                <span class=\"ellipsis headerName\">Group</span>\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <div class=\"three-dots\">\r\n                  <img src=\"images/t-more-vertical.svg\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </th>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col, 'action')\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (mouseenter)=\"onMouseEnterHeader($index)\"\r\n            (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"text_wrapper\"\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                @if(showMoveIcon[$index] && !col.isAction){\r\n                <img\r\n                  src=\"images/t-move.svg\"\r\n                  class=\"move-icon\"\r\n                  [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n                  (dragstart)=\"onDragStart($event, $index)\"\r\n                  (dragend)=\"onDragEnd()\"\r\n                  (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n                  (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n                />\r\n\r\n                }\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable && !col.isAction) {\r\n                <span class=\"sorting_icon\">\r\n                  @if(sortingType[$index]=== 'asc'){\r\n                  <img\r\n                    src=\"images/t-arrow-up.svg\"\r\n                    class=\"sorting_up\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if(sortingType[$index]=== 'dsc'){\r\n                  <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                  <img\r\n                    src=\"images/t-arrow-down.svg\"\r\n                    class=\"sorting_down\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filterable){\r\n                <div\r\n                  #trigger\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  @if(activeFilters.has(col.fieldName)){\r\n                  <img\r\n                    src=\"images/t-filter-applied.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }@else {\r\n                  <img\r\n                    src=\"images/t-filter.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    adaptivePosition\r\n                    [trigger]=\"trigger\"\r\n                    [parentContainer]=\"parent\"\r\n                    [matchWidth]=\"false\"\r\n                    class=\"filter_wrapper\"\r\n                    id=\"filter_wrapper-{{ $index }}\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.filterType === 'text'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"number\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                        (input)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    @if(col.filterType === 'date'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n                    } }\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    @if(col.filterType === 'set'){\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      placeholder=\"Search...\"\r\n                      (input)=\"filterSetOptions(col, $event)\"\r\n                    /> -->\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n                    </div>\r\n\r\n                    <div class=\"set_option_details\">\r\n                      <label class=\"checkbox_container\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isAllSelected(col)\"\r\n                          (change)=\"toggleSelectAll(col, $event)\"\r\n                        />\r\n                        (Select All)\r\n                      </label>\r\n                      <div class=\"set_options\" id=\"container_scroll\">\r\n                        @for(opt of col.filteredOptions; track $index){\r\n                        <label class=\"checkbox_container\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"filter_btn\">\r\n                      <button\r\n                        class=\"reset_btn\"\r\n                        type=\"button\"\r\n                        (click)=\"resetFilter(col)\"\r\n                      >\r\n                        Reset\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                <div #triggerColMenu>\r\n                  @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                  <div\r\n                    class=\"three-dots\"\r\n                    (click)=\"openMenu($event, col, $index)\"\r\n                  >\r\n                    <img\r\n                      src=\"images/t-more-vertical.svg\"\r\n                      [draggable]=\"false\"\r\n                      (dragstart)=\"\r\n                        $event.preventDefault(); $event.stopPropagation()\r\n                      \"\r\n                    />\r\n                  </div>\r\n                  }\r\n                </div>\r\n                @if(!col.isAction){\r\n                <span\r\n                  class=\"resize-handle\"\r\n                  (mousedown)=\"startResize($event, $index)\"\r\n                >\r\n                  |\r\n                </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            @if(menuVisible[$index]){\r\n            <div\r\n              class=\"dropdown_wrapper\"\r\n              adaptivePosition\r\n              [trigger]=\"triggerColMenu\"\r\n              [parentContainer]=\"parent\"\r\n              [matchWidth]=\"false\"\r\n              [isColumnActionMenu]=\"true\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n                @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'asc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img\r\n                      src=\"images/arrow-up.svg\"\r\n                      class=\"sorting_up\"\r\n                      [ngClass]=\"{ disable: !col.sortable }\"\r\n                    />\r\n                    <span class=\"text\">Sort Ascending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'dsc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/arrow-down.svg\" />\r\n                    <span class=\"text\">Sort Descending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                'dsc'){\r\n                <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/trash-2.svg\" />\r\n                    <span class=\"text\">Clear Sort</span>\r\n                  </div>\r\n                </div>\r\n                }\r\n                <div class=\"divder\"></div>\r\n\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (mouseenter)=\"showPinActions()\"\r\n                  (mouseleave)=\"hidePinActions()\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/pin.svg\" />\r\n                    <span class=\"text\">Pin Column</span>\r\n                  </div>\r\n                  <div class=\"right_item\">\r\n                    <img src=\"images/chevron-right.svg\" />\r\n                    @if(showPin){\r\n                    <div class=\"second_dropdown\">\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'none')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if((pinActionClicked[col.colId]?? 'none') ===\r\n                          'none'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">No Pin</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'left')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'left'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Left</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'right')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'right'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Right</span>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'left')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">{{\r\n                        col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'right')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">\r\n                        {{\r\n                          col.rightPinned\r\n                            ? \"Unpin Right Column\"\r\n                            : \"Pin Column Right\"\r\n                        }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"right_item\">\r\n                      <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n                    </div>\r\n                  </div> -->\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize This Column</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize All Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div\r\n                    class=\"left_item\"\r\n                    (click)=\"groupByColumnAction(col, $index)\"\r\n                  >\r\n                    <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n                    <span class=\"text\">Group by {{ col.headerName }}</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n                    <span class=\"text\">Choose Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Reset Columns</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n        groupedResult; track group.key){\r\n        <tr (click)=\"toggleGroup(group)\">\r\n          <td\r\n            class=\"group-cell\"\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ group.key }} ({{ group.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        @if(group.expanded){\r\n        <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n        @if (group.children[0]?.children) { @for (child of group.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: 1\r\n          }\"\r\n        ></ng-container>\r\n        } }\r\n\r\n        <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n        @if (!group.children[0]?.children) { @for (row of group.children; track\r\n        row.rowId) {\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [disabled]=\"data.isLocked\"\r\n                [checked]=\"data.isSelected || data.isLocked\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"radio_option\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n              <label [for]=\"data.rowId\"></label>\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        } }\r\n      </tbody>\r\n\r\n      <ng-template\r\n        #groupTemplate\r\n        let-node\r\n        let-colDefs=\"colDefs\"\r\n        let-checkBoxSelection=\"checkBoxSelection\"\r\n        let-activeGroups=\"activeGroups\"\r\n        let-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n            [style.paddingLeft.px]=\"level * 20\"\r\n            class=\"group-cell\"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ node.key }} ({{ node.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (node.expanded) {\r\n\r\n        <!-- CASE: more groups -->\r\n        @if (node.children[0]?.children) { @for (child of node.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: level + 1\r\n          }\"\r\n        >\r\n        </ng-container>\r\n        } }\r\n\r\n        <!-- CASE: final rows -->\r\n        @if (!node.children[0]?.children) { @for (row of node.children; track\r\n        row.rowId) {\r\n\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } }\r\n      </ng-template>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div class=\"pagination_select\">\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form\">\r\n      <!-- <span>Page</span> -->\r\n\r\n      <button class=\"outlined_btn first_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n      <button class=\"outlined_btn last_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n  <div class=\"right_click_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/scissors.svg\" />\r\n        <span class=\"text\">Cut</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+X</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+C</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Group Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/clipboard.svg\" alt=\"\" />\r\n        <span class=\"text\">Paste</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+V</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n        <span class=\"text\">Chart</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/download.svg\" alt=\"\" />\r\n        <span class=\"text\">Export</span>\r\n      </div>\r\n\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chart section Start Here -->\r\n  <div class=\"second_dropdown\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Column</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Bar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Pie</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Line</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Area</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">XY(Scatter)</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Polar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stastical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Hierarchical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Specialized</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Funnel</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Combination</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Export Section start Here -->\r\n  <div class=\"export_section d-none\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">CSV Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">Excel Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Column Group Section Start Here -->\r\n  <div class=\"third_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Grouped</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stacked</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">100% Stacked</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_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}#container_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}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_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))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.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][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{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]: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]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.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%;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{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;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}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;right:0;padding:calc(.5rem / var(--scale)) 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%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;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:13}.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}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:0!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);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.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: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));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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}.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-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / 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-50)!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}.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:20px;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));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 .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}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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(--neutral-50)}.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 .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}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.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-top: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}.active_group{width:100px}.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))}.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:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.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(-20rem / 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)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tableOptions: [{
+                    ], template: "<div class=\"tableArea\">\r\n  @if(groupByRequired){\r\n  <!-- Group Panel -->\r\n  <div\r\n    class=\"group_panel\"\r\n    (dragover)=\"onGroupDragOver($event)\"\r\n    (drop)=\"onGroupDrop($event)\"\r\n  >\r\n    <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\r\n    @for(g of activeGroups; track $index){\r\n    <div\r\n      class=\"group_tag\"\r\n      draggable=\"true\"\r\n      (dragstart)=\"onGroupDragStart($event, $index)\"\r\n      (dragover)=\"onActiveDragOver($event, $index)\"\r\n      (drop)=\"onActiveGroupDrop($event, $index)\"\r\n    >\r\n      <img src=\"images/t-gripper.svg\" alt=\"\" />\r\n      <span>{{ g.headerName }}</span>\r\n      <button class=\"remove_tag\" (click)=\"removeGroup(g, $index)\">\r\n        <img src=\"images/t-x.svg\" alt=\"\" />\r\n      </button>\r\n    </div>\r\n    <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\r\n    } @if(activeGroups.length === 0){\r\n    <div class=\"group_placeholder\">Drag here to set row groups</div>\r\n    }\r\n  </div>\r\n  }\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\r\n    #parent\r\n    (scroll)=\"infinityScroll($event)\"\r\n    [ngStyle]=\"{ height: height + 'px' }\"\r\n  >\r\n    <table cellspacing=\"0\" cellpadding=\"0\">\r\n      <thead class=\"sticky-top\">\r\n        <tr>\r\n          @if (checkBoxSelection && checkboxSelectionType == 'multiple') {\r\n          <th style=\"min-width: 50px; width: 50px;\">\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                class=\"pointer\"\r\n                type=\"checkbox\"\r\n                name=\"\"\r\n                id=\"\"\r\n                [checked]=\"checkAllSelected()\"\r\n                [indeterminate]=\"checkInterminate()\"\r\n                (change)=\"onHeaderCheckboxChange($event)\"\r\n            /></span>\r\n          </th>\r\n\r\n          } \r\n          <!-- @else{\r\n          <th></th>\r\n          }  -->\r\n          @if(activeGroups.length > 0){\r\n          <th class=\"active_group\">\r\n            <div class=\"th_wraper\">\r\n              <div class=\"text_wrapper\">\r\n                <span class=\"ellipsis headerName\">Group</span>\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <div class=\"three-dots\">\r\n                  <img src=\"images/t-more-vertical.svg\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </th>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col, 'action')\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (mouseenter)=\"onMouseEnterHeader($index)\"\r\n            (mouseleave)=\"onMouseLeaveHeader($index)\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"text_wrapper\"\r\n                [ngStyle]=\"getStyle(col, 'action')\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                @if(showMoveIcon[$index] && !col.isAction){\r\n                <img\r\n                  src=\"images/t-move.svg\"\r\n                  class=\"move-icon\"\r\n                  [draggable]=\"!isResizing || columnDraggable[$index]\"\r\n                  (dragstart)=\"onDragStart($event, $index)\"\r\n                  (dragend)=\"onDragEnd()\"\r\n                  (mouseenter)=\"enableColumnDrag($event, $index)\"\r\n                  (mouseleave)=\"disableColumnDrag($event, $index)\"\r\n                />\r\n\r\n                }\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable && !col.isAction) {\r\n                <span class=\"sorting_icon\">\r\n                  @if(sortingType[$index]=== 'asc'){\r\n                  <img\r\n                    src=\"images/t-arrow-up.svg\"\r\n                    class=\"sorting_up\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if(sortingType[$index]=== 'dsc'){\r\n                  <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                  <img\r\n                    src=\"images/t-arrow-down.svg\"\r\n                    class=\"sorting_down\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }\r\n                </span>\r\n\r\n                }\r\n              </div>\r\n              <div class=\"filter_three_dot_wrapper\">\r\n                <!-- Column Filters Logic-->\r\n                @if(filterRequired && col.filterable){\r\n                <div\r\n                  #trigger\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  @if(activeFilters.has(col.fieldName)){\r\n                  <img\r\n                    src=\"images/t-filter-applied.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  }@else {\r\n                  <img\r\n                    src=\"images/t-filter.svg\"\r\n                    class=\"filter-icon\"\r\n                    [draggable]=\"false\"\r\n                    (dragstart)=\"\r\n                      $event.preventDefault(); $event.stopPropagation()\r\n                    \"\r\n                  />\r\n                  } @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    adaptivePosition\r\n                    [trigger]=\"trigger\"\r\n                    [parentContainer]=\"parent\"\r\n                    [matchWidth]=\"false\"\r\n                    class=\"filter_wrapper\"\r\n                    id=\"filter_wrapper-{{ $index }}\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.filterType === 'text'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[0].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    @if(col.textFilters[0].filterValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"filterOptions\"\r\n                      [selectedValue]=\"col.textFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.textFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.textFilters[1].filterValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    } }\r\n\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"number\"\r\n                      [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                      (input)=\"applyAllFilters()\"\r\n                    /> -->\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"number\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[0].numberValue\"\r\n                        (input)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n\r\n                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.numberFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.numberFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Filter\"\r\n                        [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                        (keyup)=\"applyAllFilters()\"\r\n                      />\r\n                    </div>\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      [(ngModel)]=\"col.numberFilters[1].numberValue\"\r\n                      placeholder=\"Filter\u2026\"\r\n                      (keyup)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    } }\r\n\r\n                    <!-- DATE FILTER -->\r\n                    @if(col.filterType === 'date'){\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[0].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[0].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <!-- <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    /> -->\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row radio_option\">\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"AND\"\r\n                        id=\"{{ $index }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index\">AND</label>\r\n\r\n                      <input\r\n                        type=\"radio\"\r\n                        name=\"textLogic{{ col.fieldName }}\"\r\n                        [(ngModel)]=\"col.textLogic\"\r\n                        value=\"OR\"\r\n                        id=\"{{ $index + 1 }}\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                      <label [for]=\"$index + 1\">OR</label>\r\n                    </div>\r\n\r\n                    <lib-common-input\r\n                      [options]=\"numberFilterOptions\"\r\n                      [selectedValue]=\"col.dateFilters[1].filterType\"\r\n                      placeholder=\"Select filter\"\r\n                      (valueChange)=\"col.dateFilters[1].filterType = $event\"\r\n                    ></lib-common-input>\r\n\r\n                    <lib-common-calendar\r\n                      [dateConfig]=\"dateConfig\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (dateTimeSelected)=\"dateTimeSelected($event)\"\r\n                    ></lib-common-calendar>\r\n                    } }\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    @if(col.filterType === 'set'){\r\n                    <!-- <input\r\n                      type=\"text\"\r\n                      placeholder=\"Search...\"\r\n                      (input)=\"filterSetOptions(col, $event)\"\r\n                    /> -->\r\n                    <div class=\"search_input\">\r\n                      <img src=\"images/search.svg\" alt=\"\" />\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n                    </div>\r\n\r\n                    <div class=\"set_option_details\">\r\n                      <label class=\"checkbox_container\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isAllSelected(col)\"\r\n                          (change)=\"toggleSelectAll(col, $event)\"\r\n                        />\r\n                        (Select All)\r\n                      </label>\r\n                      <div class=\"set_options\" id=\"container_scroll\">\r\n                        @for(opt of col.filteredOptions; track $index){\r\n                        <label class=\"checkbox_container\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            [checked]=\"col.selectedValues.has(opt)\"\r\n                            (change)=\"toggleSetOption(col, opt, $event)\"\r\n                          />\r\n                          {{ opt }}\r\n                        </label>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                    <div class=\"filter_btn\">\r\n                      <button\r\n                        class=\"reset_btn\"\r\n                        type=\"button\"\r\n                        (click)=\"resetFilter(col)\"\r\n                      >\r\n                        Reset\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                <div #triggerColMenu>\r\n                  @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                  <div\r\n                    class=\"three-dots\"\r\n                    (click)=\"openMenu($event, col, $index)\"\r\n                  >\r\n                    <img\r\n                      src=\"images/t-more-vertical.svg\"\r\n                      [draggable]=\"false\"\r\n                      (dragstart)=\"\r\n                        $event.preventDefault(); $event.stopPropagation()\r\n                      \"\r\n                    />\r\n                  </div>\r\n                  }\r\n                </div>\r\n                @if(!col.isAction){\r\n                <span\r\n                  class=\"resize-handle\"\r\n                  (mousedown)=\"startResize($event, $index)\"\r\n                >\r\n                  |\r\n                </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            @if(menuVisible[$index]){\r\n            <div\r\n              class=\"dropdown_wrapper\"\r\n              adaptivePosition\r\n              [trigger]=\"triggerColMenu\"\r\n              [parentContainer]=\"parent\"\r\n              [matchWidth]=\"false\"\r\n              [isColumnActionMenu]=\"true\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <div class=\"right_click_dropdown\" id=\"container_scroll\">\r\n                @if(sortingType[$index] === 'dsc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'asc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img\r\n                      src=\"images/arrow-up.svg\"\r\n                      class=\"sorting_up\"\r\n                      [ngClass]=\"{ disable: !col.sortable }\"\r\n                    />\r\n                    <span class=\"text\">Sort Ascending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                ''){\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (click)=\"onSort(col, 'dsc', $index)\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/arrow-down.svg\" />\r\n                    <span class=\"text\">Sort Descending</span>\r\n                  </div>\r\n                </div>\r\n                } @if(sortingType[$index] === 'asc' || sortingType[$index] ===\r\n                'dsc'){\r\n                <div class=\"right_click_item\" (click)=\"onSort(col, '', $index)\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/trash-2.svg\" />\r\n                    <span class=\"text\">Clear Sort</span>\r\n                  </div>\r\n                </div>\r\n                }\r\n                <div class=\"divder\"></div>\r\n\r\n                <div\r\n                  class=\"right_click_item\"\r\n                  (mouseenter)=\"showPinActions()\"\r\n                  (mouseleave)=\"hidePinActions()\"\r\n                >\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/pin.svg\" />\r\n                    <span class=\"text\">Pin Column</span>\r\n                  </div>\r\n                  <div class=\"right_item\">\r\n                    <img src=\"images/chevron-right.svg\" />\r\n                    @if(showPin){\r\n                    <div class=\"second_dropdown\">\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'none')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if((pinActionClicked[col.colId]?? 'none') ===\r\n                          'none'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">No Pin</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'left')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'left'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Left</span>\r\n                        </div>\r\n                      </div>\r\n                      <div\r\n                        (click)=\"pinColumn(col, $index, 'right')\"\r\n                        class=\"right_click_item\"\r\n                      >\r\n                        <div class=\"left_item\">\r\n                          @if(pinActionClicked[col.colId] === 'right'){\r\n                          <img src=\"images/check.svg\" />\r\n                          } @else{\r\n                          <img src=\"\" alt=\"\" />\r\n                          }\r\n                          <span class=\"text\">Pin Right</span>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'left')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">{{\r\n                        col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    class=\"right_click_item\"\r\n                    (click)=\"pinColumn(col, $index, 'right')\"\r\n                  >\r\n                    <div class=\"left_item\">\r\n                      <img src=\"images/pin.svg\" />\r\n                      <span class=\"text\">\r\n                        {{\r\n                          col.rightPinned\r\n                            ? \"Unpin Right Column\"\r\n                            : \"Pin Column Right\"\r\n                        }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"right_item\">\r\n                      <img src=\"images/arrow-right.svg\" alt=\"\" />\r\n                    </div>\r\n                  </div> -->\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize This Column</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Autosize All Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div\r\n                    class=\"left_item\"\r\n                    (click)=\"groupByColumnAction(col, $index)\"\r\n                  >\r\n                    <img src=\"images/t-group-by-name.svg\" alt=\"\" />\r\n                    <span class=\"text\">Group by {{ col.headerName }}</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"images/t-choose-column.svg\" alt=\"\" />\r\n                    <span class=\"text\">Choose Columns</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"right_click_item\">\r\n                  <div class=\"left_item\">\r\n                    <img src=\"\" alt=\"\" />\r\n                    <span class=\"text\">Reset Columns</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if(groupedResult && groupedResult.length > 0){ @for(group of\r\n        groupedResult; track group.key){\r\n        <tr (click)=\"toggleGroup(group)\">\r\n          <td\r\n            class=\"group-cell\"\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  group.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ group.key }} ({{ group.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        @if(group.expanded){\r\n        <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\r\n        @if (group.children[0]?.children) { @for (child of group.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: 1\r\n          }\"\r\n        ></ng-container>\r\n        } }\r\n\r\n        <!-- CASE 2: CHILDREN ARE RAW ROWS -->\r\n        @if (!group.children[0]?.children) { @for (row of group.children; track\r\n        row.rowId) {\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } } } } @else{ @for (data of rowData; track data.rowId) {\r\n        <tr [ngClass]=\"data | addClass : tableOptions\">\r\n          @if (checkBoxSelection) {\r\n          <td style=\"min-width: 50px\">\r\n            @if (checkboxSelectionType=='multiple') {\r\n            <span class=\"checkbox_container\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [disabled]=\"data.isLocked\"\r\n                [checked]=\"data.isSelected || data.isLocked\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"radio_option\">\r\n              <input\r\n                type=\"radio\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n              />\r\n              <label [for]=\"data.rowId\"></label>\r\n            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track col.colId) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[col?.addClass ? col.addClass(data) : '']\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(data, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"data\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"data[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n            <!-- Commented for later use -->\r\n            <!-- <div class=\"tool_tip\">\r\n              <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\r\n            </div> -->\r\n          </td>\r\n          }\r\n        </tr>\r\n        } @empty {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n          >\r\n            <div class=\"small_data\">\r\n              @if (tableOptions?.noDataTemplate) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tableOptions?.noDataTemplate\"\r\n              ></ng-container>\r\n\r\n              }@else{\r\n              <!-- need to style it properly then we will add it -->\r\n              <span>No Data To Show</span>\r\n\r\n              }\r\n            </div>\r\n          </td>\r\n        </tr>\r\n\r\n        } }\r\n      </tbody>\r\n\r\n      <ng-template\r\n        #groupTemplate\r\n        let-node\r\n        let-colDefs=\"colDefs\"\r\n        let-checkBoxSelection=\"checkBoxSelection\"\r\n        let-activeGroups=\"activeGroups\"\r\n        let-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"\r\n              colDefs.length +\r\n              (checkBoxSelection ? 1 : 0) +\r\n              (activeGroups.length > 0 ? 1 : 0)\r\n            \"\r\n            [style.paddingLeft.px]=\"level * 20\"\r\n            class=\"group-cell\"\r\n          >\r\n            <span class=\"group-toggle\">\r\n              <img\r\n                src=\"images/{{\r\n                  node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\r\n                }}\"\r\n              />\r\n              {{ node.key }} ({{ node.children.length }})\r\n            </span>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (node.expanded) {\r\n\r\n        <!-- CASE: more groups -->\r\n        @if (node.children[0]?.children) { @for (child of node.children; track\r\n        child.key) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"groupTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: child,\r\n            colDefs: colDefs,\r\n            checkBoxSelection: checkBoxSelection,\r\n            activeGroups: activeGroups,\r\n            level: level + 1\r\n          }\"\r\n        >\r\n        </ng-container>\r\n        } }\r\n\r\n        <!-- CASE: final rows -->\r\n        @if (!node.children[0]?.children) { @for (row of node.children; track\r\n        row.rowId) {\r\n\r\n        <tr [ngClass]=\"row | addClass : tableOptions\">\r\n          <!-- Checkbox column if any -->\r\n          @if (checkBoxSelection) {\r\n          <td>\r\n            <span class=\"checkbox_container\">\r\n              <input type=\"checkbox\" [checked]=\"row.isSelected\"\r\n            /></span>\r\n          </td>\r\n          } @if (activeGroups.length > 0) {\r\n          <td class=\"group-placeholder\"></td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track col.colId) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            <!-- {{ row[col.fieldName] }} -->\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value ellipsis\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(row, col) }}\r\n              </div>\r\n              <div class=\"see_more_data\" id=\"container_scroll\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\"> {{ parseColValue(row, col) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            } @else{\r\n            <div\r\n              [rowParam]=\"row\"\r\n              [col]=\"col\"\r\n              [api]=\"tableOptions\"\r\n              [currentValue]=\"row[col.fieldName]\"\r\n              appRendererParser\r\n            ></div>\r\n            }\r\n          </td>\r\n          }\r\n        </tr>\r\n        } } }\r\n      </ng-template>\r\n    </table>\r\n  </div>\r\n  <!--  Table Wrapper Ends-->\r\n  @if(paginationRequired){\r\n  <div class=\"pagination_main\">\r\n    <div class=\"entries_details\">\r\n      <span>Showing</span>\r\n      <div class=\"pagination_select\">\r\n        <div\r\n          class=\"select_dropdown pointer\"\r\n          (click)=\"showPageSizeList = !showPageSizeList\"\r\n        >\r\n          <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\r\n          <span class=\"chevron_img\">\r\n            <img src=\"images/chevron-down.svg\" class=\"pointer\" />\r\n          </span>\r\n        </div>\r\n        @if(showPageSizeList){\r\n        <div class=\"select_option\">\r\n          @for(option of pageSizeList;track $index){\r\n          <span\r\n            class=\"pointer\"\r\n            (click)=\"onPageSizeChanged(option); onClickOutside()\"\r\n            >{{ option }}</span\r\n          >\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      <span\r\n        >Rows | {{ totalRecords > 0 ? recordsToShow.min + 1 : 0 }} -\r\n        {{\r\n          recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\r\n        }}\r\n        of\r\n        {{ totalRecords }} Entries</span\r\n      >\r\n    </div>\r\n    <div class=\"pagination_form\">\r\n      <!-- <span>Page</span> -->\r\n\r\n      <button class=\"outlined_btn first_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <button\r\n        class=\"outlined_btn prev_btn\"\r\n        [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\r\n        type=\"button\"\r\n        (click)=\"onBtPrevClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style\"\r\n          type=\"number\"\r\n          [(ngModel)]=\"pageDetails.currentPage\"\r\n          (change)=\"goToSelectedPage($event)\"\r\n          name=\"\"\r\n          id=\"\"\r\n        />\r\n      </div>\r\n      <button\r\n        class=\"outlined_btn next_btn\"\r\n        type=\"button\"\r\n        [ngClass]=\"\r\n          pageDetails.currentPage < pageDetails.totalPages ? '' : 'disable_btn'\r\n        \"\r\n        (click)=\"onBtNextClick()\"\r\n      >\r\n        <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n      <!-- <span>of {{ pageDetails.totalPages }}</span> -->\r\n\r\n      <button class=\"outlined_btn last_btn\" type=\"button\">\r\n        <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n\r\n<!-- cell right click code start here -->\r\n<div class=\"dropdown_wrapper d-none\">\r\n  <div class=\"right_click_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/scissors.svg\" />\r\n        <span class=\"text\">Cut</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+X</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+C</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/copy.svg\" alt=\"\" />\r\n        <span class=\"text\">Copy with Group Headers</span>\r\n      </div>\r\n      <span class=\"right_item\"></span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/clipboard.svg\" alt=\"\" />\r\n        <span class=\"text\">Paste</span>\r\n      </div>\r\n\r\n      <span class=\"right_item\">Ctrl+V</span>\r\n    </div>\r\n\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/bar-chart.svg\" alt=\"\" />\r\n        <span class=\"text\">Chart</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/download.svg\" alt=\"\" />\r\n        <span class=\"text\">Export</span>\r\n      </div>\r\n\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chart section Start Here -->\r\n  <div class=\"second_dropdown\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Column</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Bar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Pie</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Line</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Area</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">XY(Scatter)</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Polar</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stastical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Hierarchical</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Specialized</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Funnel</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Combination</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Export Section start Here -->\r\n  <div class=\"export_section d-none\">\r\n    <div class=\"right_click_item active\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">CSV Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <img src=\"images/file.svg\" alt=\"\" />\r\n        <span class=\"text\">Excel Report</span>\r\n      </div>\r\n      <img src=\"images/chevron-right.svg\" alt=\"\" />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Column Group Section Start Here -->\r\n  <div class=\"third_dropdown\">\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Grouped</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">Stacked</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"right_click_item\">\r\n      <div class=\"left_item\">\r\n        <span class=\"text\">100% Stacked</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":root{--white: #ffffff;--white-50: rgba(255, 255, 255, .582);--black: #1f1f1f;--default: #000000;--black-900: #202224;--pagination-text: var(--neutral-500);--black-dust: #1a1a1a;--neutral-cross: #d9d9d9;--neutral-40: #d5d7da;--neutral-50: #f0f0f0;--neutral-100: #e6e7e8;--neutral-200: #dadbdc;--neutral-300: #c0c2c5;--neutral-400: #81858a;--neutral-500: #434a51;--neutral-600: #040d17;--neutral-900: #010306;--blue-50: #f7fafe;--blue-100: #eaf3fd;--blue-200: #dfecfc;--blue-300: #c8dff9;--blue-400: #92bff4;--blue-600: #2680ea;--blue-700: #1c60af;--blue-800: #1849d6;--grey-50: #e9eaeb;--grey-100: #e2e8f0;--grey-150: #d6d6d6;--grey-200: #64748b;--grey-300: #414651;--grey-400: #8080808c;--grey-600: #535862;--light-grey: #81858a;--dark-grey: #4a4a4a;--green-50: #f7fbf7;--green-100: #ecf4ec;--green-200: #e1eee2;--green-400: #9bc69d;--green-600: #388e3c;--green-700: #2a6a2d;--red: #ff0000;--red-50: #fdf7f7;--red-100: #faeaea;--red-200: #f7dfdf;--red-300: #f0c9c9;--red-700: #941e1e;--yellow-50: #fffdf5;--yellow-100: #fff9e7;--yellow-200: #fff6da;--yellow-300: #ffefc1;--yellow-500: #bf7200;--yellow-600: #ffc107;--yellow-700: #bf9105;--yellow-800: #806003;--yellow-900: #bf9105;--orange-50: rgba(255, 251, 245, 1);--orange-100: #fff5e6;--orange-200: #fff0d9;--orange-600: #ff9800;--orange-700: rgba(191, 114, 0, 1);--box-shadow: #0a0d1214;--grid-box-shadow: #0000000a;--model-shadow: rgba(0, 0, 0, .08);--canvas-shadow: #00000014;--loader-border: #6f7b93;--modal-bg: rgba(4, 13, 23, .3);--checkbox-border: #0d6efd;--filter-600: rgba(0, 0, 0, .644);--feather-bg: #fafafa}html{font-size:12px}#container_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#container_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}#container_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}#container_scroll::-webkit-scrollbar-corner{background:transparent}#container_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))}#container_scroll::-webkit-scrollbar-button:hover{background-color:var(--neutral-300)}#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}sup{color:var(--error-red)}.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][disabled],.checkbox_container input[type=checkbox]:checked[disabled]{cursor:default;background-color:var(--neutral-300);border-color:var(--neutral-300)}.checkbox_container input[type=checkbox][disabled]+span,.checkbox_container input[type=checkbox]:checked[disabled]+span{color:var(--neutral-300)}.checkbox_container input[type=checkbox]{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]: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]:checked{border-color:var(--blue-600);background-color:var(--blue-600)}.checkbox_container input[type=checkbox]:checked:after{display:block;background-image:url(/images/check-white.svg)}.checkbox_container input[type=checkbox]:indeterminate{border-color:var(--blue-600);background-color:var(--white)}.checkbox_container input[type=checkbox]:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg)}.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%;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{max-height:calc(23.6666666667rem / var(--scale));overflow:auto;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}*,*: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}:host::ng-deep .see_more_data{position:absolute;min-width:calc(15.8333333333rem / 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:14;right:0;padding:calc(.5rem / var(--scale)) 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%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.tableArea.big .table_wrapper table thead tr,.tableArea.big .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.tableArea .table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table{border-collapse:collapse;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:13}.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}.tableArea .table_wrapper table td .ellipsis,.tableArea .table_wrapper table th .ellipsis{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(25rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale))}.tableArea .table_wrapper table td .cell-value,.tableArea .table_wrapper table th .cell-value{line-height:0!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);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer}.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: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));border-bottom:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);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}.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-50)!important}.tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / 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-50)!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}.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:20px;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));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 .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}.tableArea .table_wrapper .headerName{font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--neutral-500);text-transform:uppercase}.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(--neutral-50)}.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 .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}.tableArea .table_wrapper table th:not(:last-child) .right .line{display:block;border-left:calc(.1666666667rem / var(--scale)) solid var(--grey-50);height:calc(2rem / var(--scale))}.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}.tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--neutral-50);border-radius:calc(.3333333333rem / var(--scale))}.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-top: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}.active_group{width:100px}.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))}.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:hover,.dropdown_wrapper .right_click_item.active{background-color:var(--blue-50)}.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(-20rem / 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)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { tableOptions: [{
                 type: Input
             }], totalRecords: [{
                 type: Input
@@ -2368,5 +2416,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CatsDataGridComponent, CatsDataGridService, CommonRendererComponent };
+export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent };
 //# sourceMappingURL=cats-data-grid.mjs.map