@swimlane/ngx-datatable 20.1.0 → 21.0.0-alpha.1

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 (139) hide show
  1. package/CHANGELOG.md +720 -0
  2. package/README.md +25 -4
  3. package/assets/app.css +4 -3
  4. package/assets/icons-reference.html +5 -1
  5. package/assets/icons.css +3 -2
  6. package/{fesm2020 → fesm2022}/swimlane-ngx-datatable.mjs +3404 -2536
  7. package/fesm2022/swimlane-ngx-datatable.mjs.map +1 -0
  8. package/index.css +224 -169
  9. package/index.scss +13 -3
  10. package/lib/components/body/body-cell.component.d.ts +28 -23
  11. package/lib/components/body/body-group-header-template.directive.d.ts +3 -4
  12. package/lib/components/body/body-group-header.directive.d.ts +14 -9
  13. package/lib/components/body/body-row-def.component.d.ts +34 -0
  14. package/lib/components/body/body-row-wrapper.component.d.ts +34 -22
  15. package/lib/components/body/body-row.component.d.ts +28 -34
  16. package/lib/components/body/body.component.d.ts +88 -69
  17. package/lib/components/body/ghost-loader/ghost-loader.component.d.ts +12 -0
  18. package/lib/components/body/progress-bar.component.d.ts +1 -1
  19. package/lib/components/body/scroller.component.d.ts +4 -7
  20. package/lib/components/body/selection.component.d.ts +21 -25
  21. package/lib/components/body/summary/summary-row.component.d.ts +4 -3
  22. package/lib/components/columns/column-cell.directive.d.ts +4 -3
  23. package/lib/components/columns/column-ghost-cell.directive.d.ts +6 -0
  24. package/lib/components/columns/column-header.directive.d.ts +3 -4
  25. package/lib/components/columns/column.directive.d.ts +43 -18
  26. package/lib/components/columns/tree.directive.d.ts +1 -2
  27. package/lib/components/datatable.component.d.ts +142 -76
  28. package/lib/components/footer/footer-template.directive.d.ts +3 -4
  29. package/lib/components/footer/footer.component.d.ts +3 -2
  30. package/lib/components/footer/footer.directive.d.ts +6 -4
  31. package/lib/components/footer/pager.component.d.ts +6 -4
  32. package/lib/components/header/header-cell.component.d.ts +18 -18
  33. package/lib/components/header/header.component.d.ts +41 -36
  34. package/lib/components/row-detail/row-detail-template.directive.d.ts +3 -4
  35. package/lib/components/row-detail/row-detail.directive.d.ts +9 -8
  36. package/lib/directives/disable-row.directive.d.ts +22 -0
  37. package/lib/directives/draggable.directive.d.ts +11 -8
  38. package/lib/directives/long-press.directive.d.ts +16 -5
  39. package/lib/directives/orderable.directive.d.ts +21 -10
  40. package/lib/directives/resizeable.directive.d.ts +7 -5
  41. package/lib/directives/visibility.directive.d.ts +2 -3
  42. package/lib/ngx-datatable.module.d.ts +29 -30
  43. package/lib/services/scrollbar-helper.service.d.ts +0 -1
  44. package/lib/types/internal.types.d.ts +31 -0
  45. package/lib/types/public.types.d.ts +142 -0
  46. package/lib/types/table-column.type.d.ts +39 -66
  47. package/lib/utils/column-helper.d.ts +2 -2
  48. package/lib/utils/column-prop-getters.d.ts +1 -1
  49. package/lib/utils/column.d.ts +7 -14
  50. package/lib/utils/keys.d.ts +6 -6
  51. package/lib/utils/math.d.ts +4 -3
  52. package/lib/utils/selection.d.ts +2 -2
  53. package/lib/utils/sort.d.ts +5 -5
  54. package/lib/utils/table-token.d.ts +7 -0
  55. package/lib/utils/tree.d.ts +2 -2
  56. package/package.json +9 -17
  57. package/public-api.d.ts +4 -11
  58. package/themes/_ghost.scss +22 -0
  59. package/themes/_rows.scss +22 -0
  60. package/themes/bootstrap.css +117 -65
  61. package/themes/bootstrap.scss +27 -3
  62. package/themes/dark.css +101 -70
  63. package/themes/dark.scss +12 -0
  64. package/themes/material.css +344 -260
  65. package/themes/material.scss +52 -11
  66. package/esm2020/lib/components/body/body-cell.component.mjs +0 -432
  67. package/esm2020/lib/components/body/body-group-header-template.directive.mjs +0 -16
  68. package/esm2020/lib/components/body/body-group-header.directive.mjs +0 -62
  69. package/esm2020/lib/components/body/body-row-wrapper.component.mjs +0 -140
  70. package/esm2020/lib/components/body/body-row.component.mjs +0 -262
  71. package/esm2020/lib/components/body/body.component.mjs +0 -863
  72. package/esm2020/lib/components/body/progress-bar.component.mjs +0 -27
  73. package/esm2020/lib/components/body/scroller.component.mjs +0 -91
  74. package/esm2020/lib/components/body/selection.component.mjs +0 -150
  75. package/esm2020/lib/components/body/summary/summary-row.component.mjs +0 -105
  76. package/esm2020/lib/components/columns/column-cell.directive.mjs +0 -14
  77. package/esm2020/lib/components/columns/column-header.directive.mjs +0 -14
  78. package/esm2020/lib/components/columns/column.directive.mjs +0 -98
  79. package/esm2020/lib/components/columns/tree.directive.mjs +0 -14
  80. package/esm2020/lib/components/datatable.component.mjs +0 -1008
  81. package/esm2020/lib/components/footer/footer-template.directive.mjs +0 -14
  82. package/esm2020/lib/components/footer/footer.component.mjs +0 -128
  83. package/esm2020/lib/components/footer/footer.directive.mjs +0 -35
  84. package/esm2020/lib/components/footer/pager.component.mjs +0 -181
  85. package/esm2020/lib/components/header/header-cell.component.mjs +0 -243
  86. package/esm2020/lib/components/header/header.component.mjs +0 -376
  87. package/esm2020/lib/components/row-detail/row-detail-template.directive.mjs +0 -16
  88. package/esm2020/lib/components/row-detail/row-detail.directive.mjs +0 -63
  89. package/esm2020/lib/directives/draggable.directive.mjs +0 -108
  90. package/esm2020/lib/directives/long-press.directive.mjs +0 -117
  91. package/esm2020/lib/directives/orderable.directive.mjs +0 -136
  92. package/esm2020/lib/directives/resizeable.directive.mjs +0 -93
  93. package/esm2020/lib/directives/visibility.directive.mjs +0 -63
  94. package/esm2020/lib/events.mjs +0 -7
  95. package/esm2020/lib/ngx-datatable.module.mjs +0 -139
  96. package/esm2020/lib/services/column-changes.service.mjs +0 -24
  97. package/esm2020/lib/services/dimensions-helper.service.mjs +0 -17
  98. package/esm2020/lib/services/scrollbar-helper.service.mjs +0 -37
  99. package/esm2020/lib/types/click.type.mjs +0 -6
  100. package/esm2020/lib/types/column-mode.type.mjs +0 -7
  101. package/esm2020/lib/types/contextmenu.type.mjs +0 -6
  102. package/esm2020/lib/types/selection.type.mjs +0 -9
  103. package/esm2020/lib/types/sort-direction.type.mjs +0 -6
  104. package/esm2020/lib/types/sort-prop-dir.type.mjs +0 -2
  105. package/esm2020/lib/types/sort.type.mjs +0 -6
  106. package/esm2020/lib/types/table-column.type.mjs +0 -2
  107. package/esm2020/lib/utils/camel-case.mjs +0 -28
  108. package/esm2020/lib/utils/column-helper.mjs +0 -95
  109. package/esm2020/lib/utils/column-prop-getters.mjs +0 -96
  110. package/esm2020/lib/utils/column.mjs +0 -69
  111. package/esm2020/lib/utils/elm-from-point.mjs +0 -38
  112. package/esm2020/lib/utils/id.mjs +0 -8
  113. package/esm2020/lib/utils/keys.mjs +0 -10
  114. package/esm2020/lib/utils/math.mjs +0 -146
  115. package/esm2020/lib/utils/prefixes.mjs +0 -38
  116. package/esm2020/lib/utils/row-height-cache.mjs +0 -138
  117. package/esm2020/lib/utils/selection.mjs +0 -40
  118. package/esm2020/lib/utils/sort.mjs +0 -127
  119. package/esm2020/lib/utils/throttle.mjs +0 -60
  120. package/esm2020/lib/utils/translate.mjs +0 -25
  121. package/esm2020/lib/utils/tree.mjs +0 -103
  122. package/esm2020/public-api.mjs +0 -64
  123. package/esm2020/swimlane-ngx-datatable.mjs +0 -5
  124. package/fesm2015/swimlane-ngx-datatable.mjs +0 -5979
  125. package/fesm2015/swimlane-ngx-datatable.mjs.map +0 -1
  126. package/fesm2020/swimlane-ngx-datatable.mjs.map +0 -1
  127. package/lib/events.d.ts +0 -3
  128. package/lib/services/dimensions-helper.service.d.ts +0 -10
  129. package/lib/types/click.type.d.ts +0 -4
  130. package/lib/types/column-mode.type.d.ts +0 -5
  131. package/lib/types/contextmenu.type.d.ts +0 -4
  132. package/lib/types/selection.type.d.ts +0 -7
  133. package/lib/types/sort-direction.type.d.ts +0 -4
  134. package/lib/types/sort-prop-dir.type.d.ts +0 -6
  135. package/lib/types/sort.type.d.ts +0 -4
  136. package/lib/utils/elm-from-point.d.ts +0 -8
  137. package/lib/utils/prefixes.d.ts +0 -1
  138. package/lib/utils/translate.d.ts +0 -1
  139. /package/{swimlane-ngx-datatable.d.ts → index.d.ts} +0 -0
