@swimlane/ngx-datatable 23.0.1 → 24.0.0

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 (15) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/assets/app.css +8 -3
  3. package/fesm2022/swimlane-ngx-datatable.mjs +4057 -4792
  4. package/fesm2022/swimlane-ngx-datatable.mjs.map +1 -1
  5. package/package.json +9 -8
  6. package/themes/_ghost.scss +16 -20
  7. package/themes/_rows.scss +4 -5
  8. package/themes/bootstrap.css +41 -35
  9. package/themes/bootstrap.scss +70 -35
  10. package/themes/dark.css +35 -24
  11. package/themes/dark.scss +41 -28
  12. package/themes/material.css +128 -111
  13. package/themes/material.scss +128 -100
  14. package/types/swimlane-ngx-datatable.d.ts +1302 -0
  15. package/index.d.ts +0 -1695
package/themes/dark.scss CHANGED
@@ -6,8 +6,8 @@
6
6
  font-size: 13px;
7
7
 
8
8
  *,
9
- *:before,
10
- *:after {
9
+ *::before,
10
+ *::after {
11
11
  box-sizing: border-box;
12
12
  }
13
13
 
@@ -17,8 +17,9 @@
17
17
 
18
18
  .datatable-header-cell {
19
19
  flex-shrink: 0;
20
- text-align: left;
21
- padding: 0.5rem 1.2rem;
20
+ text-align: start;
21
+ padding-block: 0.5rem;
22
+ padding-inline: 1.2rem;
22
23
  font-weight: bold;
23
24
 
24
25
  .datatable-header-cell-label {
@@ -31,12 +32,13 @@
31
32
  background: #1a1e28;
32
33
 
33
34
  .datatable-body-row {
34
- border-top: 1px solid #2f3646;
35
+ border-block-start: 1px solid #2f3646;
35
36
 
36
37
  .datatable-body-cell {
37
38
  flex-shrink: 0;
38
- text-align: left;
39
- padding: 0.5rem 1.2rem;
39
+ text-align: start;
40
+ padding-block: 0.5rem;
41
+ padding-inline: 1.2rem;
40
42
  vertical-align: top;
41
43
  }
42
44
 
@@ -56,13 +58,15 @@
56
58
  color: #fff;
57
59
  }
58
60
  }
61
+
59
62
  .custom-loading-indicator-wrapper {
60
63
  position: sticky;
61
- top: 0;
62
- height: 0;
64
+ inset-block-start: 0;
65
+ block-size: 0;
63
66
  z-index: 999;
67
+
64
68
  .custom-loading-content {
65
- width: 100%;
69
+ inline-size: 100%;
66
70
  background-color: #1a1e28;
67
71
  }
68
72
  }
@@ -71,52 +75,61 @@
71
75
  .datatable-footer {
72
76
  background: #232837;
73
77
  color: #72809b;
74
- margin-top: -1px;
78
+ margin-block-start: -1px;
75
79
 
76
80
  .page-count {
77
81
  line-height: 50px;
78
- height: 50px;
79
- padding: 0 1.2rem;
82
+ block-size: 50px;
83
+ padding-block: 0;
84
+ padding-inline: 1.2rem;
80
85
  }
81
86
 
82
87
  .datatable-pager {
83
- margin: 0 10px;
88
+ margin-block: 0;
89
+ margin-inline: 10px;
84
90
  vertical-align: top;
85
91
 
86
92
  ul {
87
93
  li {
88
- margin: 10px 0px;
89
-
90
- &:not(.disabled) {
91
- &.active a,
92
- &:hover a {
93
- background-color: #455066;
94
- font-weight: bold;
95
- }
96
- }
94
+ margin-block: 10px;
95
+ margin-inline: 0;
97
96
  }
98
97
  }
99
98
 
100
- a {
101
- height: 22px;
102
- min-width: 24px;
99
+ .page-button {
100
+ block-size: 22px;
101
+ min-inline-size: 24px;
103
102
  line-height: 22px;
104
103
  padding: 0;
105
104
  border-radius: 3px;
106
- margin: 0 3px;
105
+ margin-block: 0;
106
+ margin-inline: 3px;
107
107
  text-align: center;
108
108
  text-decoration: none;
109
109
  vertical-align: bottom;
110
110
  color: #72809b;
111
+ border: 0;
112
+ background: none;
113
+
114
+ &:not(:disabled) {
115
+ &.active,
116
+ &:hover {
117
+ background-color: #455066;
118
+ font-weight: bold;
119
+ }
120
+ }
111
121
  }
112
122
 
113
123
  .datatable-icon-left,
114
124
  .datatable-icon-skip,
115
125
  .datatable-icon-right,
116
126
  .datatable-icon-prev {
127
+ display: inline-block;
128
+ vertical-align: middle;
117
129
  font-size: 18px;
118
130
  line-height: 27px;
119
- padding: 0 3px;
131
+ padding-block: 0;
132
+ padding-inline: 3px;
120
133
  }
121
134
  }
122
135
  }
package/themes/material.css CHANGED
@@ -9,60 +9,41 @@
9
9
  $ngx-datatable-selected-active-background: yellow;
10
10
  $ngx-datatable-selected-active-background-hover: rgba(yellow, 0.2);
11
11
 
12
- @import '~@swimlane/ngx-datatable/index.css';
13
- @import '~@swimlane/ngx-datatable/themes/material.scss';
12
+ @use '~@swimlane/ngx-datatable/themes/material.scss';
14
13
  @import '~@swimlane/ngx-datatable/assets/icons.css';
15
14
 
16
15
  That's all.
17
16
  */
18
- .ghost-cell-container {
17
+ .ngx-datatable.material .ghost-cell-container {
19
18
  background: #fff;
20
19
  }
21
-
22
- .ghost-cell-strip {
20
+ .ngx-datatable.material .ghost-cell-strip {
23
21
  background: #d9d8d9;
24
22
  background-image: linear-gradient(to right, #d9d8d9 0%, #d9d8d9 10%, #fff, transparent);
25
23
  border-radius: 0;
26
24
  animation-duration: 10s;
27
25
  }
28
-
29
- .ngx-datatable .row-disabled {
26
+ .ngx-datatable.material .row-disabled {
30
27
  color: #83888e;
31
28
  }
32
- .ngx-datatable .row-disabled .datatable-body-cell-label {
29
+ .ngx-datatable.material .row-disabled .datatable-body-cell-label {
33
30
  color: #83888e;
34
31
  }
35
- .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
32
+ .ngx-datatable.material .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
36
33
  background-color: inherit;
37
34
  transition: none;
38
35
  }
39
- .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
36
+ .ngx-datatable.material .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
40
37
  background-color: inherit;
41
38
  transition: none;
42
39
  }
43
-
44
40
  .ngx-datatable.material {
45
41
  background: #fff;
46
42
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
47
- /**
48
- * Shared Styles
49
- */
50
- /**
51
- * Global Row Styles
52
- */
53
- /**
54
- * Header Styles
55
- */
56
- /**
57
- * Body Styles
58
- */
59
- /**
60
- * Footer Styles
61
- */
62
43
  }
63
44
  .ngx-datatable.material *,
64
- .ngx-datatable.material *:before,
65
- .ngx-datatable.material *:after {
45
+ .ngx-datatable.material *::before,
46
+ .ngx-datatable.material *::after {
66
47
  box-sizing: border-box;
67
48
  }
68
49
  .ngx-datatable.material.striped .datatable-row-odd {
@@ -110,42 +91,63 @@ That's all.
110
91
  background-color: #2041ef;
111
92
  color: #fff;
112
93
  }
94
+ .ngx-datatable.material {
95
+ /**
96
+ * Shared Styles
97
+ */
98
+ }
113
99
  .ngx-datatable.material .empty-row {
114
- height: 50px;
115
- text-align: left;
116
- padding: 0.5rem 1.2rem;
100
+ block-size: 50px;
101
+ text-align: start;
102
+ padding-block: 0.5rem;
103
+ padding-inline: 1.2rem;
117
104
  vertical-align: top;
118
- border-top: 0;
105
+ border-block-start: 0;
119
106
  }
120
107
  .ngx-datatable.material .loading-row {
121
- text-align: left;
122
- padding: 0.5rem 1.2rem;
108
+ text-align: start;
109
+ padding-block: 0.5rem;
110
+ padding-inline: 1.2rem;
123
111
  vertical-align: top;
124
- border-top: 0;
112
+ border-block-start: 0;
125
113
  }
126
- .ngx-datatable.material .datatable-header .datatable-row-left,
127
- .ngx-datatable.material .datatable-body .datatable-row-left {
114
+ .ngx-datatable.material {
115
+ /**
116
+ * Global Row Styles
117
+ */
118
+ }
119
+ .ngx-datatable.material .datatable-header .horizontal-overflow .datatable-row-left,
120
+ .ngx-datatable.material .datatable-body .horizontal-overflow .datatable-row-left {
128
121
  background-color: #fff;
129
122
  background-position: 100% 0;
130
123
  background-repeat: repeat-y;
131
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
124
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==");
132
125
  }
133
- .ngx-datatable.material .datatable-header .datatable-row-right,
134
- .ngx-datatable.material .datatable-body .datatable-row-right {
126
+ .ngx-datatable.material .datatable-header .horizontal-overflow .datatable-row-right,
127
+ .ngx-datatable.material .datatable-body .horizontal-overflow .datatable-row-right {
135
128
  background-position: 0 0;
136
129
  background-color: #fff;
137
130
  background-repeat: repeat-y;
138
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
131
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==");
132
+ }
133
+ .ngx-datatable.material {
134
+ /**
135
+ * Header Styles
136
+ */
139
137
  }
140
138
  .ngx-datatable.material .datatable-header {
141
- border-bottom: 1px solid rgba(0, 0, 0, 0.12);
139
+ border-block-end: 1px solid rgba(0, 0, 0, 0.12);
140
+ }
141
+ .ngx-datatable.material .datatable-header .datatable-row-left,
142
+ .ngx-datatable.material .datatable-header .datatable-row-right {
143
+ background-color: #fff;
142
144
  }
143
145
  .ngx-datatable.material .datatable-header .datatable-header-cell {
144
146
  flex-shrink: 0;
145
- text-align: left;
146
- padding: 0.9rem 1.2rem;
147
+ text-align: start;
148
+ padding-block: 0.9rem;
149
+ padding-inline: 1.2rem;
147
150
  font-weight: 400;
148
- background-color: #fff;
149
151
  color: rgba(0, 0, 0, 0.54);
150
152
  vertical-align: bottom;
151
153
  font-size: 12px;
@@ -162,11 +164,12 @@ That's all.
162
164
  .ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
163
165
  content: " ";
164
166
  position: absolute;
165
- top: 50%;
166
- left: 50%;
167
- margin: -30px 0 0 -30px;
168
- height: 60px;
169
- width: 60px;
167
+ inset-block-start: 50%;
168
+ inset-inline-start: 50%;
169
+ margin-block: -30px 0;
170
+ margin-inline: -30px 0;
171
+ block-size: 60px;
172
+ inline-size: 60px;
170
173
  background: #eee;
171
174
  border-radius: 100%;
172
175
  opacity: 1;
@@ -176,10 +179,15 @@ That's all.
176
179
  pointer-events: none;
177
180
  }
178
181
  .ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
179
- border-right: none;
182
+ border-inline-end: none;
180
183
  }
181
184
  .ngx-datatable.material .datatable-header .resize-handle {
182
- border-right: solid 1px #eee;
185
+ border-inline-end: solid 1px #eee;
186
+ }
187
+ .ngx-datatable.material {
188
+ /**
189
+ * Body Styles
190
+ */
183
191
  }
184
192
  .ngx-datatable.material .datatable-body {
185
193
  position: relative;
@@ -190,8 +198,8 @@ That's all.
190
198
  }
191
199
  .ngx-datatable.material .datatable-body .datatable-group-header {
192
200
  background: #f5f5f5;
193
- border-bottom: solid 1px #d9d8d9;
194
- border-top: solid 1px #d9d8d9;
201
+ border-block-end: solid 1px #d9d8d9;
202
+ border-block-start: solid 1px #d9d8d9;
195
203
  }
196
204
  .ngx-datatable.material .datatable-body .datatable-group-header .datatable-group-cell {
197
205
  padding-inline-start: 1.2rem;
@@ -201,35 +209,36 @@ That's all.
201
209
  background-color: #fff;
202
210
  }
203
211
  .ngx-datatable.material .datatable-body .datatable-body-row {
204
- border-bottom: 1px solid #d9d8d9;
212
+ border-block-end: 1px solid #d9d8d9;
205
213
  }
206
214
  .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
207
215
  flex-shrink: 0;
208
- text-align: left;
209
- padding: 0.9rem 1.2rem;
216
+ text-align: start;
217
+ padding-block: 0.9rem;
218
+ padding-inline: 1.2rem;
210
219
  vertical-align: top;
211
- border-top: 0;
220
+ border-block-start: 0;
212
221
  color: rgba(0, 0, 0, 0.87);
213
- transition: width 0.3s ease;
222
+ transition: inline-size 0.3s ease;
214
223
  font-size: 14px;
215
224
  font-weight: 400;
216
225
  }
217
226
  .ngx-datatable.material .datatable-body .progress-linear {
218
227
  display: block;
219
228
  position: sticky;
220
- width: 100%;
221
- height: 0;
229
+ inline-size: 100%;
230
+ block-size: 0;
222
231
  z-index: 999;
223
232
  padding: 0;
224
233
  margin: 0;
225
- top: 0;
234
+ inset-block-start: 0;
226
235
  }
227
236
  .ngx-datatable.material .datatable-body .progress-linear .container {
228
237
  display: block;
229
238
  position: relative;
230
239
  overflow: hidden;
231
- width: 100%;
232
- height: 5px;
240
+ inline-size: 100%;
241
+ block-size: 5px;
233
242
  transform: translate(0, 0) scale(1, 1);
234
243
  background-color: rgb(170, 209, 249);
235
244
  }
@@ -240,71 +249,78 @@ That's all.
240
249
  transition: transform 0.2s linear;
241
250
  background-color: rgb(16, 108, 200);
242
251
  position: absolute;
243
- left: 0;
244
- top: 0;
245
- bottom: 0;
246
- width: 100%;
247
- height: 5px;
252
+ inset-inline-start: 0;
253
+ inset-block: 0;
254
+ inline-size: 100%;
255
+ block-size: 5px;
248
256
  }
249
257
  .ngx-datatable.material .datatable-body .custom-loading-indicator-wrapper {
250
258
  position: sticky;
251
- top: 0;
252
- height: 0;
259
+ inset-block-start: 0;
260
+ block-size: 0;
253
261
  z-index: 999;
254
262
  }
255
263
  .ngx-datatable.material .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
256
- width: 100%;
264
+ inline-size: 100%;
257
265
  background-color: #fff;
258
266
  }
267
+ .ngx-datatable.material {
268
+ /**
269
+ * Footer Styles
270
+ */
271
+ }
259
272
  .ngx-datatable.material .datatable-footer {
260
- border-top: 1px solid rgba(0, 0, 0, 0.12);
273
+ border-block-start: 1px solid rgba(0, 0, 0, 0.12);
261
274
  font-size: 12px;
262
275
  font-weight: 400;
263
276
  color: rgba(0, 0, 0, 0.54);
264
277
  }
265
278
  .ngx-datatable.material .datatable-footer .page-count {
266
279
  line-height: 50px;
267
- height: 50px;
268
- padding: 0 1.2rem;
280
+ block-size: 50px;
281
+ padding-block: 0;
282
+ padding-inline: 1.2rem;
269
283
  }
270
284
  .ngx-datatable.material .datatable-footer .datatable-pager {
271
- margin: 0 10px;
285
+ margin-block: 0;
286
+ margin-inline: 10px;
272
287
  }
273
- .ngx-datatable.material .datatable-footer .datatable-pager li {
274
- vertical-align: middle;
275
- }
276
- .ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
277
- color: rgba(0, 0, 0, 0.26) !important;
278
- background-color: transparent !important;
279
- }
280
- .ngx-datatable.material .datatable-footer .datatable-pager li.active a {
281
- background-color: rgba(158, 158, 158, 0.2);
282
- font-weight: bold;
283
- }
284
- .ngx-datatable.material .datatable-footer .datatable-pager a {
285
- height: 22px;
286
- min-width: 24px;
288
+ .ngx-datatable.material .datatable-footer .datatable-pager .page-button {
289
+ block-size: 22px;
290
+ min-inline-size: 24px;
287
291
  line-height: 22px;
288
- padding: 0 6px;
292
+ padding-block: 0;
293
+ padding-inline: 6px;
289
294
  border-radius: 3px;
290
- margin: 6px 3px;
295
+ margin-block: 6px;
296
+ margin-inline: 3px;
291
297
  text-align: center;
292
- vertical-align: top;
293
- color: rgba(0, 0, 0, 0.54);
298
+ color: rgba(0, 0, 0, 0.64);
294
299
  text-decoration: none;
295
- vertical-align: bottom;
300
+ border: 0;
301
+ background: none;
296
302
  }
297
- .ngx-datatable.material .datatable-footer .datatable-pager a:hover {
303
+ .ngx-datatable.material .datatable-footer .datatable-pager .page-button:hover {
298
304
  color: rgba(0, 0, 0, 0.75);
299
305
  background-color: rgba(158, 158, 158, 0.2);
300
306
  }
307
+ .ngx-datatable.material .datatable-footer .datatable-pager .page-button.active {
308
+ background-color: rgba(158, 158, 158, 0.2);
309
+ font-weight: bold;
310
+ }
311
+ .ngx-datatable.material .datatable-footer .datatable-pager .page-button:disabled {
312
+ color: rgba(0, 0, 0, 0.26);
313
+ background-color: transparent;
314
+ }
301
315
  .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
302
316
  .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
303
317
  .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-right,
304
318
  .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-prev {
319
+ display: inline-block;
320
+ vertical-align: middle;
305
321
  font-size: 20px;
306
322
  line-height: 20px;
307
- padding: 0 3px;
323
+ padding-block: 0;
308
324
  }
309
325
  .ngx-datatable.material .datatable-summary-row .datatable-body-row {
310
326
  background-color: #ddd;
@@ -330,34 +346,35 @@ That's all.
330
346
  }
331
347
  .datatable-checkbox input[type=checkbox] {
332
348
  position: relative;
333
- margin: 0 1rem 0 0;
349
+ margin-block: 0;
350
+ margin-inline: 0 1rem;
334
351
  cursor: pointer;
335
352
  outline: none;
336
353
  }
337
- .datatable-checkbox input[type=checkbox]:before {
354
+ .datatable-checkbox input[type=checkbox]::before {
338
355
  transition: all 0.3s ease-in-out;
339
356
  content: "";
340
357
  position: absolute;
341
- left: 0;
358
+ inset-inline-start: 0;
342
359
  z-index: 1;
343
- width: 1rem;
344
- height: 1rem;
360
+ inline-size: 1rem;
361
+ block-size: 1rem;
345
362
  border: 2px solid #f2f2f2;
346
363
  }
347
- .datatable-checkbox input[type=checkbox]:checked:before {
364
+ .datatable-checkbox input[type=checkbox]:checked::before {
348
365
  transform: rotate(-45deg);
349
- height: 0.5rem;
366
+ block-size: 0.5rem;
350
367
  border-color: #009688;
351
- border-top-style: none;
352
- border-right-style: none;
368
+ border-block-start-style: none;
369
+ border-inline-end-style: none;
353
370
  }
354
- .datatable-checkbox input[type=checkbox]:after {
371
+ .datatable-checkbox input[type=checkbox]::after {
355
372
  content: "";
356
373
  position: absolute;
357
- top: 0;
358
- left: 0;
359
- width: 1rem;
360
- height: 1rem;
374
+ inset-block-start: 0;
375
+ inset-inline-start: 0;
376
+ inline-size: 1rem;
377
+ block-size: 1rem;
361
378
  background: #fff;
362
379
  cursor: pointer;
363
380
  }