cats-data-grid 2.0.36 → 2.0.37

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 (5) hide show
  1. package/fesm2022/cats-data-grid.mjs +31 -13
  2. package/fesm2022/cats-data-grid.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/component/_form.scss +12 -52
  5. package/styles/sass-utils/_variable.scss +33 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cats-data-grid",
3
- "version": "2.0.36",
3
+ "version": "2.0.37",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18 <22",
6
6
  "@angular/common": ">=18 <22"
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
  }
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
  }