cats-data-grid 2.0.3 → 2.0.5

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { OnChanges, OnInit, ElementRef, EventEmitter, Renderer2, NgZone, ChangeDetectorRef, SimpleChanges } from '@angular/core';
 
 declare class CatsDataGridService {
     constructor();
@@ -12,8 +12,29 @@ interface DateConfig {
     enableTime?: boolean;
 }
 
+declare class ColDefs {
+    fieldName: string;
+    headerName: string;
+    width: number;
+    minWidth: number;
+    sortable: boolean;
+    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;
     private cd;
+    pinMenu: ElementRef;
     tableOptions: any;
     totalRecords: number;
     sortingRequired: boolean;
@@ -72,7 +93,14 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     }[];
     showPin: boolean;
     pinActionClicked: any;
-    constructor(cd: ChangeDetectorRef);
+    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;
     /**
@@ -103,13 +131,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
@@ -225,7 +254,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
      * @returns {void}
      */
     pinColumn(col: any, index: number, direction: string): void;
-    showPinActions(): void;
+    showPinActions(event: MouseEvent): void;
     hidePinActions(): void;
     /**
      * @description Updates the horizontal left and right offsets of pinned columns by assigning cumulative widths to each pinned column and resetting non-pinned columns.
@@ -248,7 +277,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
@@ -317,7 +346,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;
@@ -414,8 +442,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; }; "appliedFilters": { "alias": "appliedFilters"; "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 {
@@ -539,4 +568,5 @@ declare class CommonRendererComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<CommonRendererComponent, "lib-common-renderer", never, {}, {}, never, never, true, never>;
 }
 
-export { CatsDataGridComponent, CatsDataGridService, CommonRendererComponent };
+export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent };
+export type { ColumnFilter, FilterCondition };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "cats-data-grid",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "peerDependencies": {
-    "@angular/common": "^20.3.15",
-    "@angular/core": "^20.3.15"
+    "@angular/core": ">=18 <22",
+    "@angular/common": ">=18 <22"
   },
   "dependencies": {
     "tslib": "^2.3.0"

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,67 +27,56 @@
   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);
+#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement {
+  display: block;
+  height: rem(55px);
+  background:
+    url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
+    linear-gradient(
+      to bottom,
+      rgb(240, 240, 240) 0%,
+      rgb(240, 240, 240) 70.5%,
+      var(--neutral-200) 70.5%,
+      var(--neutral-200) 72.5%,
+      var(--neutral-100) 72.5%,
+      var(--neutral-100) 100%
+    );
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  &:hover {
+    background:
+      url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
+      linear-gradient(
+        to bottom,
+        rgb(240, 240, 240) 0%,
+        rgb(240, 240, 240) 70.5%,
+        var(--neutral-200) 70.5%,
+        var(--neutral-200) 72.5%,
+        var(--neutral-300) 72.5%,
+        var(--neutral-300) 100%
+      );
+  }
 }
 
 // ----------------  CUSTOM RADIO INPUT START HERE--------
@@ -206,6 +195,7 @@ sup {
       &::after {
         display: block;
         background-image: url("/images/check-white.svg");
+        background-size: rem(8px) rem(6px);
       }
     }
     // --- Indeterminate (minus) state ---
@@ -216,6 +206,7 @@ sup {
         display: block;
         top: 0;
         background-image: url("/images/minus-blue.svg");
+        background-size: rem(7px) rem(1px);
       }
     }
   }
@@ -249,6 +240,8 @@ sup {
   .dropdown_list {
     @include border();
     width: 100%;
+    max-height: rem(172px);
+    overflow: auto;
     position: absolute;
     z-index: 2;
     background: var(--white);
@@ -256,8 +249,6 @@ sup {
     top: rem(40px);
 
     ul {
-      max-height: rem(284px);
-      overflow: auto;
       list-style-type: none;
       padding: rem(4px) 0;
 
@@ -309,7 +300,7 @@ sup {
 }
 
 // --------------Toggle Switch css-------------
-.switch_wrapper {
+.table_switch_wrapper {
   display: flex;
   .switch {
     position: relative;
@@ -351,7 +342,7 @@ sup {
     table {
       tbody {
         tr {
-          :host .switch_wrapper {
+          :host .table_switch_wrapper {
             .switch {
               @include box(rem(38px), rem(20px)); /* big size */
               .slider {
@@ -377,4 +368,4 @@ sup {
 }
 .text-danger {
   color: var(--red) !important;
-}
+}

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;
 }