@@ -15,237 +15,313 @@
15
15
 
16
16
  That's all.
17
17
  */
18
+ .ghost-cell-container {
19
+ background: #fff;
20
+ }
21
+
22
+ .ghost-cell-strip {
23
+ background: #d9d8d9;
24
+ background-image: linear-gradient(to right, #d9d8d9 0%, #d9d8d9 10%, #fff, transparent);
25
+ border-radius: 0;
26
+ animation-duration: 10s;
27
+ }
28
+
29
+ .ngx-datatable .row-disabled {
30
+ color: #83888e;
31
+ }
32
+ .ngx-datatable .row-disabled .datatable-body-cell-label {
33
+ color: #83888e;
34
+ }
35
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
36
+ background-color: inherit;
37
+ transition: none;
38
+ }
39
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
40
+ background-color: inherit;
41
+ transition: none;
42
+ }
43
+
18
44
  .ngx-datatable.material {
19
45
  background: #fff;
20
46
  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);
21
47
  /**
22
- * Shared Styles
23
- */
48
+ * Shared Styles
49
+ */
24
50
  /**
25
- * Global Row Styles
26
- */
51
+ * Global Row Styles
52
+ */
27
53
  /**
28
- * Header Styles
29
- */
54
+ * Header Styles
55
+ */
30
56
  /**
31
- * Body Styles
32
- */
57
+ * Body Styles
58
+ */
33
59
  /**
34
- * Footer Styles
35
- */ }
36
- .ngx-datatable.material.striped .datatable-row-odd {
37
- background: #eee; }
38
- .ngx-datatable.material.single-selection .datatable-body-row.active,
39
- .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active,
40
- .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active,
41
- .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
42
- background-color: #304ffe;
43
- color: #fff; }
44
- .ngx-datatable.material.single-selection .datatable-body-row.active:hover,
45
- .ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover,
46
- .ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover,
47
- .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
48
- background-color: #193ae4;
49
- color: #fff; }
50
- .ngx-datatable.material.single-selection .datatable-body-row.active:focus,
51
- .ngx-datatable.material.single-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus,
52
- .ngx-datatable.material.multi-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus,
53
- .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus .datatable-row-group {
54
- background-color: #2041ef;
55
- color: #fff; }
56
- .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover,
57
- .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group {
58
- background-color: #eee;
59
- transition-property: background;
60
- transition-duration: 0.3s;
61
- transition-timing-function: linear; }
62
- .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus,
63
- .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus .datatable-row-group {
64
- background-color: #ddd; }
65
- .ngx-datatable.material.cell-selection .datatable-body-cell:hover,
66
- .ngx-datatable.material.cell-selection .datatable-body-cell:hover .datatable-row-group {
67
- background-color: #eee;
68
- transition-property: background;
69
- transition-duration: 0.3s;
70
- transition-timing-function: linear; }
71
- .ngx-datatable.material.cell-selection .datatable-body-cell:focus,
72
- .ngx-datatable.material.cell-selection .datatable-body-cell:focus .datatable-row-group {
73
- background-color: #ddd; }
74
- .ngx-datatable.material.cell-selection .datatable-body-cell.active,
75
- .ngx-datatable.material.cell-selection .datatable-body-cell.active .datatable-row-group {
76
- background-color: #304ffe;
77
- color: #fff; }
78
- .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover,
79
- .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover .datatable-row-group {
80
- background-color: #193ae4;
81
- color: #fff; }
82
- .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus,
83
- .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus .datatable-row-group {
84
- background-color: #2041ef;
85
- color: #fff; }
86
- .ngx-datatable.material .empty-row {
87
- height: 50px;
88
- text-align: left;
89
- padding: 0.5rem 1.2rem;
90
- vertical-align: top;
91
- border-top: 0; }
92
- .ngx-datatable.material .loading-row {
93
- text-align: left;
94
- padding: 0.5rem 1.2rem;
95
- vertical-align: top;
96
- border-top: 0; }
97
- .ngx-datatable.material .datatable-header .datatable-row-left,
98
- .ngx-datatable.material .datatable-body .datatable-row-left {
99
- background-color: #fff;
100
- background-position: 100% 0;
101
- background-repeat: repeat-y;
102
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==); }
103
- .ngx-datatable.material .datatable-header .datatable-row-right,
104
- .ngx-datatable.material .datatable-body .datatable-row-right {
105
- background-position: 0 0;
106
- background-color: #fff;
107
- background-repeat: repeat-y;
108
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==); }
109
- .ngx-datatable.material .datatable-header {
110
- border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
111
- .ngx-datatable.material .datatable-header .datatable-header-cell {
112
- text-align: left;
113
- padding: 0.9rem 1.2rem;
114
- font-weight: 400;
115
- background-color: #fff;
116
- color: rgba(0, 0, 0, 0.54);
117
- vertical-align: bottom;
118
- font-size: 12px;
119
- font-weight: 500; }
120
- .ngx-datatable.material .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
121
- position: relative; }
122
- .ngx-datatable.material .datatable-header .datatable-header-cell.longpress .draggable::after {
123
- transition: transform 400ms ease, opacity 400ms ease;
124
- opacity: 0.5;
125
- transform: scale(1); }
126
- .ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
127
- content: ' ';
128
- position: absolute;
129
- top: 50%;
130
- left: 50%;
131
- margin: -30px 0 0 -30px;
132
- height: 60px;
133
- width: 60px;
134
- background: #eee;
135
- border-radius: 100%;
136
- opacity: 1;
137
- filter: none;
138
- transform: scale(0);
139
- z-index: 9999;
140
- pointer-events: none; }
141
- .ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
142
- border-right: none; }
143
- .ngx-datatable.material .datatable-header .resize-handle {
144
- border-right: solid 1px #eee; }
145
- .ngx-datatable.material .datatable-body {
146
- position: relative; }
147
- .ngx-datatable.material .datatable-body .datatable-row-detail {
148
- background: #f5f5f5;
149
- padding: 10px; }
150
- .ngx-datatable.material .datatable-body .datatable-group-header {
151
- background: #f5f5f5;
152
- border-bottom: solid 1px #d9d8d9;
153
- border-top: solid 1px #d9d8d9; }
154
- .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
155
- text-align: left;
156
- padding: 0.9rem 1.2rem;
157
- vertical-align: top;
158
- border-top: 0;
159
- color: rgba(0, 0, 0, 0.87);
160
- transition: width 0.3s ease;
161
- font-size: 14px;
162
- font-weight: 400; }
163
- .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-group-cell {
164
- text-align: left;
165
- padding: 0.9rem 1.2rem;
166
- vertical-align: top;
167
- border-top: 0;
168
- color: rgba(0, 0, 0, 0.87);
169
- transition: width 0.3s ease;
170
- font-size: 14px;
171
- font-weight: 400; }
172
- .ngx-datatable.material .datatable-body .progress-linear {
173
- display: block;
174
- position: sticky;
175
- width: 100%;
176
- height: 5px;
177
- padding: 0;
178
- margin: 0;
179
- top: 0; }
180
- .ngx-datatable.material .datatable-body .progress-linear .container {
181
- display: block;
182
- position: relative;
183
- overflow: hidden;
184
- width: 100%;
185
- height: 5px;
186
- -webkit-transform: translate(0, 0) scale(1, 1);
187
- transform: translate(0, 0) scale(1, 1);
188
- background-color: #aad1f9; }
189
- .ngx-datatable.material .datatable-body .progress-linear .container .bar {
190
- transition: all 0.2s linear;
191
- -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
192
- animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
193
- transition: -webkit-transform 0.2s linear;
194
- transition: transform 0.2s linear;
195
- background-color: #106cc8;
196
- position: absolute;
197
- left: 0;
198
- top: 0;
199
- bottom: 0;
200
- width: 100%;
201
- height: 5px; }
202
- .ngx-datatable.material .datatable-footer {
203
- border-top: 1px solid rgba(0, 0, 0, 0.12);
204
- font-size: 12px;
205
- font-weight: 400;
206
- color: rgba(0, 0, 0, 0.54); }
207
- .ngx-datatable.material .datatable-footer .page-count {
208
- line-height: 50px;
209
- height: 50px;
210
- padding: 0 1.2rem; }
211
- .ngx-datatable.material .datatable-footer .datatable-pager {
212
- margin: 0 10px; }
213
- .ngx-datatable.material .datatable-footer .datatable-pager li {
214
- vertical-align: middle; }
215
- .ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
216
- color: rgba(0, 0, 0, 0.26) !important;
217
- background-color: transparent !important; }
218
- .ngx-datatable.material .datatable-footer .datatable-pager li.active a {
219
- background-color: rgba(158, 158, 158, 0.2);
220
- font-weight: bold; }
221
- .ngx-datatable.material .datatable-footer .datatable-pager a {
222
- height: 22px;
223
- min-width: 24px;
224
- line-height: 22px;
225
- padding: 0 6px;
226
- border-radius: 3px;
227
- margin: 6px 3px;
228
- text-align: center;
229
- vertical-align: top;
230
- color: rgba(0, 0, 0, 0.54);
231
- text-decoration: none;
232
- vertical-align: bottom; }
233
- .ngx-datatable.material .datatable-footer .datatable-pager a:hover {
234
- color: rgba(0, 0, 0, 0.75);
235
- background-color: rgba(158, 158, 158, 0.2); }
236
- .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
237
- .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
238
- .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-right,
239
- .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-prev {
240
- font-size: 20px;
241
- line-height: 20px;
242
- padding: 0 3px; }
243
- .ngx-datatable.material .datatable-summary-row .datatable-body-row {
244
- background-color: #ddd; }
245
- .ngx-datatable.material .datatable-summary-row .datatable-body-row:hover {
246
- background-color: #ddd; }
247
- .ngx-datatable.material .datatable-summary-row .datatable-body-row .datatable-body-cell {
248
- font-weight: bold; }
60
+ * Footer Styles
61
+ */
62
+ }
63
+ .ngx-datatable.material.striped .datatable-row-odd {
64
+ background: #eee;
65
+ }
66
+ .ngx-datatable.material.single-selection .datatable-body-row.active, .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active, .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active, .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
67
+ background-color: #304ffe;
68
+ color: #fff;
69
+ }
70
+ .ngx-datatable.material.single-selection .datatable-body-row.active:hover, .ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
71
+ background-color: #193ae4;
72
+ color: #fff;
73
+ }
74
+ .ngx-datatable.material.single-selection .datatable-body-row.active:focus, .ngx-datatable.material.single-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus .datatable-row-group {
75
+ background-color: #2041ef;
76
+ color: #fff;
77
+ }
78
+ .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover, .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group {
79
+ background-color: #eee;
80
+ transition-property: background;
81
+ transition-duration: 0.3s;
82
+ transition-timing-function: linear;
83
+ }
84
+ .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus, .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus .datatable-row-group {
85
+ background-color: #ddd;
86
+ }
87
+ .ngx-datatable.material.cell-selection .datatable-body-cell:hover:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell:hover:not(.row-disabled) .datatable-row-group {
88
+ background-color: #eee;
89
+ transition-property: background;
90
+ transition-duration: 0.3s;
91
+ transition-timing-function: linear;
92
+ }
93
+ .ngx-datatable.material.cell-selection .datatable-body-cell:focus:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell:focus:not(.row-disabled) .datatable-row-group {
94
+ background-color: #ddd;
95
+ }
96
+ .ngx-datatable.material.cell-selection .datatable-body-cell.active:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell.active:not(.row-disabled) .datatable-row-group {
97
+ background-color: #304ffe;
98
+ color: #fff;
99
+ }
100
+ .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover:not(.row-disabled) .datatable-row-group {
101
+ background-color: #193ae4;
102
+ color: #fff;
103
+ }
104
+ .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus:not(.row-disabled) .datatable-row-group {
105
+ background-color: #2041ef;
106
+ color: #fff;
107
+ }
108
+ .ngx-datatable.material .empty-row {
109
+ height: 50px;
110
+ text-align: left;
111
+ padding: 0.5rem 1.2rem;
112
+ vertical-align: top;
113
+ border-top: 0;
114
+ }
115
+ .ngx-datatable.material .loading-row {
116
+ text-align: left;
117
+ padding: 0.5rem 1.2rem;
118
+ vertical-align: top;
119
+ border-top: 0;
120
+ }
121
+ .ngx-datatable.material .datatable-header .datatable-row-left,
122
+ .ngx-datatable.material .datatable-body .datatable-row-left {
123
+ background-color: #fff;
124
+ background-position: 100% 0;
125
+ background-repeat: repeat-y;
126
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
127
+ }
128
+ .ngx-datatable.material .datatable-header .datatable-row-right,
129
+ .ngx-datatable.material .datatable-body .datatable-row-right {
130
+ background-position: 0 0;
131
+ background-color: #fff;
132
+ background-repeat: repeat-y;
133
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
134
+ }
135
+ .ngx-datatable.material .datatable-header {
136
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
137
+ }
138
+ .ngx-datatable.material .datatable-header .datatable-header-cell {
139
+ flex-shrink: 0;
140
+ text-align: left;
141
+ padding: 0.9rem 1.2rem;
142
+ font-weight: 400;
143
+ background-color: #fff;
144
+ color: rgba(0, 0, 0, 0.54);
145
+ vertical-align: bottom;
146
+ font-size: 12px;
147
+ font-weight: 500;
148
+ }
149
+ .ngx-datatable.material .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
150
+ position: relative;
151
+ }
152
+ .ngx-datatable.material .datatable-header .datatable-header-cell.longpress .draggable::after {
153
+ transition: transform 400ms ease, opacity 400ms ease;
154
+ opacity: 0.5;
155
+ transform: scale(1);
156
+ }
157
+ .ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
158
+ content: " ";
159
+ position: absolute;
160
+ top: 50%;
161
+ left: 50%;
162
+ margin: -30px 0 0 -30px;
163
+ height: 60px;
164
+ width: 60px;
165
+ background: #eee;
166
+ border-radius: 100%;
167
+ opacity: 1;
168
+ filter: none;
169
+ transform: scale(0);
170
+ z-index: 9999;
171
+ pointer-events: none;
172
+ }
173
+ .ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
174
+ border-right: none;
175
+ }
176
+ .ngx-datatable.material .datatable-header .resize-handle {
177
+ border-right: solid 1px #eee;
178
+ }
179
+ .ngx-datatable.material .datatable-body {
180
+ position: relative;
181
+ }
182
+ .ngx-datatable.material .datatable-body .datatable-row-detail {
183
+ background: #f5f5f5;
184
+ padding: 10px;
185
+ }
186
+ .ngx-datatable.material .datatable-body .datatable-group-header {
187
+ background: #f5f5f5;
188
+ border-bottom: solid 1px #d9d8d9;
189
+ border-top: solid 1px #d9d8d9;
190
+ }
191
+ .ngx-datatable.material .datatable-body .datatable-group-header .datatable-group-cell {
192
+ padding-inline-start: 1.2rem;
193
+ display: flex;
194
+ }
195
+ .ngx-datatable.material .datatable-body datatable-row-def {
196
+ background-color: #fff;
197
+ }
198
+ .ngx-datatable.material .datatable-body .datatable-body-row {
199
+ border-bottom: 1px solid #d9d8d9;
200
+ }
201
+ .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
202
+ flex-shrink: 0;
203
+ text-align: left;
204
+ padding: 0.9rem 1.2rem;
205
+ vertical-align: top;
206
+ border-top: 0;
207
+ color: rgba(0, 0, 0, 0.87);
208
+ transition: width 0.3s ease;
209
+ font-size: 14px;
210
+ font-weight: 400;
211
+ }
212
+ .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-group-cell {
213
+ text-align: left;
214
+ padding: 0.9rem 1.2rem;
215
+ vertical-align: top;
216
+ border-top: 0;
217
+ color: rgba(0, 0, 0, 0.87);
218
+ transition: width 0.3s ease;
219
+ font-size: 14px;
220
+ font-weight: 400;
221
+ }
222
+ .ngx-datatable.material .datatable-body .progress-linear {
223
+ display: block;
224
+ position: sticky;
225
+ width: 100%;
226
+ height: 0;
227
+ z-index: 999;
228
+ padding: 0;
229
+ margin: 0;
230
+ top: 0;
231
+ }
232
+ .ngx-datatable.material .datatable-body .progress-linear .container {
233
+ display: block;
234
+ position: relative;
235
+ overflow: hidden;
236
+ width: 100%;
237
+ height: 5px;
238
+ -webkit-transform: translate(0, 0) scale(1, 1);
239
+ transform: translate(0, 0) scale(1, 1);
240
+ background-color: rgb(170, 209, 249);
241
+ }
242
+ .ngx-datatable.material .datatable-body .progress-linear .container .bar {
243
+ transition: all 0.2s linear;
244
+ -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
245
+ animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
246
+ transition: -webkit-transform 0.2s linear;
247
+ transition: transform 0.2s linear;
248
+ background-color: rgb(16, 108, 200);
249
+ position: absolute;
250
+ left: 0;
251
+ top: 0;
252
+ bottom: 0;
253
+ width: 100%;
254
+ height: 5px;
255
+ }
256
+ .ngx-datatable.material .datatable-body .custom-loading-indicator-wrapper {
257
+ position: sticky;
258
+ top: 0;
259
+ height: 0;
260
+ z-index: 999;
261
+ }
262
+ .ngx-datatable.material .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
263
+ width: 100%;
264
+ background-color: #fff;
265
+ }
266
+ .ngx-datatable.material .datatable-footer {
267
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
268
+ font-size: 12px;
269
+ font-weight: 400;
270
+ color: rgba(0, 0, 0, 0.54);
271
+ }
272
+ .ngx-datatable.material .datatable-footer .page-count {
273
+ line-height: 50px;
274
+ height: 50px;
275
+ padding: 0 1.2rem;
276
+ }
277
+ .ngx-datatable.material .datatable-footer .datatable-pager {
278
+ margin: 0 10px;
279
+ }
280
+ .ngx-datatable.material .datatable-footer .datatable-pager li {
281
+ vertical-align: middle;
282
+ }
283
+ .ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
284
+ color: rgba(0, 0, 0, 0.26) !important;
285
+ background-color: transparent !important;
286
+ }
287
+ .ngx-datatable.material .datatable-footer .datatable-pager li.active a {
288
+ background-color: rgba(158, 158, 158, 0.2);
289
+ font-weight: bold;
290
+ }
291
+ .ngx-datatable.material .datatable-footer .datatable-pager a {
292
+ height: 22px;
293
+ min-width: 24px;
294
+ line-height: 22px;
295
+ padding: 0 6px;
296
+ border-radius: 3px;
297
+ margin: 6px 3px;
298
+ text-align: center;
299
+ vertical-align: top;
300
+ color: rgba(0, 0, 0, 0.54);
301
+ text-decoration: none;
302
+ vertical-align: bottom;
303
+ }
304
+ .ngx-datatable.material .datatable-footer .datatable-pager a:hover {
305
+ color: rgba(0, 0, 0, 0.75);
306
+ background-color: rgba(158, 158, 158, 0.2);
307
+ }
308
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
309
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
310
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-right,
311
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-prev {
312
+ font-size: 20px;
313
+ line-height: 20px;
314
+ padding: 0 3px;
315
+ }
316
+ .ngx-datatable.material .datatable-summary-row .datatable-body-row {
317
+ background-color: #ddd;
318
+ }
319
+ .ngx-datatable.material .datatable-summary-row .datatable-body-row:hover {
320
+ background-color: #ddd;
321
+ }
322
+ .ngx-datatable.material .datatable-summary-row .datatable-body-row .datatable-body-cell {
323
+ font-weight: bold;
324
+ }
249
325
 
