cats-data-grid 2.0.3 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/fesm2022/cats-data-grid.mjs +222 -99
  3. package/fesm2022/cats-data-grid.mjs.map +1 -1
  4. package/index.d.ts +36 -7
  5. package/package.json +3 -3
  6. package/styles/component/_form.scss +15 -55
  7. package/styles/sass-utils/_variable.scss +33 -44
package/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { OnChanges, OnInit, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
2
+ import { OnChanges, OnInit, EventEmitter, Renderer2, NgZone, ChangeDetectorRef, SimpleChanges } from '@angular/core';
3
3
 
4
4
  declare class CatsDataGridService {
5
5
  constructor();
@@ -12,7 +12,27 @@ interface DateConfig {
12
12
  enableTime?: boolean;
13
13
  }
14
14
 
15
+ declare class ColDefs {
16
+ fieldName: string;
17
+ headerName: string;
18
+ width: number;
19
+ minWidth: number;
20
+ sortable: boolean;
21
+ filterable: boolean;
22
+ cellRenderer: any;
23
+ }
24
+ interface ColumnFilter {
25
+ fieldName: string;
26
+ filterLogic: string;
27
+ filters: FilterCondition[];
28
+ }
29
+ interface FilterCondition {
30
+ filterOperation: string;
31
+ filterValue: any;
32
+ }
15
33
  declare class CatsDataGridComponent implements OnChanges, OnInit {
34
+ private renderer;
35
+ private zone;
16
36
  private cd;
17
37
  tableOptions: any;
18
38
  totalRecords: number;
@@ -72,7 +92,14 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
72
92
  }[];
73
93
  showPin: boolean;
74
94
  pinActionClicked: any;
75
- constructor(cd: ChangeDetectorRef);
95
+ private removeMouseMove;
96
+ private removeMouseUp;
97
+ private rafId;
98
+ appliedFilters: ColumnFilter[];
99
+ appliedFiltersEvent: EventEmitter<ColumnFilter[]>;
100
+ activeGroupsEvent: EventEmitter<any[]>;
101
+ dynamicGroupingFiltering: boolean;
102
+ constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
76
103
  ngOnInit(): void;
77
104
  ngOnChanges(changes: SimpleChanges): void;
78
105
  /**
@@ -103,13 +130,14 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
103
130
  */
104
131
  evaluateNumDateFilterCondition(type: string, fieldValue: number | string, value: number | string): boolean;
105
132
  /**
106
- * @description Method to filter data according to filterType and comparator selection
133
+ * @description Method to filter data according to filterOperation and comparator selection
107
134
  * @author Anand Pandey
108
135
  * @param {}
109
136
  * @returns void
110
137
  */
111
138
  applyAllFilters(): void;
112
139
  resetFilter(col: any): void;
140
+ removeActiveFilter(col: any): void;
113
141
  /**
114
142
  * @description Method to change the data format to utc
115
143
  * @author Anand Pandey
@@ -248,7 +276,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
248
276
  * @param none
249
277
  * @returns void
250
278
  */
251
- resetTableConfig(): void;
279
+ resetPagination(): void;
252
280
  /**
253
281
  * @description method to set total pages count
254
282
  * @author Tarun Kumar
@@ -317,7 +345,6 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
317
345
  */
318
346
  getStyle(col: any, type?: string): object;
319
347
  onClickOutside(): void;
320
- checkCondition(data: any): boolean;
321
348
  infinityScroll(event: any): void;
322
349
  checkAllSelected(): boolean;
323
350
  checkInterminate(): boolean;
@@ -414,8 +441,9 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
414
441
  enableColumnDrag(event: MouseEvent, index: number): void;
415
442
  disableColumnDrag(event: MouseEvent, index: number): void;
416
443
  dateTimeSelected(date: any): void;
444
+ convertToNumber(value: number | string): number;
417
445
  static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
418
- 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>;
446
+ 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>;
419
447
  }
420
448
 
421
449
  declare class CommonRendererComponent {
@@ -539,4 +567,5 @@ declare class CommonRendererComponent {
539
567
  static ɵcmp: i0.ɵɵComponentDeclaration<CommonRendererComponent, "lib-common-renderer", never, {}, {}, never, never, true, never>;
540
568
  }
541
569
 
542
- export { CatsDataGridComponent, CatsDataGridService, CommonRendererComponent };
570
+ export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent };
571
+ export type { ColumnFilter, FilterCondition };
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "cats-data-grid",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
4
4
  "peerDependencies": {
5
- "@angular/common": "^20.3.15",
6
- "@angular/core": "^20.3.15"
5
+ "@angular/core": ">=18 <22",
6
+ "@angular/common": ">=18 <22"
7
7
  },
8
8
  "dependencies": {
9
9
  "tslib": "^2.3.0"
package/styles/component/_form.scss CHANGED
@@ -1,23 +1,23 @@
1
1
  @use "../sass-utils" as *;
2
2
 
3
3
  //========== CUSTOM SCROLL BAR ======================
4
- #container_scroll::-webkit-scrollbar {
4
+ #table_scroll::-webkit-scrollbar {
5
5
  @include box(rem(14px), rem(14px));
6
6
  }
7
- #container_scroll::-webkit-scrollbar-track {
7
+ #table_scroll::-webkit-scrollbar-track {
8
8
  background-color: var(--neutral-200);
9
9
  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
10
10
  background-clip: padding-box;
11
11
  }
