@swimlane/ngx-datatable 22.0.0 → 24.0.0-alpha.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 +9 -0
  2. package/assets/app.css +8 -3
  3. package/fesm2022/swimlane-ngx-datatable.mjs +4056 -4791
  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/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@swimlane/ngx-datatable",
3
- "version": "22.0.0",
3
+ "version": "24.0.0-alpha.0",
4
4
  "description": "ngx-datatable is an Angular table grid component for presenting large and complex data.",
5
5
  "peerDependencies": {
6
- "@angular/common": "18.x || 19.x || 20.x",
7
- "@angular/core": "18.x || 19.x || 20.x",
8
- "@angular/platform-browser": "18.x || 19.x || 20.x",
9
- "rxjs": "7.x"
6
+ "@angular/common": "19.x || 20.x || 21.x",
7
+ "@angular/core": "19.x || 20.x || 21.x",
8
+ "@angular/platform-browser": "19.x || 20.x || 21.x",
9
+ "rxjs": "7.x || 8.x"
10
10
  },
11
11
  "dependencies": {
12
12
  "tslib": "^2.0.0"
@@ -30,15 +30,16 @@
30
30
  },
31
31
  "homepage": "https://github.com/swimlane/ngx-datatable#readme",
32
32
  "module": "fesm2022/swimlane-ngx-datatable.mjs",
33
- "typings": "index.d.ts",
33
+ "typings": "types/swimlane-ngx-datatable.d.ts",
34
34
  "exports": {
35
35
  "./package.json": {
36
36
  "default": "./package.json"
37
37
  },
38
38
  ".": {
39
- "types": "./index.d.ts",
39
+ "types": "./types/swimlane-ngx-datatable.d.ts",
40
40
  "default": "./fesm2022/swimlane-ngx-datatable.mjs"
41
41
  }
42
42
  },
43
- "sideEffects": false
43
+ "sideEffects": false,
44
+ "type": "module"
44
45
  }