250
326
  /**
251
327
  * Checkboxes
@@ -257,41 +333,46 @@ That's all.
257
333
  vertical-align: middle;
258
334
  display: inline-block;
259
335
  box-sizing: border-box;
260
- padding: 0; }
261
- .datatable-checkbox input[type='checkbox'] {
262
- position: relative;
263
- margin: 0 1rem 0 0;
264
- cursor: pointer;
265
- outline: none; }
266
- .datatable-checkbox input[type='checkbox']:before {
267
- -webkit-transition: all 0.3s ease-in-out;
268
- -moz-transition: all 0.3s ease-in-out;
269
- transition: all 0.3s ease-in-out;
270
- content: '';
271
- position: absolute;
272
- left: 0;
273
- z-index: 1;
274
- width: 1rem;
275
- height: 1rem;
276
- border: 2px solid #f2f2f2; }
277
- .datatable-checkbox input[type='checkbox']:checked:before {
278
- -webkit-transform: rotate(-45deg);
279
- -moz-transform: rotate(-45deg);
280
- -ms-transform: rotate(-45deg);
281
- transform: rotate(-45deg);
282
- height: 0.5rem;
283
- border-color: #009688;
284
- border-top-style: none;
285
- border-right-style: none; }
286
- .datatable-checkbox input[type='checkbox']:after {
287
- content: '';
288
- position: absolute;
289
- top: 0;
290
- left: 0;
291
- width: 1rem;
292
- height: 1rem;
293
- background: #fff;
294
- cursor: pointer; }
336
+ padding: 0;
337
+ }
338
+ .datatable-checkbox input[type=checkbox] {
339
+ position: relative;
340
+ margin: 0 1rem 0 0;
341
+ cursor: pointer;
342
+ outline: none;
343
+ }
344
+ .datatable-checkbox input[type=checkbox]:before {
345
+ -webkit-transition: all 0.3s ease-in-out;
346
+ -moz-transition: all 0.3s ease-in-out;
347
+ transition: all 0.3s ease-in-out;
348
+ content: "";
349
+ position: absolute;
350
+ left: 0;
351
+ z-index: 1;
352
+ width: 1rem;
353
+ height: 1rem;
354
+ border: 2px solid #f2f2f2;
355
+ }
356
+ .datatable-checkbox input[type=checkbox]:checked:before {
357
+ -webkit-transform: rotate(-45deg);
358
+ -moz-transform: rotate(-45deg);
359
+ -ms-transform: rotate(-45deg);
360
+ transform: rotate(-45deg);
361
+ height: 0.5rem;
362
+ border-color: #009688;
363
+ border-top-style: none;
364
+ border-right-style: none;
365
+ }
366
+ .datatable-checkbox input[type=checkbox]:after {
367
+ content: "";
368
+ position: absolute;
369
+ top: 0;
370
+ left: 0;
371
+ width: 1rem;
372
+ height: 1rem;
373
+ background: #fff;
374
+ cursor: pointer;
375
+ }
295
376
 
296
377
  /**
297
378
  * Progress bar animations
@@ -299,7 +380,10 @@ That's all.
299
380
  @keyframes query {
300
381
  0% {
301
382
  opacity: 1;
302
- transform: translateX(35%) scale(0.3, 1); }
383
+ transform: translateX(35%) scale(0.3, 1);
384
+ }
303
385
  100% {
304
386
  opacity: 0;
305
- transform: translateX(-50%) scale(0, 1); } }
387
+ transform: translateX(-50%) scale(0, 1);
388
+ }
389
+ }