cats-data-grid 1.0.0 → 1.0.1

package/fesm2022/cats-data-grid.mjs

@@ -7,10 +7,10 @@ import { FormsModule } from '@angular/forms';
 
 class CatsDataGridService {
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CatsDataGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CatsDataGridService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CatsDataGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -24,10 +24,10 @@ class AddClassPipe {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AddClassPipe, isStandalone: true, name: "addClass" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AddClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AddClassPipe, isStandalone: true, name: "addClass" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AddClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'addClass'
@@ -51,10 +51,10 @@ class OutsideClickDirective {
             this.clickOutside.emit(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OutsideClickDirective, isStandalone: true, selector: "[appOutsideClick]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OutsideClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: OutsideClickDirective, isStandalone: true, selector: "[appOutsideClick]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OutsideClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OutsideClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appOutsideClick]',
@@ -109,10 +109,10 @@ class RendererParserDirective {
             this.er.nativeElement.appendChild(toltipDiv);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RendererParserDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: RendererParserDirective, isStandalone: true, selector: "[appRendererParser]", inputs: { rowParam: "rowParam", col: "col", api: "api", currentValue: "currentValue" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RendererParserDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: RendererParserDirective, isStandalone: true, selector: "[appRendererParser]", inputs: { rowParam: "rowParam", col: "col", api: "api", currentValue: "currentValue" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RendererParserDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RendererParserDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRendererParser]',
@@ -131,16 +131,17 @@ class CatsDataGridComponent {
     cd;
     tableOptions;
     totalRecords = 0;
-    sortingRequired = false;
+    sortingRequired = true;
     checkBoxSelection = false;
     checkboxSelectionType = 'multiple';
     rowData = [];
     colDefs = [];
     paginationRequired = true;
     selectedRowEmpty = false;
-    filterRequired = false;
-    threeDotsMenuRequired = false;
+    filterRequired = true;
+    threeDotsMenuRequired = true;
     height = 300;
+    groupBy = [];
     onPaginationChange = new EventEmitter();
     onCheckboxSelection = new EventEmitter();
     onScrollEmitter = new EventEmitter();
@@ -171,12 +172,18 @@ class CatsDataGridComponent {
     menuVisible = [];
     menuPosition = [];
     activeFilters = new Set();
+    resizingColumnIndex = null;
+    startX = 0;
+    startWidth = 0;
+    isResizing = false;
+    groupedResult = [];
     constructor(cd) {
         this.cd = cd;
     }
     ngOnInit() {
         this.originalRowData = structuredClone(this.rowData);
         this.filteredRowData = structuredClone(this.rowData);
+        this.originalColDefs = [...this.colDefs];
     }
     ngOnChanges(changes) {
         if (changes['colDefs']?.currentValue) {
@@ -195,6 +202,7 @@ class CatsDataGridComponent {
                     [...this.selectedRow, row];
                 return row;
             });
+            this.getGroupedData();
         }
     }
     /**
@@ -205,21 +213,24 @@ class CatsDataGridComponent {
      */
     getUpdatedColDefs(colDefs) {
         return colDefs.map((col) => {
-            // Default dataType
-            if (!col.dataType) {
-                col.dataType = 'text';
+            // Default filterType
+            if (col.fieldName === 'action') {
+                col.isAction = true;
+            }
+            if (!col.filterType && !col.isAction) {
+                col.filterType = 'text';
             }
             col.textLogic = 'AND';
             col.numberLogic = 'AND';
             let updatedCol = {
                 ...col,
-                filter: col.filter ?? true,
-                menu: col.menu ?? true,
+                filter: col.filterable ?? true,
+                menu: col.columnAction ?? true,
             };
             if (!updatedCol.filter) {
                 return updatedCol;
             }
-            switch (col.dataType) {
+            switch (col.filterType) {
                 case 'text':
                     updatedCol = {
                         ...updatedCol,
@@ -264,7 +275,9 @@ class CatsDataGridComponent {
                     break;
                 case 'set':
                     const options = [
-                        ...new Set(this.rowData.map((r) => r[col.fieldName])),
+                        ...new Set(this.rowData.flatMap((r) => {
+                            return this.normalizeSetFilterType(r[col.fieldName], col?.cellRendererParams?.tagKey)?.filter(Boolean);
+                        })),
                     ];
                     updatedCol = {
                         ...updatedCol,
@@ -277,6 +290,32 @@ class CatsDataGridComponent {
             return updatedCol;
         });
     }
+    normalizeSetFilterType(value, key) {
+        if (!value)
+            return;
+        if (Array.isArray(value) && typeof value[0] === 'string') {
+            return value;
+        }
+        if (Array.isArray(value) && typeof value[0] === 'object') {
+            return (value = value.map((val) => val[key]));
+        }
+        if (typeof value === 'string') {
+            return [value];
+        }
+        if (typeof value === 'object') {
+            return [value[key]];
+        }
+        return [];
+    }
+    /**
+     * @description - Evaluates a text-based filter condition on a given field value.
+     * @author Anand Pandey
+     * @param {string} type - The type of text filter to apply ('contains' | 'doesNotContain' | 'equals' etc).
+     * @param {string} fieldValue - The actual value from the data row being evaluated.
+     * @param {string} value - The user-entered filter value to compare against.
+     * @returns {boolean} `true` if the fieldValue satisfies the specified filter condition,
+     *                    otherwise `false`.
+     */
     evaluateTextFilterCondition(type, fieldValue, value) {
         switch (type) {
             case 'contains':
@@ -295,6 +334,14 @@ class CatsDataGridComponent {
                 return true;
         }
     }
+    /**
+     * @description - Evaluates number/date filter conditions.
+     * @author Anand
+     * @param {string} type - Comparison operator ('=' | '>' | '<' | '>=' | '<=').
+     * @param {number|string} fieldValue - Actual value from the row (number or timestamp).
+     * @param {number|string} value - User-entered value for comparison.
+     * @returns {boolean} True if the condition matches, otherwise false.
+     */
     evaluateNumDateFilterCondition(type, fieldValue, value) {
         switch (type) {
             case '=':
@@ -312,7 +359,7 @@ class CatsDataGridComponent {
         }
     }
     /**
-     * @description Method to filter data according to dataType and comparator selection
+     * @description Method to filter data according to filterType and comparator selection
      * @author Anand Pandey
      * @param {}
      * @returns void
@@ -322,7 +369,7 @@ class CatsDataGridComponent {
         this.colDefs.forEach((col) => {
             const field = col.fieldName;
             // *********** TEXT FILTER ***********
-            if (col.dataType === 'text') {
+            if (col.filterType === 'text') {
                 const [c1, c2] = col.textFilters;
                 const textVal1 = c1.filterValue?.toLowerCase().trim();
                 const textVal2 = c2.filterValue?.toLowerCase().trim();
@@ -343,61 +390,63 @@ class CatsDataGridComponent {
                 });
             }
             // *********** NUMBER FILTER ***********
-            if (col.dataType === 'number') {
-                if (col.numberValue.trim()) {
-                    const [c1, c2] = col.numberFilters;
-                    const numValue1 = Number(c1.numberValue);
-                    const numValue2 = Number(c2.numberValue);
-                    const num = Number(col.numberValue);
-                    if (!numValue1 && !numValue2) {
-                        this.activeFilters.delete(col.fieldName);
-                        return;
-                    }
-                    this.activeFilters.add(col.fieldName);
-                    result = result.filter((r) => {
-                        const fieldVal = Number(r[field]);
-                        const cond1 = numValue1
-                            ? this.evaluateNumDateFilterCondition(c1.filterType, fieldVal, numValue1)
-                            : false;
-                        const cond2 = numValue2
-                            ? this.evaluateNumDateFilterCondition(c2.filterType, fieldVal, numValue2)
-                            : false;
-                        return col.textLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
-                    });
+            if (col.filterType === 'number') {
+                const [c1, c2] = col.numberFilters;
+                const numValue1 = Number(c1.numberValue.trim());
+                const numValue2 = Number(c2.numberValue.trim());
+                if (!numValue1 && !numValue2) {
+                    this.activeFilters.delete(col.fieldName);
+                    return;
                 }
+                this.activeFilters.add(col.fieldName);
+                result = result.filter((r) => {
+                    const fieldVal = Number(r[field]);
+                    const cond1 = numValue1
+                        ? this.evaluateNumDateFilterCondition(c1.filterType, fieldVal, numValue1)
+                        : false;
+                    const cond2 = numValue2
+                        ? this.evaluateNumDateFilterCondition(c2.filterType, fieldVal, numValue2)
+                        : false;
+                    return col.textLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+                });
             }
             // *********** DATE FILTER ***********
-            if (col.dataType === 'date') {
-                if (col.dateValue) {
-                    const selected = this.normalizeDate(col.dateValue);
-                    this.activeFilters.add(col.fieldName);
-                    result = result.filter((r) => {
-                        const valueDate = this.normalizeDate(r[field]);
-                        switch (col.numberCondition) {
-                            case '=':
-                                return valueDate === selected;
-                            case '>':
-                                return valueDate > selected;
-                            case '<':
-                                return valueDate < selected;
-                            case '>=':
-                                return valueDate >= selected;
-                            case '<=':
-                                return valueDate <= selected;
-                            default:
-                                return true; // keep row
-                        }
-                    });
-                }
-                else {
+            if (col.filterType === 'date') {
+                const [c1, c2] = col.dateFilters;
+                const selected1 = this.normalizeDate(c1.dateValue);
+                const selected2 = this.normalizeDate(c2.dateValue);
+                if (!selected1 && !selected2) {
                     this.activeFilters.delete(col.fieldName);
+                    return;
                 }
+                this.activeFilters.add(col.fieldName);
+                result = result.filter((r) => {
+                    const fieldVal = this.normalizeDate(r[field]);
+                    const cond1 = selected1
+                        ? this.evaluateNumDateFilterCondition(c1.filterType, fieldVal ?? r[field], selected1)
+                        : false;
+                    const cond2 = selected2
+                        ? this.evaluateNumDateFilterCondition(c2.filterType, fieldVal ?? r[field], selected2)
+                        : false;
+                    return col.textLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+                });
             }
             // *********** SET FILTER ***********
-            if (col.dataType === 'set') {
+            if (col.filterType === 'set') {
                 if (col.selectedValues.size >= 0 &&
                     col.selectedValues.size !== col.options.length) {
-                    result = result.filter((r) => col.selectedValues.has(r[field]));
+                    result = result.filter((r) => {
+                        const value = r[field];
+                        if (Array.isArray(value) &&
+                            value.every((val) => typeof val !== 'object')) {
+                            return value.some((m) => col.selectedValues.has(m));
+                        }
+                        if (Array.isArray(value) &&
+                            value.every((val) => typeof val === 'object')) {
+                            return value.some((m) => col.selectedValues.has(m[col?.cellRendererParams?.tagKey]));
+                        }
+                        return col.selectedValues.has(r[field]);
+                    });
                     this.activeFilters.add(col.fieldName);
                 }
                 else {
@@ -406,6 +455,8 @@ class CatsDataGridComponent {
             }
         });
         this.filteredData = result;
+        this.rowData = this.filteredData;
+        this.getGroupedData();
         this.filter.emit(this.filteredData);
     }
     /**
@@ -416,6 +467,8 @@ class CatsDataGridComponent {
      */
     normalizeDate(dateStr) {
         const d = new Date(dateStr);
+        if (isNaN(d.getTime()))
+            return null;
         return new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())).getTime();
     }
     /**
@@ -521,8 +574,156 @@ class CatsDataGridComponent {
         else {
             this.descendingOrder(fieldName);
         }
+        this.getGroupedData();
         this.menuVisible[this.currentIndex] = false;
     }
+    /**
+     * @description Generates grouped data based on the selected `groupBy` columns..
+     * @author Anand Pandey
+     * @returns void
+     */
+    getGroupedData() {
+        if (this.groupBy && this.groupBy.length > 0) {
+            this.groupedResult = this.groupData(this.rowData, this.groupBy) || [];
+        }
+    }
+    /**
+     * @description Initializes column resize operation when the user presses the mouse on the resize handle.
+     * @author Anand Pandey
+     * @param {MouseEvent} event - The mousedown event triggered on the resize handle.
+     * @param {number} index - Index of the column being resized.
+     * @returns {void}
+     */
+    startResize(event, index) {
+        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) => {
+        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 Stops the column resizing operation.
+     * Clears resizing state and removes mouse event listeners.
+     * @author Anand Pandey
+     * @param {MouseEvent} event - Mouse up event ending the resize action.
+     * @returns {void}
+     */
+    stopResize = (event) => {
+        event.stopPropagation();
+        this.resizingColumnIndex = null;
+        this.isResizing = false;
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.stopResize);
+    };
+    /**
+     * @description Recursively groups row data into a hierarchical structure based on the provided group keys.
+     * @author Anand Pandey
+     * @param {any[]} data - The row data to be grouped.
+     * @param {string[]} groupKeys - Ordered list of column keys to group by.
+     * @returns {any[]} A hierarchical grouped structure containing nested group nodes.
+     */
+    groupData(data, groupKeys) {
+        if (groupKeys.length === 0)
+            return data;
+        const [currentKey, ...restKeys] = groupKeys;
+        const groups = {};
+        for (const row of data) {
+            const key = row[currentKey] ?? '';
+            if (!groups[key])
+                groups[key] = [];
+            groups[key].push(row);
+        }
+        // recursively group child arrays
+        let result = [];
+        for (const key of Object.keys(groups)) {
+            result.push({
+                key,
+                field: currentKey,
+                expanded: false,
+                children: this.groupData(groups[key], restKeys),
+            });
+        }
+        return result;
+    }
+    /**
+     * @description Toggles the expand/collapse state of a group node.
+     * @author Anand Pandey
+     * @param {any} node - The group node whose expanded state needs to be toggled.
+     * @returns {void}
+     */
+    toggleGroup(node) {
+        node.expanded = !node.expanded;
+    }
+    /**
+     * @description Pin column on the left side.
+     * @author Anand Pandey
+     * @param {any} col - The selected column details from table on clicking pin or unpin from three dots menu.
+     * @param {number} index - The index of column from table on clicking pin or unpin from three dots menu.
+     * @returns {void}
+     */
+    pinColumn(col, index) {
+        col.pinned = !col.pinned;
+        if (col.pinned) {
+            this.colDefs.splice(index, 1);
+            // const pinnedCount = this.colDefs.filter((col) => col.pinned).length;
+            // this.colDefs.splice(pinnedCount, 0, col);
+            this.colDefs = [col, ...this.colDefs];
+        }
+        else {
+            const indx = this.originalColDefs.findIndex((dt) => dt.fieldName === col.fieldName);
+            if (indx > 0) {
+                this.colDefs.splice(index, 1);
+                this.colDefs.splice(indx, 0, col);
+            }
+        }
+        this.colDefs.forEach((dt, indx) => {
+            if (indx > 0 && dt.pinned) {
+                dt.pinned = false;
+                const id = this.originalColDefs.findIndex((colDt) => colDt.fieldName === dt.fieldName);
+                if (id > 0) {
+                    this.colDefs.splice(indx, 1);
+                    this.colDefs.splice(id, 0, dt);
+                }
+            }
+        });
+        this.updatePinnedOffsets();
+        this.onClickOutside();
+    }
+    /**
+     * @description Updates the horizontal left offsets of pinned columns by assigning cumulative widths to each pinned column and resetting non-pinned columns.
+     * @author Anand
+     * @returns void
+     */
+    updatePinnedOffsets() {
+        let leftOffset = 0;
+        this.colDefs.forEach((col) => {
+            if (col.pinned) {
+                col.left = leftOffset;
+                leftOffset += col.width || 120;
+            }
+            else {
+                col.left = null;
+            }
+        });
+    }
     /**
      * @description Method to parse column value from rowdata object
      *  according to given field value in column Defination
@@ -643,10 +844,12 @@ class CatsDataGridComponent {
      * @description method to sort data according to type and column
      * @author Tarun Kumar
      * @param sortingColumIndex
-     * @param fieldName
+     * @param col
      * @param sortingType
      */
-    onSortingRowData(sortingColumIndex, fieldName) {
+    onSortingRowData(sortingColumIndex, col) {
+        if (!col.sortable)
+            return;
         this.sortingColumnIndex = sortingColumIndex;
         this.sortingType = !this.sortingType
             ? 'asc'
@@ -654,11 +857,12 @@ class CatsDataGridComponent {
                 ? 'dsc'
                 : 'asc';
         if (this.sortingType == 'asc' || this.sortingType == '') {
-            this.ascendingOrder(fieldName);
+            this.ascendingOrder(col?.fieldName);
         }
         else {
-            this.descendingOrder(fieldName);
+            this.descendingOrder(col?.fieldName);
         }
+        this.getGroupedData();
     }
     /**
      * @description method to sort table in ascending order according to given field
@@ -744,7 +948,28 @@ class CatsDataGridComponent {
      * @returns {object}
      */
     getStyle(col) {
-        return { width: `${col.width}px` };
+        const style = {
+            width: `${col.width ?? 150}px`,
+            minWidth: `${col.minWidth ?? 50}px`,
+        };
+        if (col.isAction) {
+            style.position = 'sticky';
+            style.right = '0px';
+            style.zIndex = 20;
+            style.background = '#fff';
+            style.width = '30px';
+            style.minWidth = '30px';
+        }
+        else if (col.pinned) {
+            style.position = 'sticky';
+            style.left = col.left + 'px';
+            style.zIndex = 12;
+            style.background = '#fff';
+        }
+        else {
+            style.position = '';
+        }
+        return style;
     }
     onClickOutside() {
         this.showPageSizeList = false;
@@ -782,6 +1007,10 @@ class CatsDataGridComponent {
      * @returns {void}
      */
     onDragStart(event, index) {
+        if (this.isResizing) {
+            event.preventDefault();
+            return;
+        }
         this.draggedIndex = index;
         event.dataTransfer?.setData('text/plain', index.toString());
     }
@@ -793,6 +1022,7 @@ class CatsDataGridComponent {
      */
     onDragOver(event, index) {
         event.preventDefault();
+        this.isResizing = false;
         if (this.dragOverIndex !== index) {
             this.dragOverIndex = index;
         }
@@ -828,10 +1058,10 @@ class CatsDataGridComponent {
         this.activeFilterIndex = this.activeFilterIndex === index ? null : index;
         this.menuVisible = this.menuVisible.map(() => false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\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\r\n              ><input\r\n                class=\"form-check-input cursor-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          } @for (col of colDefs; track $index) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            draggable=\"true\"\r\n            (dragstart)=\"onDragStart($event, $index)\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (dragend)=\"onDragEnd()\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"flex-center\"\r\n                [ngStyle]=\"getStyle(col)\"\r\n                (click)=\"onSortingRowData($index, col?.fieldName)\"\r\n              >\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n                @if (sortingRequired && sortingColumnIndex == $index) {\r\n                <span class=\"headerName-icon\">\r\n                  <ul class=\"\">\r\n                    @if(sortingType){\r\n                    <li class=\"cursor-pointer\">\r\n                      <img\r\n                        src=\"images/sort_up.svg\"\r\n                        class=\"sorting_up\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'asc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n                    <li class=\"cursor-pointer\">\r\n                      <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                      <img\r\n                        src=\"images/sort_down.svg\"\r\n                        class=\"sorting_down\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'dsc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n\r\n                    }\r\n                  </ul>\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.filter){\r\n                <div\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  <img\r\n                    src=\"images/filter-icon.svg\"\r\n                    class=\"filter-icon\"\r\n                    [ngClass]=\"\r\n                      activeFilters.has(col.fieldName)\r\n                        ? 'filter-icon-active'\r\n                        : 'filter-icon'\r\n                    \"\r\n                  />\r\n\r\n                  @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    class=\"filter-popup\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.dataType === 'text'){\r\n                    <select [(ngModel)]=\"col.textFilters[0].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\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\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.textFilters[1].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\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\r\n                    <!-- Number Filter -->\r\n                    @if(col.dataType === 'number'){\r\n                    <select [(ngModel)]=\"col.numberFilters[0].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\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                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.numberFilters[1].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\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                    <ng-container *ngIf=\"col.dataType === 'date'\">\r\n                      <select [(ngModel)]=\"col.numberCondition\">\r\n                        <option value=\"=\">Equals</option>\r\n                        <option value=\">\">Greater Than</option>\r\n                        <option value=\"<\">Less Than</option>\r\n                        <option value=\">=\">>=</option>\r\n                        <option value=\"<=\"><=</option>\r\n                      </select>\r\n                      <input\r\n                        type=\"date\"\r\n                        [(ngModel)]=\"col.dateValue\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                    </ng-container>\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    <ng-container *ngIf=\"col.dataType === 'set'\">\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n\r\n                      <div class=\"set-options\">\r\n                        <label>\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\r\n                        <label *ngFor=\"let opt of col.filteredOptions\">\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                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                @if(threeDotsMenuRequired && col.menu){\r\n\r\n                <div class=\"three-dots\" (click)=\"openMenu($event, col, $index)\">\r\n                  <img src=\"images/more-vertical.svg\" />\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            <div\r\n              class=\"column-menu\"\r\n              *ngIf=\"menuVisible[$index]\"\r\n              [ngStyle]=\"menuPosition[$index]\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <ul>\r\n                @if(sortingType === 'dsc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'asc')\">\r\n                  <img src=\"images/arrow-up.svg\" class=\"sorting_up\" />\r\n                  Sort Ascending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'dsc')\">\r\n                  <img src=\"images/arrow-down.svg\" class=\"sorting_up\" />\r\n                  Sort Descending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === 'dsc'){\r\n                <li (click)=\"onSort(col?.fieldName, '')\">\r\n                  <span>\r\n                    <img src=\"images/chevron-up.svg\" class=\"sorting_up\" />\r\n                    <img src=\"images/chevron-down.svg\" class=\"sorting_up\" />\r\n                  </span>\r\n                  Clear Sort\r\n                </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @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\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"form-check-input pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"checkboxInput\">\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            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track $index) {\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\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col.fieldName) }}\r\n              </div>\r\n              <div class=\"see_more_data\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\">\r\n                    {{ parseColValue(data, col.fieldName) }}</span\r\n                  >\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 [attr.colspan]=\"colDefs.length + 1\">\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    </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\r\n        class=\"pagination_select\"\r\n        appOutsideClick\r\n        (clickOutside)=\"onClickOutside()\"\r\n      >\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 flex-center\">\r\n      <span>Page</span>\r\n\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> < </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style right\"\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> > </span>\r\n      </button>\r\n      <span>of {{ pageDetails.totalPages }}</span>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n", styles: [":root{--white: #fff;--white-creame: #ebf3ff;--border: #dae3f8;--scrollbar: var(--border);--textPrimary: #0b1c33;--textPrimary70: #0b1c33b3;--textSecondary: #556171;--textSecondary50: #55617180;--textSecondary70: #556171b3;--pink-10: #f9fbfe;--ice-blue: #67adcf;--primaryBlue: #017db9;--primaryBlue70: #017db9be;--blue-10: #edf4fe;--blue-40: #e3f3fc;--blue-50: #f2f5fa;--blue-5050: #f2f5fa80;--blue-100: #c8e2ff;--blue-200: #a4cfff;--blue-300: #2680ea;--blue-500: #3788e5;--blue-700: #007aff;--yellow-50: #ffeedf;--yellow-100: #fed18f;--yellow-200: #ffbca6;--yellow-300: #f08a2b26;--yellow-400: #e58900;--primaryOrange: #f05a2b;--primaryOrange50: #f05a2b80;--primaryOrange70: #f05a2bb3;--orange-10: #fcf5eb;--orange-200: #f7ac94;--orange-300: #fb9676;--theadBg: var(--blue-50);--pagination-bg: #f7fafe;--blue-200: var(--border);--neutral-200: #dadbdc;--neutral-600: #040d17;--toastShadow: #0000001f;--dropdown-shadow: #00000014;--green-50: #eaf8f1;--green-100: #bde8d3;--green-600: #27a468;--red-10: #fcebef;--red-20: #ca0000;--red-30: #F7C1CE;--error-red: #d03258;--tableBorder: var(--border);--grey-50: #a5b0bf;--grey-100: #333333;--grey-200: #222A3D;--capture-border: #9badca;--captcha-bg: #f3f3f3;--neutral-400: #81858a}html{font-size:12px}.row_div{min-height:calc(4.5rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .col_div{width:50%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .label{width:calc(16.6666666667rem / var(--scale));min-width:calc(16.6666666667rem / var(--scale));padding:0 calc(2rem / var(--scale));color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.25rem / var(--scale))}.row_div .label sup{top:calc(-.1666666667rem / var(--scale))}.row_div .field{padding:calc(.6666666667rem / var(--scale)) calc(2rem / var(--scale));flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:\"\";color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.row_div .field li{list-style:disc;line-height:calc(2.6666666667rem / var(--scale));margin-left:calc(1.5rem / var(--scale))}textarea,input,.ordered_textarea{color:var(--textPrimary)}.errorField{flex-direction:column;align-items:start}.errorField .error{max-width:calc(37.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:0}.errorField .error i-feather[name=info]{padding-right:calc(.3333333333rem / var(--scale));display:flex;stroke:var(--error-red);width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.errorField textarea,.errorField input,.errorField .ordered_textarea{color:var(--textPrimary);border:calc(.0833333333rem / var(--scale)) solid var(--error-red)}.errorField .error{padding-top:calc(.6666666667rem / var(--scale));color:var(--error-red);font-size:var(--fs-12);line-height:140%;font-weight:400}sup{color:var(--error-red)}input::placeholder,textarea::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;min-height:calc(9rem / var(--scale));resize:none}input{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale))}input.disable{background-color:var(--blue-50);pointer-events:none}.ordered_textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;list-style:disc;min-height:calc(9rem / var(--scale))}.ordered_textarea ul{padding-left:calc(2.6666666667rem / var(--scale));outline:none}.ordered_textarea ul.editable-div{min-height:calc(6rem / var(--scale));max-height:calc(9.3333333333rem / var(--scale));overflow:auto}.ordered_textarea ul li{margin-left:calc(1.75rem / var(--scale));list-style:disc;color:var(--textPrimary);font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400}.custom_radio{display:inline-flex;align-items:center;min-width:calc(18.5833333333rem / var(--scale))}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-16);line-height:140%;font-weight:400}.custom_radio.disabled .name{color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--border);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.dob_age_field{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale));background-color:var(--blue-50);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.dob_age_field .dob,.dob_age_field .age{font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textSecondary)}.dob_age_field .age{padding-left:calc(.8333333333rem / var(--scale))}.dob_age_field .dob{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:50%;height:100%;padding-right:calc(.8333333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border)}.dob_age_field .dob img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.date{position:relative;width:100%}.date img{position:absolute;right:calc(1.3333333333rem / var(--scale));top:calc(1.25rem / var(--scale))}input[type=checkbox]{margin-right:calc(.6666666667rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}ol li{list-style:auto!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Rethink}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}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale))}.none{display:none}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}tbody{background-color:var(--white)}tbody tr{overflow:visible}tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}tbody td{overflow:visible;position:relative;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textPrimary);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding-block:calc(.5rem / var(--scale))}tbody td .tooltip_container{max-width:calc(100% - 2.5rem / var(--scale));height:auto;position:absolute;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);z-index:100;display:none;border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));white-space:normal;word-wrap:break-word;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}tbody td:hover .tooltip_container{display:block}tbody td:last-child ::ng-deep .see_more_data{right:0!important}.tableArea .table_wrapper table thead tr{height:calc(4.5rem / var(--scale));color:var(--textPrimary)}.tableArea .table_wrapper table thead tr img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr .theading{height:calc(2.25rem / var(--scale))}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0}.tableArea .table_wrapper table thead tr .three_dot{flex-grow:1;margin:0 calc(.3333333333rem / var(--scale)) 0 0;display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:0}.tableArea .table_wrapper table thead tr .three_dot img{cursor:pointer}.tableArea .table_wrapper table thead tr th{flex-shrink:0;background-color:var(--theadBg)}.tableArea .table_wrapper table thead tr th:hover .none{display:block}.tableArea .table_wrapper table thead tr th:hover .up,.tableArea .table_wrapper table thead tr th:hover .down{display:none}.tableArea .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:400;border-top:calc(.0833333333rem / var(--scale)) solid var(--tableBorder);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{background-color:var(--pink-10)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td .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 tbody tr.td_80{height:calc(6.6666666667rem / var(--scale))}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{text-align:left;padding-left:calc(1.1666666667rem / var(--scale));line-height:1}.thead-img{position:relative}.swap-img{position:absolute;left:calc(.6666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.header-content{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.header-content .filtering_container{width:calc(20rem / var(--scale));max-height:calc(23.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);position:absolute;z-index:2;right:0;top:calc(2.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:\"\"}.header-content .filtering_container .filter{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-900);padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));border:none;width:100%;background-color:var(--white);display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.header-content .filtering_container .filter.top_border{border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.tableArea .table_wrapper .headerName ul,.tableArea .table_wrapper .headerName-icon ul{display:flex}.tableArea .table_wrapper table ul{list-style-type:none;padding:0;margin-bottom:0}.tableArea .table_wrapper table ul li{height:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);list-style-type:none}.tableArea .table_wrapper table .sorting_up,.tableArea .table_wrapper table .sorting_down{width:calc(.5833333333rem / var(--scale));height:calc(.3333333333rem / var(--scale))}.tableArea .table_wrapper .headerName,.tableArea .table_wrapper .headerName-icon{margin-left:calc(.5rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary70);height:-webkit-fill-available}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(5.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.pagination_main .pagination_form i-feather{font-weight:600;color:var(--neutral-600)}.pagination_main span{color:var(--textSecondary);font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.pagination_main i-feather{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));color:var(--neutral-600)}.pagination_main .input_style{width:calc(4rem / var(--scale));height:calc(1.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));color:var(--neutral-600);text-align:center;margin:0 calc(.5rem / var(--scale));outline:none}.pagination_main .input_style option{font-size:1rem}.pagination_main .input_style.right{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;margin:0;color:var(--textPrimary);padding:0}.pagination_main .input_style.left{background-color:var(--pagination-bg);color:var(--blue-700);border:none}.pagination_main .outlined_btn{background:transparent;border:solid calc(.0833333333rem / var(--scale)) var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);color:var(--btn-outline)}.pagination_main .prev_btn,.pagination_main .next_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(1.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .disable_btn{background-color:var(--blue-200);pointer-events:none;color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--blue-200)}.pagination_main .disable_btn i-feather{color:var(--white)}.table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border-top-left-radius:calc(1.3333333333rem / var(--scale));border-top-right-radius:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--tableBorder)}.data-table-td .td_wrapper{height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale))}.pagination_main .input_style.left{appearance:none;padding-right:calc(1rem / var(--scale));background-position:80% 50%;width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border-radius:calc(.6666666667rem / var(--scale))}.data-table-td{background-color:var(--blue-50);font-size:var(--fs-16)}.data-table-td i-feather{background-color:var(--white);border-radius:calc(.25rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) 0 #00000014;color:var(--neutral-500)}.data-table-td span{vertical-align:middle}.setting-options{position:absolute;right:0;background:var(--white);z-index:2;box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);max-height:calc(37.3333333333rem / var(--scale));width:calc(20.8333333333rem / var(--scale));overflow:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.column-item,.column-header{margin-bottom:calc(1.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.column-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.column-item input[type=checkbox]{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));margin:0;border-radius:var(--fs-6)}.column-item:last-child{margin-bottom:0}.disabled_col{pointer-events:none;background-color:var(--neutral-50)}.entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.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))}.sticky-top{top:calc(-.0833333333rem / var(--scale))}.thead-img .theading .left{gap:calc(.6666666667rem / var(--scale))}.ms-1.headerName-icon{min-width:calc(1.5rem / var(--scale))}.custom_radio{display:inline-flex;align-items:center;min-width:calc(1.6666666667rem / var(--scale))!important}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-20);line-height:calc(2rem / var(--scale));font-weight:400}.custom_radio.disabled{pointer-events:none}.custom_radio.disabled .radio_mark{background-color:var(--neutral-100);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.custom_radio.disabled .name{color:var(--neutral-300)}.custom_radio .name{padding-right:calc(1.9166666667rem / var(--scale))}.custom_radio input[type=radio]{display:none}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--blue-700);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.custom_radio input[type=radio]:checked+.radio_mark{background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.custom_radio input[type=radio]:checked+.radio_mark:after{opacity:1}.pagination_form{gap:calc(1.3333333333rem / var(--scale))}.pagination_select{position:relative}.select_dropdown{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-50);border-radius:calc(.6666666667rem / var(--scale));margin:0 calc(.5rem / var(--scale))}.select_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700)}.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(--dropdown-shadow);border-radius:calc(.6666666667rem / var(--scale));left:calc(.5rem / var(--scale));z-index:10;padding:calc(.1666666667rem / var(--scale)) 0;margin:calc(.3333333333rem / var(--scale)) 0}.select_option span{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);padding-left:calc(1rem / var(--scale))}.chevron_img{color:var(--neutral-600);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}.chevron_img img{width:calc(.8333333333rem / 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-100);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)}.openClose_dropdown{background-color:var(--neutral-50);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));display:flex}.openClose_dropdown i-feather{transform-origin:center;transition:.3s;display:flex;stroke:var(--neutral-600)}.openClose_dropdown i-feather.rotate{transform:rotate(90deg)}.cell-value{line-height:140%}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(19.0833333333rem / var(--scale));height:\"\";background-color:var(--blue-50);border-radius:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);padding:calc(.6666666667rem / var(--scale)) 0;display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:10;top:calc(3.3333333333rem / var(--scale))}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--grey-100);font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.cell-value.ellipsis:hover .see_more_data{display:flex}.flex-center{display:flex;align-items:center}.cursor-pointer{cursor:pointer}.d-none{display:none}.sort_icons{display:flex;flex-direction:column;gap:calc(.4166666667rem / var(--scale))}.filters{position:relative;display:inline-block;margin-left:6px;cursor:pointer}.filter-icon{width:14px;opacity:.6}.filter-icon-active{background-color:#0ff}.filter-icon:hover{opacity:1}.filter-popup{position:absolute;top:20px;left:0;width:160px;background:#fff;border:1px solid #ddd;padding:8px;box-shadow:0 3px 8px #00000026;border-radius:4px;z-index:99}.filter-popup select,.filter-popup input{width:100%;margin-bottom:8px;padding:4px;font-size:13px}.reset-btn{width:100%;padding:4px;font-size:12px}.set-options{max-height:180px;overflow-y:auto;padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:13px}.set-options label{display:flex;align-items:center;gap:6px;padding:6px 4px;cursor:pointer;border-radius:4px}.set-options label:hover{background:#f3f3f3}.set-options input[type=checkbox]{width:14px;height:14px;cursor:pointer}.set-options label:first-child{font-weight:600;border-bottom:1px solid #e5e5e5;margin-bottom:6px;padding-bottom:8px}.th_wraper{display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px}.three-dots{cursor:pointer;padding:2px 4px;font-size:13px;-webkit-user-select:none;user-select:none}.three-dots:hover{background:#eee;border-radius:4px}.column-menu{position:absolute;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;padding:6px 0;min-width:160px}.column-menu ul{margin:0;padding:0;list-style:none}.column-menu li{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;font-size:14px}.column-menu li:hover{background:#f3f3f3}.column-menu hr{border:none;border-top:1px solid #eee;margin:4px 0}.filter_three_dot_wrapper{display:flex;justify-content:space-between;align-items:center}.logic-row{display:flex;align-items:center;gap:16px;margin:8px 0 6px 4px}.logic-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#444}.logic-item input[type=radio]{width:14px;height:14px;accent-color:#2b7cff;cursor:pointer}.logic-item span{cursor:pointer;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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", groupBy: "groupBy", pageSizeList: "pageSizeList" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tableArea\">\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\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\r\n              ><input\r\n                class=\"form-check-input cursor-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          } @for (col of colDefs; track $index) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            [draggable]=\"!isResizing\"\r\n            (dragstart)=\"onDragStart($event, $index)\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (dragend)=\"onDragEnd()\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"flex-center\"\r\n                [ngStyle]=\"getStyle(col)\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable) {\r\n                <span class=\"headerName-icon\">\r\n                  <ul class=\"\">\r\n                    @if(sortingType){\r\n                    <li class=\"cursor-pointer\">\r\n                      <img\r\n                        src=\"images/sort_up.svg\"\r\n                        class=\"sorting_up\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'asc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n                    <li class=\"cursor-pointer\">\r\n                      <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                      <img\r\n                        src=\"images/sort_down.svg\"\r\n                        class=\"sorting_down\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'dsc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n\r\n                    }\r\n                  </ul>\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                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  <img\r\n                    src=\"images/filter-icon.svg\"\r\n                    class=\"filter-icon\"\r\n                    [ngClass]=\"\r\n                      activeFilters.has(col.fieldName)\r\n                        ? 'filter-icon-active'\r\n                        : 'filter-icon'\r\n                    \"\r\n                  />\r\n\r\n                  @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    class=\"filter-popup\"\r\n                    id=\"filter-popup-{{ $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                    <select [(ngModel)]=\"col.textFilters[0].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\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\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.textFilters[1].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\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\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n                    <select [(ngModel)]=\"col.numberFilters[0].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\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                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.numberFilters[1].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\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                    <select [(ngModel)]=\"col.dateFilters[0].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n                    <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    />\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n                    <select [(ngModel)]=\"col.dateFilters[1].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n                    <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    />\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\r\n                    <div class=\"set-options\">\r\n                      <label>\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\r\n                      @for(opt of col.filteredOptions; track $index){\r\n                      <label>\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                    }\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                <div class=\"three-dots\" (click)=\"openMenu($event, col, $index)\">\r\n                  <img src=\"images/more-vertical.svg\" />\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=\"column-menu\"\r\n              [ngStyle]=\"menuPosition[$index]\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <ul>\r\n                @if(sortingType === 'dsc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'asc')\">\r\n                  <img src=\"images/arrow-up.svg\" class=\"sorting_up\" />\r\n                  Sort Ascending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'dsc')\">\r\n                  <img src=\"images/arrow-down.svg\" class=\"sorting_up\" />\r\n                  Sort Descending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === 'dsc'){\r\n                <li (click)=\"onSort(col?.fieldName, '')\">\r\n                  <span>\r\n                    <img src=\"images/chevron-up.svg\" class=\"sorting_up\" />\r\n                    <img src=\"images/chevron-down.svg\" class=\"sorting_up\" />\r\n                  </span>\r\n                  Clear Sort\r\n                </li>\r\n                }\r\n                <li (click)=\"pinColumn(col, $index)\">\r\n                  <img src=\"images/pin.svg\" class=\"sorting_up\" />\r\n                  {{ col.pinned ? \"Unpin Column\" : \"Pin Column\" }}\r\n                </li>\r\n              </ul>\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]=\"colDefs.length + (checkBoxSelection ? 1 : 0)\"\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            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            <input type=\"checkbox\" [checked]=\"row.isSelected\" />\r\n          </td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track $index) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            {{ row[col.fieldName] }}\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\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"form-check-input pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"checkboxInput\">\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            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track $index) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[\r\n              col?.addClass ? col.addClass(data) : '',\r\n              col.pinned ? 'pinned' : ''\r\n            ]\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col.fieldName) }}\r\n              </div>\r\n              <div class=\"see_more_data\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\">\r\n                    {{ parseColValue(data, col.fieldName) }}</span\r\n                  >\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 [attr.colspan]=\"colDefs.length + 1\">\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-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"colDefs.length + (checkBoxSelection ? 1 : 0)\"\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            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        <tr>\r\n          @if (checkBoxSelection) {\r\n          <td><input type=\"checkbox\" [checked]=\"row.isSelected\" /></td>\r\n          } @for (col of colDefs; track $index) {\r\n          <td>{{ row[col.fieldName] }}</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\r\n        class=\"pagination_select\"\r\n        appOutsideClick\r\n        (clickOutside)=\"onClickOutside()\"\r\n      >\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 flex-center\">\r\n      <span>Page</span>\r\n\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> < </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style right\"\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> > </span>\r\n      </button>\r\n      <span>of {{ pageDetails.totalPages }}</span>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n", styles: [":root{--white: #fff;--white-creame: #ebf3ff;--border: #dae3f8;--scrollbar: var(--border);--textPrimary: #0b1c33;--textPrimary70: #0b1c33b3;--textSecondary: #556171;--textSecondary50: #55617180;--textSecondary70: #556171b3;--pink-10: #f9fbfe;--ice-blue: #67adcf;--primaryBlue: #017db9;--primaryBlue70: #017db9be;--blue-10: #edf4fe;--blue-40: #e3f3fc;--blue-50: #f2f5fa;--blue-5050: #f2f5fa80;--blue-100: #c8e2ff;--blue-200: #a4cfff;--blue-300: #2680ea;--blue-500: #3788e5;--blue-700: #007aff;--yellow-50: #ffeedf;--yellow-100: #fed18f;--yellow-200: #ffbca6;--yellow-300: #f08a2b26;--yellow-400: #e58900;--primaryOrange: #f05a2b;--primaryOrange50: #f05a2b80;--primaryOrange70: #f05a2bb3;--orange-10: #fcf5eb;--orange-200: #f7ac94;--orange-300: #fb9676;--theadBg: var(--blue-50);--pagination-bg: #f7fafe;--blue-200: var(--border);--neutral-200: #dadbdc;--neutral-600: #040d17;--toastShadow: #0000001f;--dropdown-shadow: #00000014;--green-50: #eaf8f1;--green-100: #bde8d3;--green-600: #27a468;--red-10: #fcebef;--red-20: #ca0000;--red-30: #F7C1CE;--error-red: #d03258;--tableBorder: var(--border);--grey-50: #a5b0bf;--grey-100: #333333;--grey-200: #222A3D;--capture-border: #9badca;--captcha-bg: #f3f3f3;--neutral-400: #81858a}html{font-size:12px}.row_div{min-height:calc(4.5rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .col_div{width:50%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .label{width:calc(16.6666666667rem / var(--scale));min-width:calc(16.6666666667rem / var(--scale));padding:0 calc(2rem / var(--scale));color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.25rem / var(--scale))}.row_div .label sup{top:calc(-.1666666667rem / var(--scale))}.row_div .field{padding:calc(.6666666667rem / var(--scale)) calc(2rem / var(--scale));flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:\"\";color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.row_div .field li{list-style:disc;line-height:calc(2.6666666667rem / var(--scale));margin-left:calc(1.5rem / var(--scale))}textarea,input,.ordered_textarea{color:var(--textPrimary)}.errorField{flex-direction:column;align-items:start}.errorField .error{max-width:calc(37.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:0}.errorField .error i-feather[name=info]{padding-right:calc(.3333333333rem / var(--scale));display:flex;stroke:var(--error-red);width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.errorField textarea,.errorField input,.errorField .ordered_textarea{color:var(--textPrimary);border:calc(.0833333333rem / var(--scale)) solid var(--error-red)}.errorField .error{padding-top:calc(.6666666667rem / var(--scale));color:var(--error-red);font-size:var(--fs-12);line-height:140%;font-weight:400}sup{color:var(--error-red)}input::placeholder,textarea::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;min-height:calc(9rem / var(--scale));resize:none}input{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale))}input.disable{background-color:var(--blue-50);pointer-events:none}.ordered_textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;list-style:disc;min-height:calc(9rem / var(--scale))}.ordered_textarea ul{padding-left:calc(2.6666666667rem / var(--scale));outline:none}.ordered_textarea ul.editable-div{min-height:calc(6rem / var(--scale));max-height:calc(9.3333333333rem / var(--scale));overflow:auto}.ordered_textarea ul li{margin-left:calc(1.75rem / var(--scale));list-style:disc;color:var(--textPrimary);font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400}.custom_radio{display:inline-flex;align-items:center;min-width:calc(18.5833333333rem / var(--scale))}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-16);line-height:140%;font-weight:400}.custom_radio.disabled .name{color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--border);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.dob_age_field{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale));background-color:var(--blue-50);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.dob_age_field .dob,.dob_age_field .age{font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textSecondary)}.dob_age_field .age{padding-left:calc(.8333333333rem / var(--scale))}.dob_age_field .dob{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:50%;height:100%;padding-right:calc(.8333333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border)}.dob_age_field .dob img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.date{position:relative;width:100%}.date img{position:absolute;right:calc(1.3333333333rem / var(--scale));top:calc(1.25rem / var(--scale))}input[type=checkbox]{margin-right:calc(.6666666667rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}ol li{list-style:auto!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Rethink}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}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale))}.none{display:none}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:2;background-color:var(--white)}thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}tbody{background-color:var(--white)}tbody tr{overflow:visible}tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}tbody td{overflow:visible;position:relative;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textPrimary);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding-block:calc(.5rem / var(--scale))}tbody td .tooltip_container{max-width:calc(100% - 2.5rem / var(--scale));height:auto;position:absolute;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);z-index:100;display:none;border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));white-space:normal;word-wrap:break-word;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}tbody td:hover .tooltip_container{display:block}tbody td:last-child ::ng-deep .see_more_data{right:0!important}.tableArea .table_wrapper table thead tr{height:calc(4.5rem / var(--scale));color:var(--textPrimary)}.tableArea .table_wrapper table thead tr img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr .theading{height:calc(2.25rem / var(--scale))}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0}.tableArea .table_wrapper table thead tr .three_dot{flex-grow:1;margin:0 calc(.3333333333rem / var(--scale)) 0 0;display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:0}.tableArea .table_wrapper table thead tr .three_dot img{cursor:pointer}.tableArea .table_wrapper table thead tr th{flex-shrink:0;background-color:var(--theadBg)}.tableArea .table_wrapper table thead tr th:hover .none{display:block}.tableArea .table_wrapper table thead tr th:hover .up,.tableArea .table_wrapper table thead tr th:hover .down{display:none}.tableArea .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:400;border-top:calc(.0833333333rem / var(--scale)) solid var(--tableBorder);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{background-color:var(--pink-10)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td .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 tbody tr.td_80{height:calc(6.6666666667rem / var(--scale))}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{text-align:left;padding-left:calc(1.1666666667rem / var(--scale));line-height:1}.thead-img{position:relative}.swap-img{position:absolute;left:calc(.6666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.header-content{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.header-content .filtering_container{width:calc(20rem / var(--scale));max-height:calc(23.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);position:fixed;z-index:2;right:0;top:calc(2.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:\"\"}.header-content .filtering_container .filter{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-900);padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));border:none;width:100%;background-color:var(--white);display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.header-content .filtering_container .filter.top_border{border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.tableArea .table_wrapper .headerName ul,.tableArea .table_wrapper .headerName-icon ul{display:flex}.tableArea .table_wrapper table ul{list-style-type:none;padding:0;margin-bottom:0}.tableArea .table_wrapper table ul li{height:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);list-style-type:none}.tableArea .table_wrapper table .sorting_up,.tableArea .table_wrapper table .sorting_down{width:calc(.5833333333rem / var(--scale));height:calc(.3333333333rem / var(--scale))}.tableArea .table_wrapper .headerName,.tableArea .table_wrapper .headerName-icon{margin-left:calc(.5rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary70);height:-webkit-fill-available}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(5.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.pagination_main .pagination_form i-feather{font-weight:600;color:var(--neutral-600)}.pagination_main span{color:var(--textSecondary);font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.pagination_main i-feather{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));color:var(--neutral-600)}.pagination_main .input_style{width:calc(4rem / var(--scale));height:calc(1.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));color:var(--neutral-600);text-align:center;margin:0 calc(.5rem / var(--scale));outline:none}.pagination_main .input_style option{font-size:1rem}.pagination_main .input_style.right{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;margin:0;color:var(--textPrimary);padding:0}.pagination_main .input_style.left{background-color:var(--pagination-bg);color:var(--blue-700);border:none}.pagination_main .outlined_btn{background:transparent;border:solid calc(.0833333333rem / var(--scale)) var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);color:var(--btn-outline)}.pagination_main .prev_btn,.pagination_main .next_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(1.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .disable_btn{background-color:var(--blue-200);pointer-events:none;color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--blue-200)}.pagination_main .disable_btn i-feather{color:var(--white)}.table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border-top-left-radius:calc(1.3333333333rem / var(--scale));border-top-right-radius:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--tableBorder)}.data-table-td .td_wrapper{height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale))}.pagination_main .input_style.left{appearance:none;padding-right:calc(1rem / var(--scale));background-position:80% 50%;width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border-radius:calc(.6666666667rem / var(--scale))}.data-table-td{background-color:var(--blue-50);font-size:var(--fs-16)}.data-table-td i-feather{background-color:var(--white);border-radius:calc(.25rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) 0 #00000014;color:var(--neutral-500)}.data-table-td span{vertical-align:middle}.setting-options{position:absolute;right:0;background:var(--white);z-index:2;box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);max-height:calc(37.3333333333rem / var(--scale));width:calc(20.8333333333rem / var(--scale));overflow:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.column-item,.column-header{margin-bottom:calc(1.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.column-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.column-item input[type=checkbox]{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));margin:0;border-radius:var(--fs-6)}.column-item:last-child{margin-bottom:0}.disabled_col{pointer-events:none;background-color:var(--neutral-50)}.entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.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))}.sticky-top{top:calc(-.0833333333rem / var(--scale))}.thead-img .theading .left{gap:calc(.6666666667rem / var(--scale))}.ms-1.headerName-icon{min-width:calc(1.5rem / var(--scale))}.custom_radio{display:inline-flex;align-items:center;min-width:calc(1.6666666667rem / var(--scale))!important}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-20);line-height:calc(2rem / var(--scale));font-weight:400}.custom_radio.disabled{pointer-events:none}.custom_radio.disabled .radio_mark{background-color:var(--neutral-100);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.custom_radio.disabled .name{color:var(--neutral-300)}.custom_radio .name{padding-right:calc(1.9166666667rem / var(--scale))}.custom_radio input[type=radio]{display:none}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--blue-700);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.custom_radio input[type=radio]:checked+.radio_mark{background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.custom_radio input[type=radio]:checked+.radio_mark:after{opacity:1}.pagination_form{gap:calc(1.3333333333rem / var(--scale))}.pagination_select{position:relative}.select_dropdown{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-50);border-radius:calc(.6666666667rem / var(--scale));margin:0 calc(.5rem / var(--scale))}.select_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700)}.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(--dropdown-shadow);border-radius:calc(.6666666667rem / var(--scale));left:calc(.5rem / var(--scale));z-index:10;padding:calc(.1666666667rem / var(--scale)) 0;margin:calc(.3333333333rem / var(--scale)) 0}.select_option span{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);padding-left:calc(1rem / var(--scale))}.chevron_img{color:var(--neutral-600);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}.chevron_img img{width:calc(.8333333333rem / 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-100);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)}.openClose_dropdown{background-color:var(--neutral-50);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));display:flex}.openClose_dropdown i-feather{transform-origin:center;transition:.3s;display:flex;stroke:var(--neutral-600)}.openClose_dropdown i-feather.rotate{transform:rotate(90deg)}.cell-value{line-height:140%}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(19.0833333333rem / var(--scale));height:\"\";background-color:var(--blue-50);border-radius:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);padding:calc(.6666666667rem / var(--scale)) 0;display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:10;top:calc(3.3333333333rem / var(--scale))}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--grey-100);font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.cell-value.ellipsis:hover .see_more_data{display:flex}.flex-center{display:flex;align-items:center}.cursor-pointer{cursor:pointer}.d-none{display:none}.sort_icons{display:flex;flex-direction:column;gap:calc(.4166666667rem / var(--scale))}.filters{position:relative;display:inline-block;margin-left:6px;cursor:pointer}.filter-icon{width:14px;opacity:.6}.filter-icon-active{background-color:#0ff}.filter-icon:hover{opacity:1}.filter-popup{position:absolute;top:20px;left:0;width:160px;background:#fff;border:1px solid #ddd;padding:8px;box-shadow:0 3px 8px #00000026;border-radius:4px;z-index:99}.filter-popup select,.filter-popup input{width:100%;margin-bottom:8px;padding:4px;font-size:13px}.reset-btn{width:100%;padding:4px;font-size:12px}.set-options{max-height:180px;overflow-y:auto;padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:13px}.set-options label{display:flex;align-items:center;gap:6px;padding:6px 4px;cursor:pointer;border-radius:4px}.set-options label:hover{background:#f3f3f3}.set-options input[type=checkbox]{width:14px;height:14px;cursor:pointer}.set-options label:first-child{font-weight:600;border-bottom:1px solid #e5e5e5;margin-bottom:6px;padding-bottom:8px}.th_wraper{position:relative;display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px}.three-dots{cursor:pointer;padding:2px 4px;font-size:13px;-webkit-user-select:none;user-select:none}.three-dots:hover{background:#eee;border-radius:4px}.column-menu{position:fixed;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;padding:6px 0;min-width:160px}.column-menu ul{margin:0;padding:0;list-style:none}.column-menu li{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;font-size:14px}.column-menu li:hover{background:#f3f3f3}.column-menu hr{border:none;border-top:1px solid #eee;margin:4px 0}.filter_three_dot_wrapper{display:flex;justify-content:space-between;align-items:center}.logic-row{display:flex;align-items:center;gap:16px;margin:8px 0 6px 4px}.logic-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#444}.logic-item input[type=radio]{width:14px;height:14px;accent-color:#2b7cff;cursor:pointer}.logic-item span{cursor:pointer;font-weight:500}.resizable-header{position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none}.resize-handle{position:absolute;right:0;top:30%;width:6px;height:100%;color:gray;font-size:larger;cursor:w-resize}.group-cell{padding:8px 12px}.group-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.group-toggle img{width:14px;height:14px}.pinned{z-index:11!important}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatsDataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CatsDataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cats-data-grid', imports: [
                         CommonModule,
@@ -839,7 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         OutsideClickDirective,
                         RendererParserDirective,
                         AddClassPipe,
-                    ], template: "<div class=\"tableArea\">\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\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\r\n              ><input\r\n                class=\"form-check-input cursor-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          } @for (col of colDefs; track $index) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            draggable=\"true\"\r\n            (dragstart)=\"onDragStart($event, $index)\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (dragend)=\"onDragEnd()\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"flex-center\"\r\n                [ngStyle]=\"getStyle(col)\"\r\n                (click)=\"onSortingRowData($index, col?.fieldName)\"\r\n              >\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n                @if (sortingRequired && sortingColumnIndex == $index) {\r\n                <span class=\"headerName-icon\">\r\n                  <ul class=\"\">\r\n                    @if(sortingType){\r\n                    <li class=\"cursor-pointer\">\r\n                      <img\r\n                        src=\"images/sort_up.svg\"\r\n                        class=\"sorting_up\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'asc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n                    <li class=\"cursor-pointer\">\r\n                      <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                      <img\r\n                        src=\"images/sort_down.svg\"\r\n                        class=\"sorting_down\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'dsc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n\r\n                    }\r\n                  </ul>\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.filter){\r\n                <div\r\n                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  <img\r\n                    src=\"images/filter-icon.svg\"\r\n                    class=\"filter-icon\"\r\n                    [ngClass]=\"\r\n                      activeFilters.has(col.fieldName)\r\n                        ? 'filter-icon-active'\r\n                        : 'filter-icon'\r\n                    \"\r\n                  />\r\n\r\n                  @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    class=\"filter-popup\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    appOutsideClick\r\n                    (clickOutside)=\"onClickOutside()\"\r\n                  >\r\n                    <!-- Text Filter -->\r\n                    @if(col.dataType === 'text'){\r\n                    <select [(ngModel)]=\"col.textFilters[0].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\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\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.textFilters[1].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\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\r\n                    <!-- Number Filter -->\r\n                    @if(col.dataType === 'number'){\r\n                    <select [(ngModel)]=\"col.numberFilters[0].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\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                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.numberFilters[1].numberCondition\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\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                    <ng-container *ngIf=\"col.dataType === 'date'\">\r\n                      <select [(ngModel)]=\"col.numberCondition\">\r\n                        <option value=\"=\">Equals</option>\r\n                        <option value=\">\">Greater Than</option>\r\n                        <option value=\"<\">Less Than</option>\r\n                        <option value=\">=\">>=</option>\r\n                        <option value=\"<=\"><=</option>\r\n                      </select>\r\n                      <input\r\n                        type=\"date\"\r\n                        [(ngModel)]=\"col.dateValue\"\r\n                        (change)=\"applyAllFilters()\"\r\n                      />\r\n                    </ng-container>\r\n\r\n                    <!-- SET FILTER (CHECKBOX LIST) -->\r\n                    <ng-container *ngIf=\"col.dataType === 'set'\">\r\n                      <input\r\n                        type=\"text\"\r\n                        placeholder=\"Search...\"\r\n                        (input)=\"filterSetOptions(col, $event)\"\r\n                      />\r\n\r\n                      <div class=\"set-options\">\r\n                        <label>\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\r\n                        <label *ngFor=\"let opt of col.filteredOptions\">\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                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                @if(threeDotsMenuRequired && col.menu){\r\n\r\n                <div class=\"three-dots\" (click)=\"openMenu($event, col, $index)\">\r\n                  <img src=\"images/more-vertical.svg\" />\r\n                </div>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <!-- popup open -->\r\n            <div\r\n              class=\"column-menu\"\r\n              *ngIf=\"menuVisible[$index]\"\r\n              [ngStyle]=\"menuPosition[$index]\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <ul>\r\n                @if(sortingType === 'dsc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'asc')\">\r\n                  <img src=\"images/arrow-up.svg\" class=\"sorting_up\" />\r\n                  Sort Ascending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'dsc')\">\r\n                  <img src=\"images/arrow-down.svg\" class=\"sorting_up\" />\r\n                  Sort Descending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === 'dsc'){\r\n                <li (click)=\"onSort(col?.fieldName, '')\">\r\n                  <span>\r\n                    <img src=\"images/chevron-up.svg\" class=\"sorting_up\" />\r\n                    <img src=\"images/chevron-down.svg\" class=\"sorting_up\" />\r\n                  </span>\r\n                  Clear Sort\r\n                </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @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\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"form-check-input pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"checkboxInput\">\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            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track $index) {\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\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col.fieldName) }}\r\n              </div>\r\n              <div class=\"see_more_data\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\">\r\n                    {{ parseColValue(data, col.fieldName) }}</span\r\n                  >\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 [attr.colspan]=\"colDefs.length + 1\">\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    </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\r\n        class=\"pagination_select\"\r\n        appOutsideClick\r\n        (clickOutside)=\"onClickOutside()\"\r\n      >\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 flex-center\">\r\n      <span>Page</span>\r\n\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> < </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style right\"\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> > </span>\r\n      </button>\r\n      <span>of {{ pageDetails.totalPages }}</span>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n", styles: [":root{--white: #fff;--white-creame: #ebf3ff;--border: #dae3f8;--scrollbar: var(--border);--textPrimary: #0b1c33;--textPrimary70: #0b1c33b3;--textSecondary: #556171;--textSecondary50: #55617180;--textSecondary70: #556171b3;--pink-10: #f9fbfe;--ice-blue: #67adcf;--primaryBlue: #017db9;--primaryBlue70: #017db9be;--blue-10: #edf4fe;--blue-40: #e3f3fc;--blue-50: #f2f5fa;--blue-5050: #f2f5fa80;--blue-100: #c8e2ff;--blue-200: #a4cfff;--blue-300: #2680ea;--blue-500: #3788e5;--blue-700: #007aff;--yellow-50: #ffeedf;--yellow-100: #fed18f;--yellow-200: #ffbca6;--yellow-300: #f08a2b26;--yellow-400: #e58900;--primaryOrange: #f05a2b;--primaryOrange50: #f05a2b80;--primaryOrange70: #f05a2bb3;--orange-10: #fcf5eb;--orange-200: #f7ac94;--orange-300: #fb9676;--theadBg: var(--blue-50);--pagination-bg: #f7fafe;--blue-200: var(--border);--neutral-200: #dadbdc;--neutral-600: #040d17;--toastShadow: #0000001f;--dropdown-shadow: #00000014;--green-50: #eaf8f1;--green-100: #bde8d3;--green-600: #27a468;--red-10: #fcebef;--red-20: #ca0000;--red-30: #F7C1CE;--error-red: #d03258;--tableBorder: var(--border);--grey-50: #a5b0bf;--grey-100: #333333;--grey-200: #222A3D;--capture-border: #9badca;--captcha-bg: #f3f3f3;--neutral-400: #81858a}html{font-size:12px}.row_div{min-height:calc(4.5rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .col_div{width:50%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .label{width:calc(16.6666666667rem / var(--scale));min-width:calc(16.6666666667rem / var(--scale));padding:0 calc(2rem / var(--scale));color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.25rem / var(--scale))}.row_div .label sup{top:calc(-.1666666667rem / var(--scale))}.row_div .field{padding:calc(.6666666667rem / var(--scale)) calc(2rem / var(--scale));flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:\"\";color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.row_div .field li{list-style:disc;line-height:calc(2.6666666667rem / var(--scale));margin-left:calc(1.5rem / var(--scale))}textarea,input,.ordered_textarea{color:var(--textPrimary)}.errorField{flex-direction:column;align-items:start}.errorField .error{max-width:calc(37.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:0}.errorField .error i-feather[name=info]{padding-right:calc(.3333333333rem / var(--scale));display:flex;stroke:var(--error-red);width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.errorField textarea,.errorField input,.errorField .ordered_textarea{color:var(--textPrimary);border:calc(.0833333333rem / var(--scale)) solid var(--error-red)}.errorField .error{padding-top:calc(.6666666667rem / var(--scale));color:var(--error-red);font-size:var(--fs-12);line-height:140%;font-weight:400}sup{color:var(--error-red)}input::placeholder,textarea::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;min-height:calc(9rem / var(--scale));resize:none}input{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale))}input.disable{background-color:var(--blue-50);pointer-events:none}.ordered_textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;list-style:disc;min-height:calc(9rem / var(--scale))}.ordered_textarea ul{padding-left:calc(2.6666666667rem / var(--scale));outline:none}.ordered_textarea ul.editable-div{min-height:calc(6rem / var(--scale));max-height:calc(9.3333333333rem / var(--scale));overflow:auto}.ordered_textarea ul li{margin-left:calc(1.75rem / var(--scale));list-style:disc;color:var(--textPrimary);font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400}.custom_radio{display:inline-flex;align-items:center;min-width:calc(18.5833333333rem / var(--scale))}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-16);line-height:140%;font-weight:400}.custom_radio.disabled .name{color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--border);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.dob_age_field{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale));background-color:var(--blue-50);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.dob_age_field .dob,.dob_age_field .age{font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textSecondary)}.dob_age_field .age{padding-left:calc(.8333333333rem / var(--scale))}.dob_age_field .dob{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:50%;height:100%;padding-right:calc(.8333333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border)}.dob_age_field .dob img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.date{position:relative;width:100%}.date img{position:absolute;right:calc(1.3333333333rem / var(--scale));top:calc(1.25rem / var(--scale))}input[type=checkbox]{margin-right:calc(.6666666667rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}ol li{list-style:auto!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Rethink}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}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale))}.none{display:none}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--white)}thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}tbody{background-color:var(--white)}tbody tr{overflow:visible}tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}tbody td{overflow:visible;position:relative;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textPrimary);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding-block:calc(.5rem / var(--scale))}tbody td .tooltip_container{max-width:calc(100% - 2.5rem / var(--scale));height:auto;position:absolute;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);z-index:100;display:none;border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));white-space:normal;word-wrap:break-word;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}tbody td:hover .tooltip_container{display:block}tbody td:last-child ::ng-deep .see_more_data{right:0!important}.tableArea .table_wrapper table thead tr{height:calc(4.5rem / var(--scale));color:var(--textPrimary)}.tableArea .table_wrapper table thead tr img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr .theading{height:calc(2.25rem / var(--scale))}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0}.tableArea .table_wrapper table thead tr .three_dot{flex-grow:1;margin:0 calc(.3333333333rem / var(--scale)) 0 0;display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:0}.tableArea .table_wrapper table thead tr .three_dot img{cursor:pointer}.tableArea .table_wrapper table thead tr th{flex-shrink:0;background-color:var(--theadBg)}.tableArea .table_wrapper table thead tr th:hover .none{display:block}.tableArea .table_wrapper table thead tr th:hover .up,.tableArea .table_wrapper table thead tr th:hover .down{display:none}.tableArea .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:400;border-top:calc(.0833333333rem / var(--scale)) solid var(--tableBorder);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{background-color:var(--pink-10)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td .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 tbody tr.td_80{height:calc(6.6666666667rem / var(--scale))}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{text-align:left;padding-left:calc(1.1666666667rem / var(--scale));line-height:1}.thead-img{position:relative}.swap-img{position:absolute;left:calc(.6666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.header-content{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.header-content .filtering_container{width:calc(20rem / var(--scale));max-height:calc(23.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);position:absolute;z-index:2;right:0;top:calc(2.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:\"\"}.header-content .filtering_container .filter{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-900);padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));border:none;width:100%;background-color:var(--white);display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.header-content .filtering_container .filter.top_border{border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.tableArea .table_wrapper .headerName ul,.tableArea .table_wrapper .headerName-icon ul{display:flex}.tableArea .table_wrapper table ul{list-style-type:none;padding:0;margin-bottom:0}.tableArea .table_wrapper table ul li{height:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);list-style-type:none}.tableArea .table_wrapper table .sorting_up,.tableArea .table_wrapper table .sorting_down{width:calc(.5833333333rem / var(--scale));height:calc(.3333333333rem / var(--scale))}.tableArea .table_wrapper .headerName,.tableArea .table_wrapper .headerName-icon{margin-left:calc(.5rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary70);height:-webkit-fill-available}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(5.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.pagination_main .pagination_form i-feather{font-weight:600;color:var(--neutral-600)}.pagination_main span{color:var(--textSecondary);font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.pagination_main i-feather{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));color:var(--neutral-600)}.pagination_main .input_style{width:calc(4rem / var(--scale));height:calc(1.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));color:var(--neutral-600);text-align:center;margin:0 calc(.5rem / var(--scale));outline:none}.pagination_main .input_style option{font-size:1rem}.pagination_main .input_style.right{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;margin:0;color:var(--textPrimary);padding:0}.pagination_main .input_style.left{background-color:var(--pagination-bg);color:var(--blue-700);border:none}.pagination_main .outlined_btn{background:transparent;border:solid calc(.0833333333rem / var(--scale)) var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);color:var(--btn-outline)}.pagination_main .prev_btn,.pagination_main .next_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(1.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .disable_btn{background-color:var(--blue-200);pointer-events:none;color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--blue-200)}.pagination_main .disable_btn i-feather{color:var(--white)}.table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border-top-left-radius:calc(1.3333333333rem / var(--scale));border-top-right-radius:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--tableBorder)}.data-table-td .td_wrapper{height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale))}.pagination_main .input_style.left{appearance:none;padding-right:calc(1rem / var(--scale));background-position:80% 50%;width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border-radius:calc(.6666666667rem / var(--scale))}.data-table-td{background-color:var(--blue-50);font-size:var(--fs-16)}.data-table-td i-feather{background-color:var(--white);border-radius:calc(.25rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) 0 #00000014;color:var(--neutral-500)}.data-table-td span{vertical-align:middle}.setting-options{position:absolute;right:0;background:var(--white);z-index:2;box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);max-height:calc(37.3333333333rem / var(--scale));width:calc(20.8333333333rem / var(--scale));overflow:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.column-item,.column-header{margin-bottom:calc(1.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.column-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.column-item input[type=checkbox]{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));margin:0;border-radius:var(--fs-6)}.column-item:last-child{margin-bottom:0}.disabled_col{pointer-events:none;background-color:var(--neutral-50)}.entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.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))}.sticky-top{top:calc(-.0833333333rem / var(--scale))}.thead-img .theading .left{gap:calc(.6666666667rem / var(--scale))}.ms-1.headerName-icon{min-width:calc(1.5rem / var(--scale))}.custom_radio{display:inline-flex;align-items:center;min-width:calc(1.6666666667rem / var(--scale))!important}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-20);line-height:calc(2rem / var(--scale));font-weight:400}.custom_radio.disabled{pointer-events:none}.custom_radio.disabled .radio_mark{background-color:var(--neutral-100);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.custom_radio.disabled .name{color:var(--neutral-300)}.custom_radio .name{padding-right:calc(1.9166666667rem / var(--scale))}.custom_radio input[type=radio]{display:none}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--blue-700);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.custom_radio input[type=radio]:checked+.radio_mark{background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.custom_radio input[type=radio]:checked+.radio_mark:after{opacity:1}.pagination_form{gap:calc(1.3333333333rem / var(--scale))}.pagination_select{position:relative}.select_dropdown{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-50);border-radius:calc(.6666666667rem / var(--scale));margin:0 calc(.5rem / var(--scale))}.select_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700)}.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(--dropdown-shadow);border-radius:calc(.6666666667rem / var(--scale));left:calc(.5rem / var(--scale));z-index:10;padding:calc(.1666666667rem / var(--scale)) 0;margin:calc(.3333333333rem / var(--scale)) 0}.select_option span{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);padding-left:calc(1rem / var(--scale))}.chevron_img{color:var(--neutral-600);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}.chevron_img img{width:calc(.8333333333rem / 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-100);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)}.openClose_dropdown{background-color:var(--neutral-50);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));display:flex}.openClose_dropdown i-feather{transform-origin:center;transition:.3s;display:flex;stroke:var(--neutral-600)}.openClose_dropdown i-feather.rotate{transform:rotate(90deg)}.cell-value{line-height:140%}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(19.0833333333rem / var(--scale));height:\"\";background-color:var(--blue-50);border-radius:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);padding:calc(.6666666667rem / var(--scale)) 0;display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:10;top:calc(3.3333333333rem / var(--scale))}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--grey-100);font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.cell-value.ellipsis:hover .see_more_data{display:flex}.flex-center{display:flex;align-items:center}.cursor-pointer{cursor:pointer}.d-none{display:none}.sort_icons{display:flex;flex-direction:column;gap:calc(.4166666667rem / var(--scale))}.filters{position:relative;display:inline-block;margin-left:6px;cursor:pointer}.filter-icon{width:14px;opacity:.6}.filter-icon-active{background-color:#0ff}.filter-icon:hover{opacity:1}.filter-popup{position:absolute;top:20px;left:0;width:160px;background:#fff;border:1px solid #ddd;padding:8px;box-shadow:0 3px 8px #00000026;border-radius:4px;z-index:99}.filter-popup select,.filter-popup input{width:100%;margin-bottom:8px;padding:4px;font-size:13px}.reset-btn{width:100%;padding:4px;font-size:12px}.set-options{max-height:180px;overflow-y:auto;padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:13px}.set-options label{display:flex;align-items:center;gap:6px;padding:6px 4px;cursor:pointer;border-radius:4px}.set-options label:hover{background:#f3f3f3}.set-options input[type=checkbox]{width:14px;height:14px;cursor:pointer}.set-options label:first-child{font-weight:600;border-bottom:1px solid #e5e5e5;margin-bottom:6px;padding-bottom:8px}.th_wraper{display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px}.three-dots{cursor:pointer;padding:2px 4px;font-size:13px;-webkit-user-select:none;user-select:none}.three-dots:hover{background:#eee;border-radius:4px}.column-menu{position:absolute;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;padding:6px 0;min-width:160px}.column-menu ul{margin:0;padding:0;list-style:none}.column-menu li{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;font-size:14px}.column-menu li:hover{background:#f3f3f3}.column-menu hr{border:none;border-top:1px solid #eee;margin:4px 0}.filter_three_dot_wrapper{display:flex;justify-content:space-between;align-items:center}.logic-row{display:flex;align-items:center;gap:16px;margin:8px 0 6px 4px}.logic-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#444}.logic-item input[type=radio]{width:14px;height:14px;accent-color:#2b7cff;cursor:pointer}.logic-item span{cursor:pointer;font-weight:500}\n"] }]
+                    ], template: "<div class=\"tableArea\">\r\n  <div\r\n    class=\"table_wrapper\"\r\n    id=\"container_scroll\"\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\r\n              ><input\r\n                class=\"form-check-input cursor-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          } @for (col of colDefs; track $index) {\r\n          <th\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"{ 'drag-over': dragOverIndex === $index }\"\r\n            [draggable]=\"!isResizing\"\r\n            (dragstart)=\"onDragStart($event, $index)\"\r\n            (dragover)=\"onDragOver($event, $index)\"\r\n            (drop)=\"onDrop($event, $index)\"\r\n            (dragend)=\"onDragEnd()\"\r\n          >\r\n            <div class=\"th_wraper\">\r\n              <div\r\n                class=\"flex-center\"\r\n                [ngStyle]=\"getStyle(col)\"\r\n                (click)=\"onSortingRowData($index, col)\"\r\n              >\r\n                <span class=\"ellipsis headerName\">{{ col?.headerName }}</span>\r\n\r\n                @if (sortingRequired && sortingColumnIndex == $index &&\r\n                col?.sortable) {\r\n                <span class=\"headerName-icon\">\r\n                  <ul class=\"\">\r\n                    @if(sortingType){\r\n                    <li class=\"cursor-pointer\">\r\n                      <img\r\n                        src=\"images/sort_up.svg\"\r\n                        class=\"sorting_up\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'asc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n                    <li class=\"cursor-pointer\">\r\n                      <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\r\n                      <img\r\n                        src=\"images/sort_down.svg\"\r\n                        class=\"sorting_down\"\r\n                        [ngClass]=\"\r\n                          sortingColumnIndex == $index && sortingType == 'dsc'\r\n                            ? 'd-none'\r\n                            : ''\r\n                        \"\r\n                      />\r\n                    </li>\r\n\r\n                    }\r\n                  </ul>\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                  class=\"filters\"\r\n                  (click)=\"toggleFilter(col, $index, $event)\"\r\n                >\r\n                  <img\r\n                    src=\"images/filter-icon.svg\"\r\n                    class=\"filter-icon\"\r\n                    [ngClass]=\"\r\n                      activeFilters.has(col.fieldName)\r\n                        ? 'filter-icon-active'\r\n                        : 'filter-icon'\r\n                    \"\r\n                  />\r\n\r\n                  @if (activeFilterIndex === $index) {\r\n                  <div\r\n                    class=\"filter-popup\"\r\n                    id=\"filter-popup-{{ $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                    <select [(ngModel)]=\"col.textFilters[0].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\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\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.textFilters[1].filterType\">\r\n                      <option value=\"contains\">Contains</option>\r\n                      <option value=\"doesNotContain\">Does Not Contain</option>\r\n                      <option value=\"equals\">Equals</option>\r\n                      <option value=\"doesNotEqual\">Does Not Equal</option>\r\n                      <option value=\"startsWith\">Starts With</option>\r\n                      <option value=\"endsWith\">Ends With</option>\r\n                    </select>\r\n\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\r\n                    <!-- Number Filter -->\r\n                    @if(col.filterType === 'number'){\r\n                    <select [(ngModel)]=\"col.numberFilters[0].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\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                    @if(col.numberFilters[0].numberValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n\r\n                    <select [(ngModel)]=\"col.numberFilters[1].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n\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                    <select [(ngModel)]=\"col.dateFilters[0].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n                    <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[0].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    />\r\n\r\n                    @if(col.dateFilters[0].dateValue){\r\n                    <div class=\"logic-row\">\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"AND\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        AND\r\n                      </label>\r\n\r\n                      <label class=\"logic-item\">\r\n                        <input\r\n                          type=\"radio\"\r\n                          name=\"textLogic{{ col.fieldName }}\"\r\n                          [(ngModel)]=\"col.textLogic\"\r\n                          value=\"OR\"\r\n                          (change)=\"applyAllFilters()\"\r\n                        />\r\n                        OR\r\n                      </label>\r\n                    </div>\r\n                    <select [(ngModel)]=\"col.dateFilters[1].filterType\">\r\n                      <option value=\"=\">Equals</option>\r\n                      <option value=\">\">Greater Than</option>\r\n                      <option value=\"<\">Less Than</option>\r\n                      <option value=\">=\">>=</option>\r\n                      <option value=\"<=\"><=</option>\r\n                    </select>\r\n                    <input\r\n                      type=\"date\"\r\n                      [(ngModel)]=\"col.dateFilters[1].dateValue\"\r\n                      (change)=\"applyAllFilters()\"\r\n                    />\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\r\n                    <div class=\"set-options\">\r\n                      <label>\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\r\n                      @for(opt of col.filteredOptions; track $index){\r\n                      <label>\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                    }\r\n                  </div>\r\n                  }\r\n                </div>\r\n                }\r\n\r\n                <!-- Three dots menu-->\r\n                @if(threeDotsMenuRequired && col.columnAction){\r\n\r\n                <div class=\"three-dots\" (click)=\"openMenu($event, col, $index)\">\r\n                  <img src=\"images/more-vertical.svg\" />\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=\"column-menu\"\r\n              [ngStyle]=\"menuPosition[$index]\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              appOutsideClick\r\n              (clickOutside)=\"onClickOutside()\"\r\n            >\r\n              <ul>\r\n                @if(sortingType === 'dsc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'asc')\">\r\n                  <img src=\"images/arrow-up.svg\" class=\"sorting_up\" />\r\n                  Sort Ascending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === ''){\r\n                <li (click)=\"onSort(col?.fieldName, 'dsc')\">\r\n                  <img src=\"images/arrow-down.svg\" class=\"sorting_up\" />\r\n                  Sort Descending\r\n                </li>\r\n                } @if(sortingType === 'asc' || sortingType === 'dsc'){\r\n                <li (click)=\"onSort(col?.fieldName, '')\">\r\n                  <span>\r\n                    <img src=\"images/chevron-up.svg\" class=\"sorting_up\" />\r\n                    <img src=\"images/chevron-down.svg\" class=\"sorting_up\" />\r\n                  </span>\r\n                  Clear Sort\r\n                </li>\r\n                }\r\n                <li (click)=\"pinColumn(col, $index)\">\r\n                  <img src=\"images/pin.svg\" class=\"sorting_up\" />\r\n                  {{ col.pinned ? \"Unpin Column\" : \"Pin Column\" }}\r\n                </li>\r\n              </ul>\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]=\"colDefs.length + (checkBoxSelection ? 1 : 0)\"\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            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            <input type=\"checkbox\" [checked]=\"row.isSelected\" />\r\n          </td>\r\n          }\r\n\r\n          <!-- Render columns -->\r\n          @for (col of colDefs; track $index) {\r\n          <td [ngStyle]=\"getStyle(col)\">\r\n            {{ row[col.fieldName] }}\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\r\n              ><input\r\n                type=\"checkbox\"\r\n                class=\"form-check-input pointer\"\r\n                name=\"\"\r\n                id=\"{{ data.rowId }}\"\r\n                [checked]=\"data?.isSelected\"\r\n                (change)=\"onRowCheckboxSelection($event)\"\r\n            /></span>\r\n\r\n            }@else{\r\n            <span class=\"checkboxInput\">\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            </span>\r\n\r\n            }\r\n          </td>\r\n          } @for (col of colDefs; track $index) {\r\n          <td\r\n            [ngStyle]=\"getStyle(col)\"\r\n            [ngClass]=\"[\r\n              col?.addClass ? col.addClass(data) : '',\r\n              col.pinned ? 'pinned' : ''\r\n            ]\"\r\n          >\r\n            @if (!col?.cellRenderer) {\r\n            <div class=\"cell-value\">\r\n              <div\r\n                class=\"more_data_wrapper\"\r\n                [ngClass]=\"{ ellipsis: !col.wrapText }\"\r\n              >\r\n                {{ parseColValue(data, col.fieldName) }}\r\n              </div>\r\n              <div class=\"see_more_data\">\r\n                <div class=\"item\">\r\n                  <span class=\"desc\">\r\n                    {{ parseColValue(data, col.fieldName) }}</span\r\n                  >\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 [attr.colspan]=\"colDefs.length + 1\">\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-level=\"level\"\r\n      >\r\n        <!-- GROUP HEADER -->\r\n        <tr (click)=\"toggleGroup(node)\">\r\n          <td\r\n            [attr.colspan]=\"colDefs.length + (checkBoxSelection ? 1 : 0)\"\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            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        <tr>\r\n          @if (checkBoxSelection) {\r\n          <td><input type=\"checkbox\" [checked]=\"row.isSelected\" /></td>\r\n          } @for (col of colDefs; track $index) {\r\n          <td>{{ row[col.fieldName] }}</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\r\n        class=\"pagination_select\"\r\n        appOutsideClick\r\n        (clickOutside)=\"onClickOutside()\"\r\n      >\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 flex-center\">\r\n      <span>Page</span>\r\n\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> < </span>\r\n      </button>\r\n      <div>\r\n        <input\r\n          class=\"input_style right\"\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> > </span>\r\n      </button>\r\n      <span>of {{ pageDetails.totalPages }}</span>\r\n    </div>\r\n  </div>\r\n  }\r\n  <!-- Pagination Ends -->\r\n</div>\r\n", styles: [":root{--white: #fff;--white-creame: #ebf3ff;--border: #dae3f8;--scrollbar: var(--border);--textPrimary: #0b1c33;--textPrimary70: #0b1c33b3;--textSecondary: #556171;--textSecondary50: #55617180;--textSecondary70: #556171b3;--pink-10: #f9fbfe;--ice-blue: #67adcf;--primaryBlue: #017db9;--primaryBlue70: #017db9be;--blue-10: #edf4fe;--blue-40: #e3f3fc;--blue-50: #f2f5fa;--blue-5050: #f2f5fa80;--blue-100: #c8e2ff;--blue-200: #a4cfff;--blue-300: #2680ea;--blue-500: #3788e5;--blue-700: #007aff;--yellow-50: #ffeedf;--yellow-100: #fed18f;--yellow-200: #ffbca6;--yellow-300: #f08a2b26;--yellow-400: #e58900;--primaryOrange: #f05a2b;--primaryOrange50: #f05a2b80;--primaryOrange70: #f05a2bb3;--orange-10: #fcf5eb;--orange-200: #f7ac94;--orange-300: #fb9676;--theadBg: var(--blue-50);--pagination-bg: #f7fafe;--blue-200: var(--border);--neutral-200: #dadbdc;--neutral-600: #040d17;--toastShadow: #0000001f;--dropdown-shadow: #00000014;--green-50: #eaf8f1;--green-100: #bde8d3;--green-600: #27a468;--red-10: #fcebef;--red-20: #ca0000;--red-30: #F7C1CE;--error-red: #d03258;--tableBorder: var(--border);--grey-50: #a5b0bf;--grey-100: #333333;--grey-200: #222A3D;--capture-border: #9badca;--captcha-bg: #f3f3f3;--neutral-400: #81858a}html{font-size:12px}.row_div{min-height:calc(4.5rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .col_div{width:50%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.row_div .label{width:calc(16.6666666667rem / var(--scale));min-width:calc(16.6666666667rem / var(--scale));padding:0 calc(2rem / var(--scale));color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:500;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.25rem / var(--scale))}.row_div .label sup{top:calc(-.1666666667rem / var(--scale))}.row_div .field{padding:calc(.6666666667rem / var(--scale)) calc(2rem / var(--scale));flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:\"\";color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.row_div .field li{list-style:disc;line-height:calc(2.6666666667rem / var(--scale));margin-left:calc(1.5rem / var(--scale))}textarea,input,.ordered_textarea{color:var(--textPrimary)}.errorField{flex-direction:column;align-items:start}.errorField .error{max-width:calc(37.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:start;flex-wrap:nowrap;gap:0}.errorField .error i-feather[name=info]{padding-right:calc(.3333333333rem / var(--scale));display:flex;stroke:var(--error-red);width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.errorField textarea,.errorField input,.errorField .ordered_textarea{color:var(--textPrimary);border:calc(.0833333333rem / var(--scale)) solid var(--error-red)}.errorField .error{padding-top:calc(.6666666667rem / var(--scale));color:var(--error-red);font-size:var(--fs-12);line-height:140%;font-weight:400}sup{color:var(--error-red)}input::placeholder,textarea::placeholder{color:var(--textSecondary70);font-size:var(--fs-16);line-height:140%;font-weight:400}textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;min-height:calc(9rem / var(--scale));resize:none}input{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale))}input.disable{background-color:var(--blue-50);pointer-events:none}.ordered_textarea{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale));width:100%;list-style:disc;min-height:calc(9rem / var(--scale))}.ordered_textarea ul{padding-left:calc(2.6666666667rem / var(--scale));outline:none}.ordered_textarea ul.editable-div{min-height:calc(6rem / var(--scale));max-height:calc(9.3333333333rem / var(--scale));overflow:auto}.ordered_textarea ul li{margin-left:calc(1.75rem / var(--scale));list-style:disc;color:var(--textPrimary);font-size:var(--fs-16);line-height:calc(2.3333333333rem / var(--scale));font-weight:400}.custom_radio{display:inline-flex;align-items:center;min-width:calc(18.5833333333rem / var(--scale))}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-16);line-height:140%;font-weight:400}.custom_radio.disabled .name{color:var(--textPrimary);font-size:var(--fs-16);line-height:140%;font-weight:400}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--border);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.dob_age_field{border:calc(.0833333333rem / var(--scale)) solid var(--border);border-radius:calc(1.3333333333rem / var(--scale));padding:0 calc(1.3333333333rem / var(--scale));width:100%;height:calc(4.5rem / var(--scale));background-color:var(--blue-50);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.dob_age_field .dob,.dob_age_field .age{font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textSecondary)}.dob_age_field .age{padding-left:calc(.8333333333rem / var(--scale))}.dob_age_field .dob{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:50%;height:100%;padding-right:calc(.8333333333rem / var(--scale));border-right:calc(.0833333333rem / var(--scale)) solid var(--border)}.dob_age_field .dob img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.date{position:relative;width:100%}.date img{position:absolute;right:calc(1.3333333333rem / var(--scale));top:calc(1.25rem / var(--scale))}input[type=checkbox]{margin-right:calc(.6666666667rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale))}ol li{list-style:auto!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Rethink}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}.tableArea{width:100%;border-radius:calc(1.3333333333rem / var(--scale))}.none{display:none}.tableArea .table_wrapper table{border-collapse:collapse;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:2;background-color:var(--white)}thead .checkbox_section{min-width:calc(3.8333333333rem / var(--scale))!important;width:calc(3.8333333333rem / var(--scale))}tbody{background-color:var(--white)}tbody tr{overflow:visible}tbody tr:last-child:not(:first-child) ::ng-deep .see_more_data{top:calc(-3.3333333333rem / var(--scale))}tbody td{overflow:visible;position:relative;font-size:var(--fs-16);line-height:140%;font-weight:400;color:var(--textPrimary);min-width:calc(11.6666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding-block:calc(.5rem / var(--scale))}tbody td .tooltip_container{max-width:calc(100% - 2.5rem / var(--scale));height:auto;position:absolute;background-color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);z-index:100;display:none;border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));white-space:normal;word-wrap:break-word;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}tbody td:hover .tooltip_container{display:block}tbody td:last-child ::ng-deep .see_more_data{right:0!important}.tableArea .table_wrapper table thead tr{height:calc(4.5rem / var(--scale));color:var(--textPrimary)}.tableArea .table_wrapper table thead tr img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.tableArea .table_wrapper table thead tr .theading{height:calc(2.25rem / var(--scale))}.tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0}.tableArea .table_wrapper table thead tr .three_dot{flex-grow:1;margin:0 calc(.3333333333rem / var(--scale)) 0 0;display:flex;flex-direction:row;justify-content:end;align-items:center;flex-wrap:nowrap;gap:0}.tableArea .table_wrapper table thead tr .three_dot img{cursor:pointer}.tableArea .table_wrapper table thead tr th{flex-shrink:0;background-color:var(--theadBg)}.tableArea .table_wrapper table thead tr th:hover .none{display:block}.tableArea .table_wrapper table thead tr th:hover .up,.tableArea .table_wrapper table thead tr th:hover .down{display:none}.tableArea .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:400;border-top:calc(.0833333333rem / var(--scale)) solid var(--tableBorder);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{background-color:var(--pink-10)}.tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.tableArea .table_wrapper table tbody tr td.action:hover{border-left:calc(.0833333333rem / var(--scale)) solid var(--blue-700);border-right:calc(.0833333333rem / var(--scale)) solid var(--blue-700)}.tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--blue-700)}.tableArea .table_wrapper table tbody tr td .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 tbody tr.td_80{height:calc(6.6666666667rem / var(--scale))}.tableArea .table_wrapper table td,.tableArea .table_wrapper table th{text-align:left;padding-left:calc(1.1666666667rem / var(--scale));line-height:1}.thead-img{position:relative}.swap-img{position:absolute;left:calc(.6666666667rem / var(--scale));width:calc(2rem / var(--scale));height:calc(2rem / var(--scale))}.header-content{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0}.header-content .filtering_container{width:calc(20rem / var(--scale));max-height:calc(23.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--white);position:fixed;z-index:2;right:0;top:calc(2.3333333333rem / var(--scale));border-radius:calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:\"\"}.header-content .filtering_container .filter{height:calc(3.3333333333rem / var(--scale));color:var(--neutral-900);padding:calc(.6666666667rem / var(--scale)) calc(1rem / var(--scale));border:none;width:100%;background-color:var(--white);display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-16);line-height:calc(2rem / var(--scale));font-weight:400}.header-content .filtering_container .filter.top_border{border-top:calc(.0833333333rem / var(--scale)) solid var(--neutral-100)}.tableArea .table_wrapper .headerName ul,.tableArea .table_wrapper .headerName-icon ul{display:flex}.tableArea .table_wrapper table ul{list-style-type:none;padding:0;margin-bottom:0}.tableArea .table_wrapper table ul li{height:calc(.3333333333rem / var(--scale));font-size:var(--fs-14);list-style-type:none}.tableArea .table_wrapper table .sorting_up,.tableArea .table_wrapper table .sorting_down{width:calc(.5833333333rem / var(--scale));height:calc(.3333333333rem / var(--scale))}.tableArea .table_wrapper .headerName,.tableArea .table_wrapper .headerName-icon{margin-left:calc(.5rem / var(--scale));font-size:var(--fs-16);line-height:140%;font-weight:500;color:var(--textPrimary70);height:-webkit-fill-available}.pagination_main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(5.3333333333rem / var(--scale));padding:calc(1.3333333333rem / var(--scale))}.pagination_main .pagination_form i-feather{font-weight:600;color:var(--neutral-600)}.pagination_main span{color:var(--textSecondary);font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.pagination_main i-feather{display:flex;width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));color:var(--neutral-600)}.pagination_main .input_style{width:calc(4rem / var(--scale));height:calc(1.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));color:var(--neutral-600);text-align:center;margin:0 calc(.5rem / var(--scale));outline:none}.pagination_main .input_style option{font-size:1rem}.pagination_main .input_style.right{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;margin:0;color:var(--textPrimary);padding:0}.pagination_main .input_style.left{background-color:var(--pagination-bg);color:var(--blue-700);border:none}.pagination_main .outlined_btn{background:transparent;border:solid calc(.0833333333rem / var(--scale)) var(--neutral-200);border-radius:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);color:var(--btn-outline)}.pagination_main .prev_btn,.pagination_main .next_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(1.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination_main .disable_btn{background-color:var(--blue-200);pointer-events:none;color:var(--white);border:calc(.0833333333rem / var(--scale)) solid var(--blue-200)}.pagination_main .disable_btn i-feather{color:var(--white)}.table_wrapper{overflow:auto;height:auto;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(66.6666666667rem / var(--scale));border-top-left-radius:calc(1.3333333333rem / var(--scale));border-top-right-radius:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--tableBorder)}.data-table-td .td_wrapper{height:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(1rem / var(--scale))}.pagination_main .input_style.left{appearance:none;padding-right:calc(1rem / var(--scale));background-position:80% 50%;width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-12);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;border-radius:calc(.6666666667rem / var(--scale))}.data-table-td{background-color:var(--blue-50);font-size:var(--fs-16)}.data-table-td i-feather{background-color:var(--white);border-radius:calc(.25rem / var(--scale));box-shadow:0 calc(.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) 0 #00000014;color:var(--neutral-500)}.data-table-td span{vertical-align:middle}.setting-options{position:absolute;right:0;background:var(--white);z-index:2;box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.5rem / var(--scale)) calc(-.1666666667rem / var(--scale)) var(--box-shadow);max-height:calc(37.3333333333rem / var(--scale));width:calc(20.8333333333rem / var(--scale));overflow:auto;border:calc(.0833333333rem / var(--scale)) solid var(--neutral-100);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale))}.column-item,.column-header{margin-bottom:calc(1.6666666667rem / var(--scale));color:var(--neutral-500);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.column-item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.column-item input[type=checkbox]{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));margin:0;border-radius:var(--fs-6)}.column-item:last-child{margin-bottom:0}.disabled_col{pointer-events:none;background-color:var(--neutral-50)}.entries_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.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))}.sticky-top{top:calc(-.0833333333rem / var(--scale))}.thead-img .theading .left{gap:calc(.6666666667rem / var(--scale))}.ms-1.headerName-icon{min-width:calc(1.5rem / var(--scale))}.custom_radio{display:inline-flex;align-items:center;min-width:calc(1.6666666667rem / var(--scale))!important}.custom_radio .name{color:var(--neutral-600);font-size:var(--fs-20);line-height:calc(2rem / var(--scale));font-weight:400}.custom_radio.disabled{pointer-events:none}.custom_radio.disabled .radio_mark{background-color:var(--neutral-100);border:calc(.0833333333rem / var(--scale)) solid var(--neutral-200)}.custom_radio.disabled .name{color:var(--neutral-300)}.custom_radio .name{padding-right:calc(1.9166666667rem / var(--scale))}.custom_radio input[type=radio]{display:none}.radio_mark{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));border:calc(.125rem / var(--scale)) solid var(--blue-700);border-radius:50%;margin-right:calc(.6666666667rem / var(--scale));position:relative;background-color:var(--white)}.custom_radio input[type=radio]:checked+.radio_mark{background-color:var(--white)}.radio_mark:after{content:\"\";width:calc(.6666666667rem / var(--scale));height:calc(.6666666667rem / var(--scale));background:var(--blue-700);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.custom_radio input[type=radio]:checked+.radio_mark:after{opacity:1}.pagination_form{gap:calc(1.3333333333rem / var(--scale))}.pagination_select{position:relative}.select_dropdown{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--blue-50);border-radius:calc(.6666666667rem / var(--scale));margin:0 calc(.5rem / var(--scale))}.select_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--blue-700)}.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(--dropdown-shadow);border-radius:calc(.6666666667rem / var(--scale));left:calc(.5rem / var(--scale));z-index:10;padding:calc(.1666666667rem / var(--scale)) 0;margin:calc(.3333333333rem / var(--scale)) 0}.select_option span{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--textSecondary);padding-left:calc(1rem / var(--scale))}.chevron_img{color:var(--neutral-600);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}.chevron_img img{width:calc(.8333333333rem / 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-100);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)}.openClose_dropdown{background-color:var(--neutral-50);width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));display:flex}.openClose_dropdown i-feather{transform-origin:center;transition:.3s;display:flex;stroke:var(--neutral-600)}.openClose_dropdown i-feather.rotate{transform:rotate(90deg)}.cell-value{line-height:140%}.ellipsis.more_data_wrapper{position:relative;cursor:default}.ellipsis.more_data_wrapper:hover+.see_more_data{display:flex}:host::ng-deep .see_more_data{position:absolute;width:calc(19.0833333333rem / var(--scale));height:\"\";background-color:var(--blue-50);border-radius:calc(1rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border);box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale)) 0 var(--dropdown-shadow);padding:calc(.6666666667rem / var(--scale)) 0;display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:10;top:calc(3.3333333333rem / var(--scale))}:host::ng-deep .see_more_data .item{width:100%;height:\"\";min-height:calc(3rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;padding:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--grey-100);font-size:var(--fs-16);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}:host::ng-deep .see_more_data .item .desc{text-wrap:wrap;word-break:break-all}.cell-value.ellipsis:hover .see_more_data{display:flex}.flex-center{display:flex;align-items:center}.cursor-pointer{cursor:pointer}.d-none{display:none}.sort_icons{display:flex;flex-direction:column;gap:calc(.4166666667rem / var(--scale))}.filters{position:relative;display:inline-block;margin-left:6px;cursor:pointer}.filter-icon{width:14px;opacity:.6}.filter-icon-active{background-color:#0ff}.filter-icon:hover{opacity:1}.filter-popup{position:absolute;top:20px;left:0;width:160px;background:#fff;border:1px solid #ddd;padding:8px;box-shadow:0 3px 8px #00000026;border-radius:4px;z-index:99}.filter-popup select,.filter-popup input{width:100%;margin-bottom:8px;padding:4px;font-size:13px}.reset-btn{width:100%;padding:4px;font-size:12px}.set-options{max-height:180px;overflow-y:auto;padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:13px}.set-options label{display:flex;align-items:center;gap:6px;padding:6px 4px;cursor:pointer;border-radius:4px}.set-options label:hover{background:#f3f3f3}.set-options input[type=checkbox]{width:14px;height:14px;cursor:pointer}.set-options label:first-child{font-weight:600;border-bottom:1px solid #e5e5e5;margin-bottom:6px;padding-bottom:8px}.th_wraper{position:relative;display:flex;justify-content:space-between;height:32px;align-items:center;padding:0 12px}.three-dots{cursor:pointer;padding:2px 4px;font-size:13px;-webkit-user-select:none;user-select:none}.three-dots:hover{background:#eee;border-radius:4px}.column-menu{position:fixed;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;padding:6px 0;min-width:160px}.column-menu ul{margin:0;padding:0;list-style:none}.column-menu li{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;font-size:14px}.column-menu li:hover{background:#f3f3f3}.column-menu hr{border:none;border-top:1px solid #eee;margin:4px 0}.filter_three_dot_wrapper{display:flex;justify-content:space-between;align-items:center}.logic-row{display:flex;align-items:center;gap:16px;margin:8px 0 6px 4px}.logic-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#444}.logic-item input[type=radio]{width:14px;height:14px;accent-color:#2b7cff;cursor:pointer}.logic-item span{cursor:pointer;font-weight:500}.resizable-header{position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none}.resize-handle{position:absolute;right:0;top:30%;width:6px;height:100%;color:gray;font-size:larger;cursor:w-resize}.group-cell{padding:8px 12px}.group-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.group-toggle img{width:14px;height:14px}.pinned{z-index:11!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tableOptions: [{
                 type: Input
             }], totalRecords: [{
@@ -864,6 +1094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], height: [{
                 type: Input
+            }], groupBy: [{
+                type: Input
             }], onPaginationChange: [{
                 type: Output
             }], onCheckboxSelection: [{