package/themes/_ghost.scss CHANGED
@@ -1,22 +1,18 @@
1
- $datatable-ghost-cell-container-background: #fff !default;
2
- $datatable-ghost-cell-strip-background: #dee2e5 !default;
3
- $datatable-ghost-cell-strip-background-image: linear-gradient(
4
- to right,
5
- #dee2e5 0%,
6
- #dee2e5 10%,
7
- #f0f2f5,
8
- transparent
9
- ) !default;
10
- $datatable-ghost-cell-strip-radius: 4px !default;
11
- $datatble-ghost-cell-animation-duration: 10s;
1
+ @mixin ghost-cell-styles(
2
+ $datatable-ghost-cell-container-background,
3
+ $datatable-ghost-cell-strip-background,
4
+ $datatable-ghost-cell-strip-background-image,
5
+ $datatable-ghost-cell-strip-radius,
6
+ $datatable-ghost-cell-animation-duration
7
+ ) {
8
+ .ghost-cell-container {
9
+ background: $datatable-ghost-cell-container-background;
10
+ }
12
11
 
13
- .ghost-cell-container {
14
- background: $datatable-ghost-cell-container-background;
15
- }
16
-
17
- .ghost-cell-strip {
18
- background: $datatable-ghost-cell-strip-background;
19
- background-image: $datatable-ghost-cell-strip-background-image;
20
- border-radius: $datatable-ghost-cell-strip-radius;
21
- animation-duration: $datatble-ghost-cell-animation-duration;
12
+ .ghost-cell-strip {
13
+ background: $datatable-ghost-cell-strip-background;
14
+ background-image: $datatable-ghost-cell-strip-background-image;
15
+ border-radius: $datatable-ghost-cell-strip-radius;
16
+ animation-duration: $datatable-ghost-cell-animation-duration;
17
+ }
22
18
  }
package/themes/_rows.scss CHANGED
@@ -1,10 +1,9 @@
1
- $disable-row-text-color: #83888e !default;
2
-
3
- .ngx-datatable {
1
+ @mixin row-disabled-styles($datatable-disable-row-text-color) {
4
2
  .row-disabled {
5
- color: $disable-row-text-color;
3
+ color: $datatable-disable-row-text-color;
4
+
6
5
  .datatable-body-cell-label {
7
- color: $disable-row-text-color;
6
+ color: $datatable-disable-row-text-color;
8
7
  }
9
8
  }
10
9
  .datatable-row-wrapper {
package/themes/bootstrap.css CHANGED
@@ -1,53 +1,50 @@
1
- .ghost-cell-container {
1
+ .ngx-datatable.bootstrap .ghost-cell-container {
2
2
  background: #fff;
3
3
  }
4
-
5
- .ghost-cell-strip {
4
+ .ngx-datatable.bootstrap .ghost-cell-strip {
6
5
  background: #dee2e5;
7
6
  background-image: linear-gradient(to right, #dee2e5 0%, #dee2e5 10%, #fff, transparent);
8
7
  border-radius: 0;
9
8
  animation-duration: 10s;
10
9
  }
11
-
12
- .ngx-datatable .row-disabled {
10
+ .ngx-datatable.bootstrap .row-disabled {
13
11
  color: #83888e;
14
12
  }
15
- .ngx-datatable .row-disabled .datatable-body-cell-label {
13
+ .ngx-datatable.bootstrap .row-disabled .datatable-body-cell-label {
16
14
  color: #83888e;
17
15
  }
18
- .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
16
+ .ngx-datatable.bootstrap .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
19
17
  background-color: inherit;
20
18
  transition: none;
21
19
  }
22
- .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
20
+ .ngx-datatable.bootstrap .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
23
21
  background-color: inherit;
24
22
  transition: none;
25
23
  }
26
-
27
24
  .ngx-datatable.bootstrap {
28
25
  box-shadow: none;
29
26
  font-size: 13px;
30
27
  }
31
28
  .ngx-datatable.bootstrap *,
32
- .ngx-datatable.bootstrap *:before,
33
- .ngx-datatable.bootstrap *:after {
29
+ .ngx-datatable.bootstrap *::before,
30
+ .ngx-datatable.bootstrap *::after {
34
31
  box-sizing: border-box;
35
32
  }
36
33
  .ngx-datatable.bootstrap .datatable-header {
37
- height: unset !important;
34
+ block-size: unset !important;
38
35
  }
39
36
  .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
40
37
  flex-shrink: 0;
41
38
  vertical-align: bottom;
42
39
  padding: 0.75rem;
43
- border-bottom: 1px solid #d1d4d7;
40
+ border-block-end: 1px solid #d1d4d7;
44
41
  }
45
42
  .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
46
43
  line-height: 24px;
47
44
  }
48
45
  .ngx-datatable.bootstrap .datatable-body .datatable-body-row {
49
46
  vertical-align: top;
50
- border-top: 1px solid #d1d4d7;
47
+ border-block-start: 1px solid #d1d4d7;
51
48
  }
52
49
  .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
53
50
  background-color: rgba(0, 0, 0, 0.05);
@@ -59,65 +56,74 @@
59
56
  .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
60
57
  flex-shrink: 0;
61
58
  padding: 0.75rem;
62
- text-align: left;
59
+ text-align: start;
63
60
  vertical-align: top;
64
61
  }
65
62
  .ngx-datatable.bootstrap .datatable-body .empty-row {
66
63
  position: relative;
67
- padding: 0.75rem 1.25rem;
68
- margin-bottom: 0;
64
+ padding-block: 0.75rem;
65
+ padding-inline: 1.25rem;
66
+ margin-block-end: 0;
69
67
  }
70
68
  .ngx-datatable.bootstrap .datatable-body .custom-loading-indicator-wrapper {
71
69
  position: sticky;
72
- top: 0;
73
- height: 0;
70
+ inset-block-start: 0;
71
+ block-size: 0;
74
72
  z-index: 999;
75
73
  }
76
74
  .ngx-datatable.bootstrap .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
77
- width: 100%;
75
+ inline-size: 100%;
78
76
  background-color: #fff;
79
77
  }
80
78
  .ngx-datatable.bootstrap .datatable-footer {
81
79
  background: #424242;
82
80
  color: #ededed;
83
- margin-top: -1px;
81
+ margin-block-start: -1px;
84
82
  }
85
83
  .ngx-datatable.bootstrap .datatable-footer .page-count {
86
84
  line-height: 50px;
87
- height: 50px;
88
- padding: 0 1.2rem;
85
+ block-size: 50px;
86
+ padding-block: 0;
87
+ padding-inline: 1.2rem;
89
88
  }
90
89
  .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
91
- margin: 0 10px;
90
+ margin-block: 0;
91
+ margin-inline: 10px;
92
92
  vertical-align: top;
93
93
  }
94
94
  .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
95
- margin: 10px 0px;
95
+ margin-block: 10px;
96
+ margin-inline: 0;
96
97
  }
97
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
98
- background-color: #545454;
99
- font-weight: bold;
100
- }
101
- .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
102
- height: 22px;
103
- min-width: 24px;
98
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .page-button {
99
+ block-size: 22px;
100
+ min-inline-size: 24px;
104
101
  line-height: 22px;
105
102
  padding: 0;
106
103
  border-radius: 3px;
107
- margin: 0 3px;
104
+ margin-block: 0;
105
+ margin-inline: 3px;
108
106
  text-align: center;
109
107
  vertical-align: top;
110
108
  text-decoration: none;
111
- vertical-align: bottom;
112
109
  color: #ededed;
110
+ border: 0;
111
+ background: none;
112
+ }
113
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .page-button:not(:disabled).active, .ngx-datatable.bootstrap .datatable-footer .datatable-pager .page-button:not(:disabled):hover {
114
+ background-color: #545454;
115
+ font-weight: bold;
113
116
  }
114
117
  .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
115
118
  .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
116
119
  .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
117
120
  .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
121
+ display: inline-block;
122
+ vertical-align: middle;
118
123
  font-size: 18px;
119
124
  line-height: 27px;
120
- padding: 0 3px;
125
+ padding-block: 0;
126
+ padding-inline: 3px;
121
127
  }
