cats-data-grid 2.0.35 → 2.0.37

package/index.d.ts

@@ -21,6 +21,15 @@ declare class ColDefs {
     filterable: boolean;
     cellRenderer: any;
 }
+interface ColumnFilter {
+    fieldName: string;
+    filterLogic: string;
+    filters: FilterCondition[];
+}
+interface FilterCondition {
+    filterOperation: string;
+    filterValue: any;
+}
 declare class CatsDataGridComponent implements OnChanges, OnInit {
     private renderer;
     private zone;
@@ -86,6 +95,10 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     private removeMouseMove;
     private removeMouseUp;
     private rafId;
+    appliedFilters: ColumnFilter[];
+    appliedFiltersEvent: EventEmitter<ColumnFilter[]>;
+    activeGroupsEvent: EventEmitter<any[]>;
+    dynamicGroupingFiltering: boolean;
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -117,13 +130,14 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
      */
     evaluateNumDateFilterCondition(type: string, fieldValue: number | string, value: number | string): boolean;
     /**
-     * @description Method to filter data according to filterType and comparator selection
+     * @description Method to filter data according to filterOperation and comparator selection
      * @author Anand Pandey
      * @param {}
      * @returns void
      */
     applyAllFilters(): void;
     resetFilter(col: any): void;
+    removeActiveFilter(col: any): void;
     /**
      * @description Method to change the data format to utc
      * @author Anand Pandey
@@ -262,7 +276,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
      * @param none
      * @returns void
      */
-    resetTableConfig(): void;
+    resetPagination(): void;
     /**
      * @description method to set total pages count
      * @author Tarun Kumar
@@ -331,7 +345,6 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
      */
     getStyle(col: any, type?: string): object;
     onClickOutside(): void;
-    checkCondition(data: any): boolean;
     infinityScroll(event: any): void;
     checkAllSelected(): boolean;
     checkInterminate(): boolean;
@@ -428,8 +441,9 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     enableColumnDrag(event: MouseEvent, index: number): void;
     disableColumnDrag(event: MouseEvent, index: number): void;
     dateTimeSelected(date: any): void;
+    convertToNumber(value: number | string): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; }, never, never, true, never>;
 }
 
 declare class CommonRendererComponent {
@@ -554,3 +568,4 @@ declare class CommonRendererComponent {
 }
 
 export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent };
+export type { ColumnFilter, FilterCondition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-data-grid",
-  "version": "2.0.35",
+  "version": "2.0.37",
   "peerDependencies": {
     "@angular/core": ">=18 <22",
     "@angular/common": ">=18 <22"

package/styles/component/_form.scss

@@ -1,23 +1,23 @@
 @use "../sass-utils" as *;
 
 //========== CUSTOM SCROLL BAR ======================
-#container_scroll::-webkit-scrollbar {
+#table_scroll::-webkit-scrollbar {
   @include box(rem(14px), rem(14px));
 }
-#container_scroll::-webkit-scrollbar-track {
+#table_scroll::-webkit-scrollbar-track {
   background-color: var(--neutral-200);
   @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
   background-clip: padding-box;
 }
-#container_scroll::-webkit-scrollbar-thumb {
+#table_scroll::-webkit-scrollbar-thumb {
   background-color: var(--neutral-500);
   @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
   background-clip: padding-box;
 }
-#container_scroll::-webkit-scrollbar-corner {
+#table_scroll::-webkit-scrollbar-corner {
   background: transparent;
 }
-#container_scroll::-webkit-scrollbar-button {
+#table_scroll::-webkit-scrollbar-button {
   @include box(rem(14px), rem(14px));
   background-color: var(--neutral-100);
   border-radius: rem(2px);
@@ -27,69 +27,27 @@
   background-position: center;
   background-size: rem(10px);
 }
-#container_scroll::-webkit-scrollbar-button:hover {
+#table_scroll::-webkit-scrollbar-button:hover {
   background-color: var(--neutral-300);
 }
-#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
+#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
   background-image: url("/images/chevron-up.svg");
   display: block;
   // border-top-right-radius: 8px;
 }
-#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
+#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
   background-image: url("/images/chevron-down.svg");
   display: block;
 }