12
- #container_scroll::-webkit-scrollbar-thumb {
12
+ #table_scroll::-webkit-scrollbar-thumb {
13
13
  background-color: var(--neutral-500);
14
14
  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
15
15
  background-clip: padding-box;
16
16
  }
17
- #container_scroll::-webkit-scrollbar-corner {
17
+ #table_scroll::-webkit-scrollbar-corner {
18
18
  background: transparent;
19
19
  }
20
- #container_scroll::-webkit-scrollbar-button {
20
+ #table_scroll::-webkit-scrollbar-button {
21
21
  @include box(rem(14px), rem(14px));
22
22
  background-color: var(--neutral-100);
23
23
  border-radius: rem(2px);
@@ -27,69 +27,27 @@
27
27
  background-position: center;
28
28
  background-size: rem(10px);
29
29
  }
30
- #container_scroll::-webkit-scrollbar-button:hover {
30
+ #table_scroll::-webkit-scrollbar-button:hover {
31
31
  background-color: var(--neutral-300);
32
32
  }
33
- #container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
33
+ #table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
34
34
  background-image: url("/images/chevron-up.svg");
35
35
  display: block;
36
36
  // border-top-right-radius: 8px;
37
37
  }
38
- #container_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
38
+ #table_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
39
39
  background-image: url("/images/chevron-down.svg");
40
40
  display: block;
41
41
  }
42
- #container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
42
+ #table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
43
43
  background-image: url("/images/chevron-left.svg");
44
44
  display: block;
45
45
  // border-bottom-left-radius: 8px;
46
46
  }
47
- #container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
47
+ #table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
48
48
  background-image: url("/images/chevron-right.svg");
49
49
  display: block;
50
50
  }
51
-
52
- // .row_div {
53
- // min-height: rem(54px);
54
- // @include flex(flex-start, center);
55
-
56
- // .col_div {
57
- // width: 50%;
58
- // @include flex(flex-start, center);
59
- // }
60
-
61
- // .label {
62
- // width: rem(200px);
63
- // min-width: rem(200px);
64
- // padding: 0 rem(24px);
65
- // color: var(--neutral-500);
66
- // @include fontStyle(var(--fs-16), 140%, 500);
67
-
68
- // @include flex("", center, rem(3px));
69
-
70
- // sup {
71
- // top: rem(-2px);
72
- // }
73
- // }
74
- // .field {
75
- // padding: rem(8px) rem(24px);
76
- // flex-grow: 1;
77
- // @include flex(flex-start, start, "", column);
78
- // color: var(--neutral-600);
79
- // @include fontStyle(var(--fs-16), 140%);
80
-
81
- // li {
82
- // list-style: disc;
83
- // line-height: rem(32px);
84
- // margin-left: rem(18px);
85
- // }
86
- // }
87
- // }
88
-
89
- sup {
90
- color: var(--error-red);
91
- }
92
-
93
51
  // ---------------- CUSTOM RADIO INPUT START HERE--------
94
52
  .radio_option {
95
53
  display: flex;
@@ -206,6 +164,7 @@ sup {
206
164
  &::after {
207
165
  display: block;
208
166
  background-image: url("/images/check-white.svg");
167
+ background-size: rem(8px) rem(6px);
209
168
  }
210
169
  }
211
170
  // --- Indeterminate (minus) state ---
@@ -216,6 +175,7 @@ sup {
216
175
  display: block;
217
176
  top: 0;
218
177
  background-image: url("/images/minus-blue.svg");
178
+ background-size: rem(7px) rem(1px);
219
179
  }
220
180
  }
221
181
  }
@@ -309,7 +269,7 @@ sup {
309
269
  }
310
270
 
311
271
  // --------------Toggle Switch css-------------