122
128
  .ngx-datatable.bootstrap .datatable-summary-row .datatable-body-row .datatable-body-cell {
123
129
  font-weight: bold;
package/themes/bootstrap.scss CHANGED
@@ -1,3 +1,8 @@
1
+ @use './ghost' as ghost;
2
+ @use './rows' as rows;
3
+
4
+ $datatable-disable-row-text-color: #83888e !default;
5
+
1
6
  $datatable-ghost-cell-container-background: #fff !default;
2
7
 
3
8
  $datatable-ghost-cell-strip-background: #dee2e5 !default;
@@ -9,115 +14,145 @@ $datatable-ghost-cell-strip-background-image: linear-gradient(
9
14
  transparent
10
15
  ) !default;
11
16
  $datatable-ghost-cell-strip-radius: 0 !default;
12
- $datatble-ghost-cell-animation-duration: 10s;
13
-
14
- @import './ghost';
15
- @import './rows';
17
+ $datatable-ghost-cell-animation-duration: 10s;
16
18
 
17
19
  .ngx-datatable.bootstrap {
20
+ @include ghost.ghost-cell-styles(
21
+ $datatable-ghost-cell-container-background,
22
+ $datatable-ghost-cell-strip-background,
23
+ $datatable-ghost-cell-strip-background-image,
24
+ $datatable-ghost-cell-strip-radius,
25
+ $datatable-ghost-cell-animation-duration
26
+ );
27
+
28
+ @include rows.row-disabled-styles($datatable-disable-row-text-color);
29
+
18
30
  box-shadow: none;
19
31
  font-size: 13px;
20
32
 
21
33
  *,
22
- *:before,
23
- *:after {
34
+ *::before,
35
+ *::after {
24
36
  box-sizing: border-box;
25
37
  }
26
38
 
27
39
  .datatable-header {
28
- height: unset !important;
40
+ block-size: unset !important; // stylelint-disable-line declaration-no-important
41
+
29
42
  .datatable-header-cell {
30
43
  flex-shrink: 0;
31
44
  vertical-align: bottom;
32
45
  padding: 0.75rem;
33
- border-bottom: 1px solid #d1d4d7;
46
+ border-block-end: 1px solid #d1d4d7;
47
+
34
48
  .datatable-header-cell-label {
35
49
  line-height: 24px;
36
50
  }
37
51
  }
38
52
  }
53
+
39
54
  .datatable-body {
40
55
  .datatable-body-row {
41
56
  vertical-align: top;
42
- border-top: 1px solid #d1d4d7;
57
+ border-block-start: 1px solid #d1d4d7;
58
+
43
59
  &.datatable-row-even {
44
60
  background-color: rgba(0, 0, 0, 0.05);
45
61
  }
62
+
46
63
  &.active {
47
64
  background-color: #1483ff;
48
65
  color: #fff;
49
66
  }
67
+
50
68
  .datatable-body-cell {
51
69
  flex-shrink: 0;
52
70
  padding: 0.75rem;
53
- text-align: left;
71
+ text-align: start;
54
72
  vertical-align: top;
55
73
  }
56
74
  }
75
+
57
76
  .empty-row {
58
77
  $alert-padding-y: 0.75rem !default;
59
78
  $alert-padding-x: 1.25rem !default;
60
79
  position: relative;
61
- padding: $alert-padding-y $alert-padding-x;
62
- margin-bottom: 0;
80
+ padding-block: $alert-padding-y;
81
+ padding-inline: $alert-padding-x;
82
+ margin-block-end: 0;
63
83
  }
84
+
64
85
  .custom-loading-indicator-wrapper {
65
86
  position: sticky;
66
- top: 0;
67
- height: 0;
87
+ inset-block-start: 0;
88
+ block-size: 0;
68
89
  z-index: 999;
90
+
69
91
  .custom-loading-content {
70
- width: 100%;
92
+ inline-size: 100%;
71
93
  background-color: #fff;
72
94
  }
73
95
  }
74
96
  }
97
+
75
98
  .datatable-footer {
76
99
  background: #424242;
77
100
  color: #ededed;
78
- margin-top: -1px;
101
+ margin-block-start: -1px;
102
+
79
103
  .page-count {
80
104
  line-height: 50px;
81
- height: 50px;
82
- padding: 0 1.2rem;
105
+ block-size: 50px;
106
+ padding-block: 0;
107
+ padding-inline: 1.2rem;
83
108
  }
109
+
84
110
  .datatable-pager {
85
- margin: 0 10px;
111
+ margin-block: 0;
112
+ margin-inline: 10px;
86
113
  vertical-align: top;
114
+
87
115
  ul {
88
116
  li {
89
- margin: 10px 0px;
90
- &:not(.disabled) {
91
- &.active,
92
- &:hover {
93
- a {
94
- background-color: #545454;
95
- font-weight: bold;
96
- }
97
- }
98
- }
117
+ margin-block: 10px;
118
+ margin-inline: 0;
99
119
  }
100
120
  }
101
- a {
102
- height: 22px;
103
- min-width: 24px;
121
+
122
+ .page-button {
123
+ block-size: 22px;
124
+ min-inline-size: 24px;
104
125
  line-height: 22px;
105
126
  padding: 0;
106
127
  border-radius: 3px;
107
- margin: 0 3px;
128
+ margin-block: 0;
129
+ margin-inline: 3px;
108
130
  text-align: center;
109
131
  vertical-align: top;
110
132
  text-decoration: none;
111
- vertical-align: bottom;
112
133
  color: #ededed;
134
+ border: 0;
135
+ background: none;
136
+
137
+ &:not(:disabled) {
138
+ &.active,
139
+ &:hover {
140
+ background-color: #545454;
141
+ font-weight: bold;
142
+ }
143
+ }
113
144
  }
145
+
114
146
  .datatable-icon-left,
115
147
  .datatable-icon-skip,
116
148
  .datatable-icon-right,
117
149
  .datatable-icon-prev {
150
+ display: inline-block;
151
+ vertical-align: middle;
118
152
  font-size: 18px;
119
153
  line-height: 27px;
120
- padding: 0 3px;
154
+ padding-block: 0;
155
+ padding-inline: 3px;
121
156
  }
122
157
  }
123
158
  }
package/themes/dark.css CHANGED
@@ -6,8 +6,8 @@
6
6
  font-size: 13px;
7
7
  }
8
8
  .ngx-datatable.dark *,
9
- .ngx-datatable.dark *:before,
10
- .ngx-datatable.dark *:after {
9
+ .ngx-datatable.dark *::before,
10
+ .ngx-datatable.dark *::after {
11
11
  box-sizing: border-box;
12
12
  }
13
13
  .ngx-datatable.dark .datatable-header {
@@ -16,8 +16,9 @@
16
16
  }
17
17
  .ngx-datatable.dark .datatable-header .datatable-header-cell {
18
18
  flex-shrink: 0;
19
- text-align: left;
20
- padding: 0.5rem 1.2rem;
19
+ text-align: start;
20
+ padding-block: 0.5rem;
21
+ padding-inline: 1.2rem;
21
22
  font-weight: bold;
22
23
  }
23
24
  .ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
@@ -27,12 +28,13 @@
27
28
  background: #1a1e28;
28
29
  }
29
30
  .ngx-datatable.dark .datatable-body .datatable-body-row {
30
- border-top: 1px solid #2f3646;
31
+ border-block-start: 1px solid #2f3646;
31
32
  }
32
33
  .ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
33
34
  flex-shrink: 0;
34
- text-align: left;
35
- padding: 0.5rem 1.2rem;
35
+ text-align: start;
36
+ padding-block: 0.5rem;
37
+ padding-inline: 1.2rem;
36
38
  vertical-align: top;
37
39
  }
38
40
  .ngx-datatable.dark .datatable-body .datatable-body-row:hover {
@@ -50,54 +52,63 @@
50
52
  }
51
53
  .ngx-datatable.dark .datatable-body .custom-loading-indicator-wrapper {
52
54
  position: sticky;
53
- top: 0;
54
- height: 0;
55
+ inset-block-start: 0;
56
+ block-size: 0;
55
57
  z-index: 999;
56
58
  }
57
59
  .ngx-datatable.dark .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
58
- width: 100%;
60
+ inline-size: 100%;
59
61
  background-color: #1a1e28;
60
62
  }
61
63
  .ngx-datatable.dark .datatable-footer {
62
64
  background: #232837;
63
65
  color: #72809b;
64
- margin-top: -1px;
66
+ margin-block-start: -1px;
65
67
  }
66
68
  .ngx-datatable.dark .datatable-footer .page-count {
67
69
  line-height: 50px;
68
- height: 50px;
69
- padding: 0 1.2rem;
70
+ block-size: 50px;
71
+ padding-block: 0;
72
+ padding-inline: 1.2rem;
70
73
  }
71
74
  .ngx-datatable.dark .datatable-footer .datatable-pager {
72
- margin: 0 10px;
75
+ margin-block: 0;
76
+ margin-inline: 10px;
73
77
  vertical-align: top;
74
78
  }
75
79
  .ngx-datatable.dark .datatable-footer .datatable-pager ul li {
76
- margin: 10px 0px;
80
+ margin-block: 10px;
81
+ margin-inline: 0;
77
82
  }
78
- .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
79
- background-color: #455066;
80
- font-weight: bold;
81
- }
82
- .ngx-datatable.dark .datatable-footer .datatable-pager a {
83
- height: 22px;
84
- min-width: 24px;
83
+ .ngx-datatable.dark .datatable-footer .datatable-pager .page-button {
84
+ block-size: 22px;
85
+ min-inline-size: 24px;
85
86
  line-height: 22px;
86
87
  padding: 0;
87
88
  border-radius: 3px;
88
- margin: 0 3px;
89
+ margin-block: 0;
90
+ margin-inline: 3px;
89
91
  text-align: center;
90
92
  text-decoration: none;
91
93
  vertical-align: bottom;
92
94
  color: #72809b;
95
+ border: 0;
96
+ background: none;
97
+ }
98
+ .ngx-datatable.dark .datatable-footer .datatable-pager .page-button:not(:disabled).active, .ngx-datatable.dark .datatable-footer .datatable-pager .page-button:not(:disabled):hover {
99
+ background-color: #455066;
100
+ font-weight: bold;
93
101
  }
94
102
  .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
95
103
  .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
96
104
  .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
97
105
  .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
106
+ display: inline-block;
107
+ vertical-align: middle;
98
108
  font-size: 18px;
99
109
  line-height: 27px;
100
- padding: 0 3px;
110
+ padding-block: 0;
111
+ padding-inline: 3px;
101
112
  }
102
113
  .ngx-datatable.dark .datatable-summary-row .datatable-body-row {
103
114
  background-color: #14171f;