-#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
+#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
   background-image: url("/images/chevron-left.svg");
   display: block;
   // border-bottom-left-radius: 8px;
 }
-#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
+#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
   background-image: url("/images/chevron-right.svg");
   display: block;
 }
-
-// .row_div {
-//   min-height: rem(54px);
-//   @include flex(flex-start, center);
-
-//   .col_div {
-//     width: 50%;
-//     @include flex(flex-start, center);
-//   }
-
-//   .label {
-//     width: rem(200px);
-//     min-width: rem(200px);
-//     padding: 0 rem(24px);
-//     color: var(--neutral-500);
-//     @include fontStyle(var(--fs-16), 140%, 500);
-
-//     @include flex("", center, rem(3px));
-
-//     sup {
-//       top: rem(-2px);
-//     }
-//   }
-//   .field {
-//     padding: rem(8px) rem(24px);
-//     flex-grow: 1;
-//     @include flex(flex-start, start, "", column);
-//     color: var(--neutral-600);
-//     @include fontStyle(var(--fs-16), 140%);
-
-//     li {
-//       list-style: disc;
-//       line-height: rem(32px);
-//       margin-left: rem(18px);
-//     }
-//   }
-// }
-
-sup {
-  color: var(--error-red);
-}
-
 // ----------------  CUSTOM RADIO INPUT START HERE--------
 .radio_option {
   display: flex;
@@ -206,6 +164,7 @@ sup {
       &::after {
         display: block;
         background-image: url("/images/check-white.svg");
+        background-size: rem(8px) rem(6px);
       }
     }
     // --- Indeterminate (minus) state ---
@@ -216,6 +175,7 @@ sup {
         display: block;
         top: 0;
         background-image: url("/images/minus-blue.svg");
+        background-size: rem(7px) rem(1px);
       }
     }
   }

package/styles/sass-utils/_variable.scss

@@ -1,16 +1,16 @@
 :root {
   --white: #ffffff;
-  --white-50: rgba(255, 255, 255, 0.582);
 
-  --black: #1f1f1f;
-  --default: #000000;
-  --black-900: #202224;
+  // --default: #000000;
+  // --black: #1f1f1f;
+  // --black-dust: #1a1a1a;
+  // --black-900: #202224;
+
   --pagination-text: var(--neutral-500);
-  --black-dust: #1a1a1a;
 
   // NEUTRAL-COLOR
-  --neutral-cross: #d9d9d9;
-  --neutral-40: #d5d7da;
+  // --neutral-cross: #d9d9d9;
+  // --neutral-40: #d5d7da;
   --neutral-50: #f0f0f0;
   --neutral-100: #e6e7e8;
   --neutral-200: #dadbdc;
@@ -18,71 +18,60 @@
   --neutral-400: #81858a;
   --neutral-500: #434a51;
   --neutral-600: #040d17;
-  --neutral-900: #010306;
+  // --neutral-900: #010306;
 
   // BLUE COLOR
   --blue-50: #f7fafe;
   --blue-100: #eaf3fd;
-  --blue-200: #dfecfc;
+  // --blue-200: #dfecfc;
   --blue-300: #c8dff9;
-  --blue-400: #92bff4;
+  // --blue-400: #92bff4;
   --blue-600: #2680ea;
   --blue-700: #1c60af;
-  --blue-800: #1849d6;
+  // --blue-800: #1849d6;
 
   // GREY COLOR
   --grey-50: #e9eaeb;
-  --grey-100: #e2e8f0;
-  --grey-150: #d6d6d6;
-  --grey-200: #64748b;
-  --grey-300: #414651;
-  --grey-400: #8080808c;
-  --grey-600: #535862;
-  --light-grey: #81858a;
-  --dark-grey: #4a4a4a;
+  // --grey-100: #e2e8f0;
+  // --grey-150: #d6d6d6;
+  // --grey-200: #64748b;
+  // --grey-300: #414651;
+  // --grey-400: #8080808c;
+  // --grey-600: #535862;
+  // --light-grey: #81858a;
+  // --dark-grey: #4a4a4a;
 
-  --green-50: #f7fbf7;
+  // --green-50: #f7fbf7;
   --green-100: #ecf4ec;
   --green-200: #e1eee2;
-  --green-400: #9bc69d;
+  // --green-400: #9bc69d;
   --green-600: #388e3c;
   --green-700: #2a6a2d;
 
   --red: #ff0000;
-  --red-50: #fdf7f7;
+  // --red-50: #fdf7f7;
   --red-100: #faeaea;
-  --red-200: #f7dfdf;
+  // --red-200: #f7dfdf;
   --red-300: #f0c9c9;
   --red-700: #941e1e;
 
-  --yellow-50: #fffdf5;
+  // --yellow-50: #fffdf5;
   --yellow-100: #fff9e7;
-  --yellow-200: #fff6da;
+  // --yellow-200: #fff6da;
   --yellow-300: #ffefc1;
   // --yellow-400: #fff9e7;
-  --yellow-500: #bf7200;
-  --yellow-600: #ffc107;
+  // --yellow-500: #bf7200;
+  // --yellow-600: #ffc107;
   --yellow-700: #bf9105;
-  --yellow-800: #806003;
-  --yellow-900: #bf9105;
+  // --yellow-800: #806003;
+  // --yellow-900: #bf9105;
 
   // Orange
-  --orange-50: rgba(255, 251, 245, 1);
-  --orange-100: #fff5e6;
-  --orange-200: #fff0d9;
+  // --orange-50: rgba(255, 251, 245, 1);
+  // --orange-100: #fff5e6;
+  // --orange-200: #fff0d9;
   --orange-600: #ff9800;
-  --orange-700: rgba(191, 114, 0, 1);
+  // --orange-700: rgba(191, 114, 0, 1);
 
   --box-shadow: #0a0d1214;
-  --grid-box-shadow: #0000000a;
-  --model-shadow: rgba(0, 0, 0, 0.08);
-  --canvas-shadow: #00000014;
-
-  --loader-border: #6f7b93;
-  --modal-bg: rgba(4, 13, 23, 0.3);
-  --checkbox-border: #0d6efd;
-
-  // FILTER COLOR
-  --filter-600: rgba(0, 0, 0, 0.644);
-  --feather-bg: #fafafa;
 }