312
- .switch_wrapper {
272
+ .table_switch_wrapper {
313
273
  display: flex;
314
274
  .switch {
315
275
  position: relative;
@@ -351,7 +311,7 @@ sup {
351
311
  table {
352
312
  tbody {
353
313
  tr {
354
- :host .switch_wrapper {
314
+ :host .table_switch_wrapper {
355
315
  .switch {
356
316
  @include box(rem(38px), rem(20px)); /* big size */
357
317
  .slider {
@@ -377,4 +337,4 @@ sup {
377
337
  }
378
338
  .text-danger {
379
339
  color: var(--red) !important;
380
- }
340
+ }
package/styles/sass-utils/_variable.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  :root {
2
2
  --white: #ffffff;
3
- --white-50: rgba(255, 255, 255, 0.582);
4
3
 
5
- --black: #1f1f1f;
6
- --default: #000000;
7
- --black-900: #202224;
4
+ // --default: #000000;
5
+ // --black: #1f1f1f;
6
+ // --black-dust: #1a1a1a;
7
+ // --black-900: #202224;
8
+
8
9
  --pagination-text: var(--neutral-500);
9
- --black-dust: #1a1a1a;
10
10
 
11
11
  // NEUTRAL-COLOR
12
- --neutral-cross: #d9d9d9;
13
- --neutral-40: #d5d7da;
12
+ // --neutral-cross: #d9d9d9;
13
+ // --neutral-40: #d5d7da;
14
14
  --neutral-50: #f0f0f0;
15
15
  --neutral-100: #e6e7e8;
16
16
  --neutral-200: #dadbdc;
@@ -18,71 +18,60 @@
18
18
  --neutral-400: #81858a;
19
19
  --neutral-500: #434a51;
20
20
  --neutral-600: #040d17;
21
- --neutral-900: #010306;
21
+ // --neutral-900: #010306;
22
22
 
23
23
  // BLUE COLOR
24
24
  --blue-50: #f7fafe;
25
25
  --blue-100: #eaf3fd;
26
- --blue-200: #dfecfc;
26
+ // --blue-200: #dfecfc;
27
27
  --blue-300: #c8dff9;
28
- --blue-400: #92bff4;
28
+ // --blue-400: #92bff4;
29
29
  --blue-600: #2680ea;
30
30
  --blue-700: #1c60af;
31
- --blue-800: #1849d6;
31
+ // --blue-800: #1849d6;
32
32
 
33
33
  // GREY COLOR
34
34
  --grey-50: #e9eaeb;
35
- --grey-100: #e2e8f0;
36
- --grey-150: #d6d6d6;
37
- --grey-200: #64748b;
38
- --grey-300: #414651;
39
- --grey-400: #8080808c;
40
- --grey-600: #535862;
41
- --light-grey: #81858a;
42
- --dark-grey: #4a4a4a;
35
+ // --grey-100: #e2e8f0;
36
+ // --grey-150: #d6d6d6;
37
+ // --grey-200: #64748b;
38
+ // --grey-300: #414651;
39
+ // --grey-400: #8080808c;
40
+ // --grey-600: #535862;
41
+ // --light-grey: #81858a;
42
+ // --dark-grey: #4a4a4a;
43
43
 
44
- --green-50: #f7fbf7;
44
+ // --green-50: #f7fbf7;
45
45
  --green-100: #ecf4ec;
46
46
  --green-200: #e1eee2;
47
- --green-400: #9bc69d;
47
+ // --green-400: #9bc69d;
48
48
  --green-600: #388e3c;
49
49
  --green-700: #2a6a2d;
50
50
 
51
51
  --red: #ff0000;
52
- --red-50: #fdf7f7;
52
+ // --red-50: #fdf7f7;
53
53
  --red-100: #faeaea;
54
- --red-200: #f7dfdf;
54
+ // --red-200: #f7dfdf;
55
55
  --red-300: #f0c9c9;
56
56
  --red-700: #941e1e;
57
57
 
58
- --yellow-50: #fffdf5;
58
+ // --yellow-50: #fffdf5;
59
59
  --yellow-100: #fff9e7;
60
- --yellow-200: #fff6da;
60
+ // --yellow-200: #fff6da;
61
61
  --yellow-300: #ffefc1;
62
62
  // --yellow-400: #fff9e7;
63
- --yellow-500: #bf7200;
64
- --yellow-600: #ffc107;
63
+ // --yellow-500: #bf7200;
64
+ // --yellow-600: #ffc107;
65
65
  --yellow-700: #bf9105;
66
- --yellow-800: #806003;
67
- --yellow-900: #bf9105;
66
+ // --yellow-800: #806003;
67
+ // --yellow-900: #bf9105;
68
68
 
69
69
  // Orange
70
- --orange-50: rgba(255, 251, 245, 1);
71
- --orange-100: #fff5e6;
72
- --orange-200: #fff0d9;
70
+ // --orange-50: rgba(255, 251, 245, 1);
71
+ // --orange-100: #fff5e6;
72
+ // --orange-200: #fff0d9;
73
73
  --orange-600: #ff9800;
74
- --orange-700: rgba(191, 114, 0, 1);
74
+ // --orange-700: rgba(191, 114, 0, 1);
75
75
 
76
76
  --box-shadow: #0a0d1214;
77
- --grid-box-shadow: #0000000a;
78
- --model-shadow: rgba(0, 0, 0, 0.08);
79
- --canvas-shadow: #00000014;
80
-
81
- --loader-border: #6f7b93;
82
- --modal-bg: rgba(4, 13, 23, 0.3);
83
- --checkbox-border: #0d6efd;
84
-
85
- // FILTER COLOR
86
- --filter-600: rgba(0, 0, 0, 0.644);
87
- --feather-bg: #fafafa;
88
77
  }