package/lib/cats-data-grid.component.d.ts

@@ -1,148 +0,0 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class CatsDataGridComponent implements OnChanges {
-    private cd;
-    tableOptions: any;
-    totalRecords: number;
-    sortingRequired: boolean;
-    checkBoxSelection: boolean;
-    checkboxSelectionType: string;
-    rowData: any[];
-    colDefs: any[];
-    paginationRequired: boolean;
-    selectedRowEmpty: boolean;
-    filterRequired: boolean;
-    onPaginationChange: EventEmitter<any>;
-    onCheckboxSelection: EventEmitter<any>;
-    onScrollEmitter: EventEmitter<any>;
-    pageDetails: any;
-    recordsToShow: any;
-    sortingColumnIndex: number;
-    sortingType: string;
-    selectedRow: any[];
-    pageSizeList: number[];
-    showPageSizeList: boolean;
-    dragOverIndex: null | number;
-    draggedIndex: null | number;
-    constructor(cd: ChangeDetectorRef);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @description Method to parse column value from rowdata object
-     *  according to given field value in column Defination
-     * @author Tarun Kumar
-     * @param row - current row object
-     * @param toParse - field value
-     * @returns string
-     */
-    parseColValue(row: any, toParse: string): string;
-    /**
-     * @description method to reset table configuration
-     * @author Tarun Kumar
-     * @param none
-     * @returns void
-     */
-    resetTableConfig(): void;
-    /**
-     * @description method to set total pages count
-     * @author Tarun Kumar
-     * @param none
-     * @returns void
-     */
-    setPageCount(): void;
-    /**
-     * @description method to update table on page size change
-     * @author Tarun Kumar
-     * @param event
-     * @returns void
-     */
-    onPageSizeChanged(event: any): void;
-    /**
-     * @description method to update table on previous button click
-     * @author Tarun Kumar
-     */
-    onBtPrevClick(): void;
-    /**
-     * @description method to update table on next button click
-     * @author Tarun Kumar
-     */
-    onBtNextClick(): void;
-    /**
-     * @description method to update table on selecting any page randomly
-     * @author Tarun Kumar
-     * @param event
-     */
-    goToSelectedPage(event: any): void;
-    /**
-     * @description method to sort data according to type and column
-     * @author Tarun Kumar
-     * @param sortingColumIndex
-     * @param fieldName
-     * @param sortingType
-     */
-    onSortingRowData(sortingColumIndex: number, fieldName: string): void;
-    /**
-     * @description method to sort table in ascending order according to given field
-     * @param fieldName
-     */
-    ascendingOrder(fieldName: string): void;
-    /**
-     * @description method to sort table in descending order according to given field
-     * @param fieldName
-     */
-    descendingOrder(fieldName: string): void;
-    /**
-     * @description method to check/uncheck all rows on header checkbox selection/deselection
-     * @author Tarun Kumar
-     * @param event
-     */
-    onHeaderCheckboxChange(event: any): void;
-    /**
-     * @description method to check/uncheck row on row checkbox selection/deselection
-     * @author Tarun Kumar
-     * @param event
-     */
-    onRowCheckboxSelection(event: any): void;
-    /**
-     * @description method to check/uncheck all rows on header checkbox selection/deselection
-     * @author Tarun Kumar
-     * @param col
-     * @returns {object}
-     */
-    getStyle(col: any): object;
-    onClickOutside(): void;
-    checkCondition(data: any): boolean;
-    infinityScroll(event: any): void;
-    checkAllSelected(): boolean;
-    checkInterminate(): boolean;
-    /**
-     * @author Tarun Kumar
-     * @description function triggered when the drag starts
-     * @param {event object, index}
-     * @returns {void}
-     */
-    onDragStart(event: DragEvent, index: number): void;
-    /**
-     * @author Tarun Kumar
-     * @description function to track the index of the element being dragged over and allow dropping
-     * @param {event object, index}
-     * @returns {void}
-     */
-    onDragOver(event: DragEvent, index: number): void;
-    /**
-     * @author Tarun Kumar
-     * @description function to Reorder the items on drop
-     * @param {event object, index}
-     * @returns {void}
-     */
-    onDrop(event: DragEvent, index: number): void;
-    /**
-     * @author Tarun Kumar
-     * @description function to reset dragOverIndex when the drag ends
-     * @param {none}
-     * @returns {void}
-     */
-    onDragEnd(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; }, never, never, true, never>;
-}

package/lib/directives/outside-click.directive.d.ts

@@ -1,10 +0,0 @@
-import { ElementRef, EventEmitter } from "@angular/core";
-import * as i0 from "@angular/core";
-export declare class OutsideClickDirective {
-    private el;
-    clickOutside: EventEmitter<any>;
-    constructor(el: ElementRef);
-    onClick(event: MouseEvent, targetElement: HTMLElement): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<OutsideClickDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<OutsideClickDirective, "[appOutsideClick]", never, {}, { "clickOutside": "clickOutside"; }, never, never, true, never>;
-}

package/lib/directives/renderer-parser.directive.d.ts

@@ -1,15 +0,0 @@
-import { ElementRef, OnInit, ViewContainerRef } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class RendererParserDirective implements OnInit {
-    private el;
-    private er;
-    rowParam: any;
-    col: any;
-    api: any;
-    currentValue: any;
-    ref: any;
-    constructor(el: ViewContainerRef, er: ElementRef);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RendererParserDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RendererParserDirective, "[appRendererParser]", never, { "rowParam": { "alias": "rowParam"; "required": false; }; "col": { "alias": "col"; "required": false; }; "api": { "alias": "api"; "required": false; }; "currentValue": { "alias": "currentValue"; "required": false; }; }, {}, never, never, true, never>;
-}

package/lib/pipes/add-class.pipe.d.ts

@@ -1,7 +0,0 @@
-import { PipeTransform } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class AddClassPipe implements PipeTransform {
-    transform(value: any, tableOption: any): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AddClassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<AddClassPipe, "addClass", true>;
-}

package/lib/services/cats-data-grid.service.d.ts

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class CatsDataGridService {
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<CatsDataGridService>;
-}

package/public-api.d.ts

@@ -1,2 +0,0 @@
-export * from './lib/services/cats-data-grid.service';
-export * from './lib/cats-data-grid.component';