@syncfusion/ej2-multicolumn-combobox 28.2.7 → 29.1.33

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 (145) hide show
  1. package/README.md +1 -1
  2. package/dist/ej2-multicolumn-combobox.umd.min.js +2 -2
  3. package/dist/ej2-multicolumn-combobox.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-multicolumn-combobox.es2015.js +103 -24
  5. package/dist/es6/ej2-multicolumn-combobox.es2015.js.map +1 -1
  6. package/dist/es6/ej2-multicolumn-combobox.es5.js +106 -24
  7. package/dist/es6/ej2-multicolumn-combobox.es5.js.map +1 -1
  8. package/dist/global/ej2-multicolumn-combobox.min.js +2 -2
  9. package/dist/global/ej2-multicolumn-combobox.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/memory-leak-samples/mccb.d.ts +1 -0
  12. package/memory-leak-samples/mccb.html +35 -0
  13. package/memory-leak-samples/mccb.js +109 -0
  14. package/package.json +8 -8
  15. package/src/multicolumn-combobox/multi-column-combo-box-model.d.ts +1 -1
  16. package/src/multicolumn-combobox/multi-column-combo-box.d.ts +5 -0
  17. package/src/multicolumn-combobox/multi-column-combo-box.js +105 -23
  18. package/styles/bds-lite.css +60 -1
  19. package/styles/bds-lite.scss +1 -0
  20. package/styles/bds.css +70 -1
  21. package/styles/bds.scss +1 -0
  22. package/styles/bootstrap-dark-lite.css +60 -1
  23. package/styles/bootstrap-dark-lite.scss +1 -0
  24. package/styles/bootstrap-dark.css +70 -1
  25. package/styles/bootstrap-dark.scss +1 -0
  26. package/styles/bootstrap-lite.css +60 -1
  27. package/styles/bootstrap-lite.scss +1 -0
  28. package/styles/bootstrap.css +70 -1
  29. package/styles/bootstrap.scss +1 -0
  30. package/styles/bootstrap4-lite.css +60 -1
  31. package/styles/bootstrap4-lite.scss +1 -0
  32. package/styles/bootstrap4.css +70 -1
  33. package/styles/bootstrap4.scss +1 -0
  34. package/styles/bootstrap5-dark-lite.css +61 -2
  35. package/styles/bootstrap5-dark-lite.scss +1 -0
  36. package/styles/bootstrap5-dark.css +71 -2
  37. package/styles/bootstrap5-dark.scss +1 -0
  38. package/styles/bootstrap5-lite.css +60 -1
  39. package/styles/bootstrap5-lite.scss +1 -0
  40. package/styles/bootstrap5.3-lite.css +60 -1
  41. package/styles/bootstrap5.3-lite.scss +1 -0
  42. package/styles/bootstrap5.3.css +70 -1
  43. package/styles/bootstrap5.3.scss +1 -0
  44. package/styles/bootstrap5.css +70 -1
  45. package/styles/bootstrap5.scss +1 -0
  46. package/styles/fabric-dark-lite.css +60 -1
  47. package/styles/fabric-dark-lite.scss +1 -0
  48. package/styles/fabric-dark.css +70 -1
  49. package/styles/fabric-dark.scss +1 -0
  50. package/styles/fabric-lite.css +60 -1
  51. package/styles/fabric-lite.scss +1 -0
  52. package/styles/fabric.css +70 -1
  53. package/styles/fabric.scss +1 -0
  54. package/styles/fluent-dark-lite.css +60 -1
  55. package/styles/fluent-dark-lite.scss +1 -0
  56. package/styles/fluent-dark.css +70 -1
  57. package/styles/fluent-dark.scss +1 -0
  58. package/styles/fluent-lite.css +60 -1
  59. package/styles/fluent-lite.scss +1 -0
  60. package/styles/fluent.css +70 -1
  61. package/styles/fluent.scss +1 -0
  62. package/styles/fluent2-lite.css +60 -1
  63. package/styles/fluent2-lite.scss +1 -0
  64. package/styles/fluent2.css +70 -1
  65. package/styles/fluent2.scss +1 -0
  66. package/styles/highcontrast-light-lite.css +60 -1
  67. package/styles/highcontrast-light-lite.scss +1 -0
  68. package/styles/highcontrast-light.css +70 -1
  69. package/styles/highcontrast-light.scss +1 -0
  70. package/styles/highcontrast-lite.css +60 -1
  71. package/styles/highcontrast-lite.scss +1 -0
  72. package/styles/highcontrast.css +70 -1
  73. package/styles/highcontrast.scss +1 -0
  74. package/styles/material-dark-lite.css +60 -1
  75. package/styles/material-dark-lite.scss +1 -0
  76. package/styles/material-dark.css +70 -1
  77. package/styles/material-dark.scss +1 -0
  78. package/styles/material-lite.css +60 -1
  79. package/styles/material-lite.scss +1 -0
  80. package/styles/material.css +70 -1
  81. package/styles/material.scss +1 -0
  82. package/styles/material3-dark-lite.css +60 -1
  83. package/styles/material3-dark-lite.scss +1 -0
  84. package/styles/material3-dark.css +70 -1
  85. package/styles/material3-dark.scss +1 -0
  86. package/styles/material3-lite.css +60 -1
  87. package/styles/material3-lite.scss +1 -0
  88. package/styles/material3.css +70 -1
  89. package/styles/material3.scss +1 -0
  90. package/styles/multicolumn-combobox/_bigger.scss +9 -0
  91. package/styles/multicolumn-combobox/_layout.scss +16 -1
  92. package/styles/multicolumn-combobox/bds.css +70 -1
  93. package/styles/multicolumn-combobox/bds.scss +1 -0
  94. package/styles/multicolumn-combobox/bootstrap-dark.css +70 -1
  95. package/styles/multicolumn-combobox/bootstrap-dark.scss +1 -0
  96. package/styles/multicolumn-combobox/bootstrap.css +70 -1
  97. package/styles/multicolumn-combobox/bootstrap.scss +1 -0
  98. package/styles/multicolumn-combobox/bootstrap4.css +70 -1
  99. package/styles/multicolumn-combobox/bootstrap4.scss +1 -0
  100. package/styles/multicolumn-combobox/bootstrap5-dark.css +71 -2
  101. package/styles/multicolumn-combobox/bootstrap5-dark.scss +1 -0
  102. package/styles/multicolumn-combobox/bootstrap5.3.css +70 -1
  103. package/styles/multicolumn-combobox/bootstrap5.3.scss +1 -0
  104. package/styles/multicolumn-combobox/bootstrap5.css +70 -1
  105. package/styles/multicolumn-combobox/bootstrap5.scss +1 -0
  106. package/styles/multicolumn-combobox/fabric-dark.css +70 -1
  107. package/styles/multicolumn-combobox/fabric-dark.scss +1 -0
  108. package/styles/multicolumn-combobox/fabric.css +70 -1
  109. package/styles/multicolumn-combobox/fabric.scss +1 -0
  110. package/styles/multicolumn-combobox/fluent-dark.css +70 -1
  111. package/styles/multicolumn-combobox/fluent-dark.scss +1 -0
  112. package/styles/multicolumn-combobox/fluent.css +70 -1
  113. package/styles/multicolumn-combobox/fluent.scss +1 -0
  114. package/styles/multicolumn-combobox/fluent2.css +70 -1
  115. package/styles/multicolumn-combobox/fluent2.scss +1 -0
  116. package/styles/multicolumn-combobox/highcontrast-light.css +70 -1
  117. package/styles/multicolumn-combobox/highcontrast-light.scss +1 -0
  118. package/styles/multicolumn-combobox/highcontrast.css +70 -1
  119. package/styles/multicolumn-combobox/highcontrast.scss +1 -0
  120. package/styles/multicolumn-combobox/material-dark.css +70 -1
  121. package/styles/multicolumn-combobox/material-dark.scss +1 -0
  122. package/styles/multicolumn-combobox/material.css +70 -1
  123. package/styles/multicolumn-combobox/material.scss +1 -0
  124. package/styles/multicolumn-combobox/material3-dark.css +70 -1
  125. package/styles/multicolumn-combobox/material3-dark.scss +1 -0
  126. package/styles/multicolumn-combobox/material3.css +70 -1
  127. package/styles/multicolumn-combobox/material3.scss +1 -0
  128. package/styles/multicolumn-combobox/tailwind-dark.css +72 -3
  129. package/styles/multicolumn-combobox/tailwind-dark.scss +1 -0
  130. package/styles/multicolumn-combobox/tailwind.css +70 -1
  131. package/styles/multicolumn-combobox/tailwind.scss +1 -0
  132. package/styles/multicolumn-combobox/tailwind3.css +70 -1
  133. package/styles/multicolumn-combobox/tailwind3.scss +1 -0
  134. package/styles/tailwind-dark-lite.css +62 -3
  135. package/styles/tailwind-dark-lite.scss +1 -0
  136. package/styles/tailwind-dark.css +72 -3
  137. package/styles/tailwind-dark.scss +1 -0
  138. package/styles/tailwind-lite.css +60 -1
  139. package/styles/tailwind-lite.scss +1 -0
  140. package/styles/tailwind.css +70 -1
  141. package/styles/tailwind.scss +1 -0
  142. package/styles/tailwind3-lite.css +60 -1
  143. package/styles/tailwind3-lite.scss +1 -0
  144. package/styles/tailwind3.css +70 -1
  145. package/styles/tailwind3.scss +1 -0
package/styles/multicolumn-combobox/tailwind.css CHANGED
@@ -94,11 +94,61 @@
94
94
  padding: 4px 8px;
95
95
  }
96
96
 
97
+ /* stylelint-disable property-no-vendor-prefix */
98
+ @-webkit-keyframes material-spinner-rotate {
99
+ 0% {
100
+ -webkit-transform: rotate(0);
101
+ transform: rotate(0);
102
+ }
103
+ 100% {
104
+ -webkit-transform: rotate(360deg);
105
+ transform: rotate(360deg);
106
+ }
107
+ }
108
+ @keyframes material-spinner-rotate {
109
+ 0% {
110
+ -webkit-transform: rotate(0);
111
+ transform: rotate(0);
112
+ }
113
+ 100% {
114
+ -webkit-transform: rotate(360deg);
115
+ transform: rotate(360deg);
116
+ }
117
+ }
118
+ @-webkit-keyframes fabric-spinner-rotate {
119
+ 0% {
120
+ -webkit-transform: rotate(0);
121
+ transform: rotate(0);
122
+ }
123
+ 100% {
124
+ -webkit-transform: rotate(360deg);
125
+ transform: rotate(360deg);
126
+ }
127
+ }
128
+ @keyframes fabric-spinner-rotate {
129
+ 0% {
130
+ -webkit-transform: rotate(0);
131
+ transform: rotate(0);
132
+ }
133
+ 100% {
134
+ -webkit-transform: rotate(360deg);
135
+ transform: rotate(360deg);
136
+ }
137
+ }
97
138
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
98
139
  content: "\e729";
99
140
  font-family: "e-icons";
100
141
  }
101
142
 
143
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
144
+ /* stylelint-disable declaration-no-important */
145
+ height: 20px !important;
146
+ width: 20px !important;
147
+ -webkit-transform-origin: 10px 10px 10px !important;
148
+ transform-origin: 10px 10px 10px !important;
149
+ /* stylelint-enable declaration-no-important */
150
+ }
151
+
102
152
  .e-multicolumn-grid tr.e-groupcaptionrow {
103
153
  position: sticky;
104
154
  top: 0;
@@ -139,6 +189,14 @@
139
189
  border-radius: 0 0 2px 2px;
140
190
  }
141
191
 
192
+ .e-multicolumn-list .e-multicolumn-list-hidden {
193
+ border: 0;
194
+ height: 0;
195
+ padding: 0;
196
+ visibility: hidden;
197
+ width: 0;
198
+ }
199
+
142
200
  .e-multicolumn-grid.e-grid {
143
201
  border-width: 1px;
144
202
  border-radius: 2px;
@@ -220,7 +278,8 @@
220
278
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
221
279
  }
222
280
 
223
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
281
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
282
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
224
283
  position: relative;
225
284
  }
226
285
 
@@ -316,6 +375,16 @@
316
375
  margin-top: 2px;
317
376
  }
318
377
 
378
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
379
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
380
+ /* stylelint-disable declaration-no-important */
381
+ height: 26px !important;
382
+ width: 26px !important;
383
+ -webkit-transform-origin: 13px 13px 13px !important;
384
+ transform-origin: 13px 13px 13px !important;
385
+ /* stylelint-enable declaration-no-important */
386
+ }
387
+
319
388
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
320
389
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
321
390
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/multicolumn-combobox/tailwind.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/tailwind-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/tailwind-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/tailwind-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/tailwind-definition.scss';
8
9
  @import 'tailwind-definition.scss';
9
10
  @import 'icons/tailwind.scss';
10
11
  @import 'all.scss';
package/styles/multicolumn-combobox/tailwind3.css CHANGED
@@ -118,11 +118,61 @@
118
118
  font-size: 14px;
119
119
  }
120
120
 
121
+ /* stylelint-disable property-no-vendor-prefix */
122
+ @-webkit-keyframes material-spinner-rotate {
123
+ 0% {
124
+ -webkit-transform: rotate(0);
125
+ transform: rotate(0);
126
+ }
127
+ 100% {
128
+ -webkit-transform: rotate(360deg);
129
+ transform: rotate(360deg);
130
+ }
131
+ }
132
+ @keyframes material-spinner-rotate {
133
+ 0% {
134
+ -webkit-transform: rotate(0);
135
+ transform: rotate(0);
136
+ }
137
+ 100% {
138
+ -webkit-transform: rotate(360deg);
139
+ transform: rotate(360deg);
140
+ }
141
+ }
142
+ @-webkit-keyframes fabric-spinner-rotate {
143
+ 0% {
144
+ -webkit-transform: rotate(0);
145
+ transform: rotate(0);
146
+ }
147
+ 100% {
148
+ -webkit-transform: rotate(360deg);
149
+ transform: rotate(360deg);
150
+ }
151
+ }
152
+ @keyframes fabric-spinner-rotate {
153
+ 0% {
154
+ -webkit-transform: rotate(0);
155
+ transform: rotate(0);
156
+ }
157
+ 100% {
158
+ -webkit-transform: rotate(360deg);
159
+ transform: rotate(360deg);
160
+ }
161
+ }
121
162
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
122
163
  content: "\e729";
123
164
  font-family: "e-icons";
124
165
  }
125
166
 
167
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
168
+ /* stylelint-disable declaration-no-important */
169
+ height: 20px !important;
170
+ width: 20px !important;
171
+ -webkit-transform-origin: 10px 10px 10px !important;
172
+ transform-origin: 10px 10px 10px !important;
173
+ /* stylelint-enable declaration-no-important */
174
+ }
175
+
126
176
  .e-multicolumn-grid tr.e-groupcaptionrow {
127
177
  position: sticky;
128
178
  top: 0;
@@ -163,6 +213,14 @@
163
213
  border-radius: 0 0 6px 6px;
164
214
  }
165
215
 
216
+ .e-multicolumn-list .e-multicolumn-list-hidden {
217
+ border: 0;
218
+ height: 0;
219
+ padding: 0;
220
+ visibility: hidden;
221
+ width: 0;
222
+ }
223
+
166
224
  .e-multicolumn-grid.e-grid {
167
225
  border-width: 1px;
168
226
  border-radius: 6px;
@@ -244,7 +302,8 @@
244
302
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
245
303
  }
246
304
 
247
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
305
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
306
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
248
307
  position: relative;
249
308
  }
250
309
 
@@ -340,6 +399,16 @@
340
399
  margin-top: 2px;
341
400
  }
342
401
 
402
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
403
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
404
+ /* stylelint-disable declaration-no-important */
405
+ height: 26px !important;
406
+ width: 26px !important;
407
+ -webkit-transform-origin: 13px 13px 13px !important;
408
+ transform-origin: 13px 13px 13px !important;
409
+ /* stylelint-enable declaration-no-important */
410
+ }
411
+
343
412
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
344
413
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
345
414
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/multicolumn-combobox/tailwind3.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/tailwind3-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/tailwind3-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/tailwind3-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/tailwind3-definition.scss';
8
9
  @import 'tailwind3-definition.scss';
9
10
  @import 'icons/tailwind3.scss';
10
11
  @import 'all.scss';
package/styles/tailwind-dark-lite.css CHANGED
@@ -94,11 +94,61 @@
94
94
  padding: 4px 8px;
95
95
  }
96
96
 
97
+ /* stylelint-disable property-no-vendor-prefix */
98
+ @-webkit-keyframes material-spinner-rotate {
99
+ 0% {
100
+ -webkit-transform: rotate(0);
101
+ transform: rotate(0);
102
+ }
103
+ 100% {
104
+ -webkit-transform: rotate(360deg);
105
+ transform: rotate(360deg);
106
+ }
107
+ }
108
+ @keyframes material-spinner-rotate {
109
+ 0% {
110
+ -webkit-transform: rotate(0);
111
+ transform: rotate(0);
112
+ }
113
+ 100% {
114
+ -webkit-transform: rotate(360deg);
115
+ transform: rotate(360deg);
116
+ }
117
+ }
118
+ @-webkit-keyframes fabric-spinner-rotate {
119
+ 0% {
120
+ -webkit-transform: rotate(0);
121
+ transform: rotate(0);
122
+ }
123
+ 100% {
124
+ -webkit-transform: rotate(360deg);
125
+ transform: rotate(360deg);
126
+ }
127
+ }
128
+ @keyframes fabric-spinner-rotate {
129
+ 0% {
130
+ -webkit-transform: rotate(0);
131
+ transform: rotate(0);
132
+ }
133
+ 100% {
134
+ -webkit-transform: rotate(360deg);
135
+ transform: rotate(360deg);
136
+ }
137
+ }
97
138
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
98
139
  content: "\e729";
99
140
  font-family: "e-icons";
100
141
  }
101
142
 
143
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
144
+ /* stylelint-disable declaration-no-important */
145
+ height: 20px !important;
146
+ width: 20px !important;
147
+ -webkit-transform-origin: 10px 10px 10px !important;
148
+ transform-origin: 10px 10px 10px !important;
149
+ /* stylelint-enable declaration-no-important */
150
+ }
151
+
102
152
  .e-multicolumn-grid tr.e-groupcaptionrow {
103
153
  position: sticky;
104
154
  top: 0;
@@ -139,6 +189,14 @@
139
189
  border-radius: 0 0 2px 2px;
140
190
  }
141
191
 
192
+ .e-multicolumn-list .e-multicolumn-list-hidden {
193
+ border: 0;
194
+ height: 0;
195
+ padding: 0;
196
+ visibility: hidden;
197
+ width: 0;
198
+ }
199
+
142
200
  .e-multicolumn-grid.e-grid {
143
201
  border-width: 1px;
144
202
  border-radius: 2px;
@@ -220,7 +278,8 @@
220
278
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
221
279
  }
222
280
 
223
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
281
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
282
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
224
283
  position: relative;
225
284
  }
226
285
 
@@ -285,10 +344,10 @@
285
344
  }
286
345
  .e-popup.e-multicolumn-list .e-gridheader,
287
346
  .e-popup.e-multicolumn-list .e-gridheader colgroup {
288
- background: #232e3e;
347
+ background: #1b2430;
289
348
  }
290
349
  .e-popup.e-multicolumn-list .e-altrow {
291
- background: #232e3e;
350
+ background: #1b2430;
292
351
  }
293
352
  .e-popup.e-multicolumn-list .e-grid .e-headercell {
294
353
  background-color: unset;
package/styles/tailwind-dark-lite.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/tailwind-dark-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/tailwind-dark-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/tailwind-dark-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/tailwind-dark-definition.scss';
8
9
  @import 'multicolumn-combobox/tailwind-dark-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/tailwind-dark.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/tailwind-dark.css CHANGED
@@ -94,11 +94,61 @@
94
94
  padding: 4px 8px;
95
95
  }
96
96
 
97
+ /* stylelint-disable property-no-vendor-prefix */
98
+ @-webkit-keyframes material-spinner-rotate {
99
+ 0% {
100
+ -webkit-transform: rotate(0);
101
+ transform: rotate(0);
102
+ }
103
+ 100% {
104
+ -webkit-transform: rotate(360deg);
105
+ transform: rotate(360deg);
106
+ }
107
+ }
108
+ @keyframes material-spinner-rotate {
109
+ 0% {
110
+ -webkit-transform: rotate(0);
111
+ transform: rotate(0);
112
+ }
113
+ 100% {
114
+ -webkit-transform: rotate(360deg);
115
+ transform: rotate(360deg);
116
+ }
117
+ }
118
+ @-webkit-keyframes fabric-spinner-rotate {
119
+ 0% {
120
+ -webkit-transform: rotate(0);
121
+ transform: rotate(0);
122
+ }
123
+ 100% {
124
+ -webkit-transform: rotate(360deg);
125
+ transform: rotate(360deg);
126
+ }
127
+ }
128
+ @keyframes fabric-spinner-rotate {
129
+ 0% {
130
+ -webkit-transform: rotate(0);
131
+ transform: rotate(0);
132
+ }
133
+ 100% {
134
+ -webkit-transform: rotate(360deg);
135
+ transform: rotate(360deg);
136
+ }
137
+ }
97
138
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
98
139
  content: "\e729";
99
140
  font-family: "e-icons";
100
141
  }
101
142
 
143
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
144
+ /* stylelint-disable declaration-no-important */
145
+ height: 20px !important;
146
+ width: 20px !important;
147
+ -webkit-transform-origin: 10px 10px 10px !important;
148
+ transform-origin: 10px 10px 10px !important;
149
+ /* stylelint-enable declaration-no-important */
150
+ }
151
+
102
152
  .e-multicolumn-grid tr.e-groupcaptionrow {
103
153
  position: sticky;
104
154
  top: 0;
@@ -139,6 +189,14 @@
139
189
  border-radius: 0 0 2px 2px;
140
190
  }
141
191
 
192
+ .e-multicolumn-list .e-multicolumn-list-hidden {
193
+ border: 0;
194
+ height: 0;
195
+ padding: 0;
196
+ visibility: hidden;
197
+ width: 0;
198
+ }
199
+
142
200
  .e-multicolumn-grid.e-grid {
143
201
  border-width: 1px;
144
202
  border-radius: 2px;
@@ -220,7 +278,8 @@
220
278
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
221
279
  }
222
280
 
223
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
281
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
282
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
224
283
  position: relative;
225
284
  }
226
285
 
@@ -285,10 +344,10 @@
285
344
  }
286
345
  .e-popup.e-multicolumn-list .e-gridheader,
287
346
  .e-popup.e-multicolumn-list .e-gridheader colgroup {
288
- background: #232e3e;
347
+ background: #1b2430;
289
348
  }
290
349
  .e-popup.e-multicolumn-list .e-altrow {
291
- background: #232e3e;
350
+ background: #1b2430;
292
351
  }
293
352
  .e-popup.e-multicolumn-list .e-grid .e-headercell {
294
353
  background-color: unset;
@@ -316,6 +375,16 @@
316
375
  margin-top: 2px;
317
376
  }
318
377
 
378
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
379
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
380
+ /* stylelint-disable declaration-no-important */
381
+ height: 26px !important;
382
+ width: 26px !important;
383
+ -webkit-transform-origin: 13px 13px 13px !important;
384
+ transform-origin: 13px 13px 13px !important;
385
+ /* stylelint-enable declaration-no-important */
386
+ }
387
+
319
388
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
320
389
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
321
390
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/tailwind-dark.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/tailwind-dark-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/tailwind-dark-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/tailwind-dark-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/tailwind-dark-definition.scss';
8
9
  @import 'multicolumn-combobox/tailwind-dark-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/tailwind-dark.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/tailwind-lite.css CHANGED
@@ -94,11 +94,61 @@
94
94
  padding: 4px 8px;
95
95
  }
96
96
 
97
+ /* stylelint-disable property-no-vendor-prefix */
98
+ @-webkit-keyframes material-spinner-rotate {
99
+ 0% {
100
+ -webkit-transform: rotate(0);
101
+ transform: rotate(0);
102
+ }
103
+ 100% {
104
+ -webkit-transform: rotate(360deg);
105
+ transform: rotate(360deg);
106
+ }
107
+ }
108
+ @keyframes material-spinner-rotate {
109
+ 0% {
110
+ -webkit-transform: rotate(0);
111
+ transform: rotate(0);
112
+ }
113
+ 100% {
114
+ -webkit-transform: rotate(360deg);
115
+ transform: rotate(360deg);
116
+ }
117
+ }
118
+ @-webkit-keyframes fabric-spinner-rotate {
119
+ 0% {
120
+ -webkit-transform: rotate(0);
121
+ transform: rotate(0);
122
+ }
123
+ 100% {
124
+ -webkit-transform: rotate(360deg);
125
+ transform: rotate(360deg);
126
+ }
127
+ }
128
+ @keyframes fabric-spinner-rotate {
129
+ 0% {
130
+ -webkit-transform: rotate(0);
131
+ transform: rotate(0);
132
+ }
133
+ 100% {
134
+ -webkit-transform: rotate(360deg);
135
+ transform: rotate(360deg);
136
+ }
137
+ }
97
138
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
98
139
  content: "\e729";
99
140
  font-family: "e-icons";
100
141
  }
101
142
 
143
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
144
+ /* stylelint-disable declaration-no-important */
145
+ height: 20px !important;
146
+ width: 20px !important;
147
+ -webkit-transform-origin: 10px 10px 10px !important;
148
+ transform-origin: 10px 10px 10px !important;
149
+ /* stylelint-enable declaration-no-important */
150
+ }
151
+
102
152
  .e-multicolumn-grid tr.e-groupcaptionrow {
103
153
  position: sticky;
104
154
  top: 0;
@@ -139,6 +189,14 @@
139
189
  border-radius: 0 0 2px 2px;
140
190
  }
141
191
 
192
+ .e-multicolumn-list .e-multicolumn-list-hidden {
193
+ border: 0;
194
+ height: 0;
195
+ padding: 0;
196
+ visibility: hidden;
197
+ width: 0;
198
+ }
199
+
142
200
  .e-multicolumn-grid.e-grid {
143
201
  border-width: 1px;
144
202
  border-radius: 2px;
@@ -220,7 +278,8 @@
220
278
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
221
279
  }
222
280
 
223
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
281
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
282
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
224
283
  position: relative;
225
284
  }
226
285
 
package/styles/tailwind-lite.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/tailwind-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/tailwind-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/tailwind-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/tailwind-definition.scss';
8
9
  @import 'multicolumn-combobox/tailwind-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/tailwind.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/tailwind.css CHANGED
@@ -94,11 +94,61 @@
94
94
  padding: 4px 8px;
95
95
  }
96
96
 
97
+ /* stylelint-disable property-no-vendor-prefix */
98
+ @-webkit-keyframes material-spinner-rotate {
99
+ 0% {
100
+ -webkit-transform: rotate(0);
101
+ transform: rotate(0);
102
+ }
103
+ 100% {
104
+ -webkit-transform: rotate(360deg);
105
+ transform: rotate(360deg);
106
+ }
107
+ }
108
+ @keyframes material-spinner-rotate {
109
+ 0% {
110
+ -webkit-transform: rotate(0);
111
+ transform: rotate(0);
112
+ }
113
+ 100% {
114
+ -webkit-transform: rotate(360deg);
115
+ transform: rotate(360deg);
116
+ }
117
+ }
118
+ @-webkit-keyframes fabric-spinner-rotate {
119
+ 0% {
120
+ -webkit-transform: rotate(0);
121
+ transform: rotate(0);
122
+ }
123
+ 100% {
124
+ -webkit-transform: rotate(360deg);
125
+ transform: rotate(360deg);
126
+ }
127
+ }
128
+ @keyframes fabric-spinner-rotate {
129
+ 0% {
130
+ -webkit-transform: rotate(0);
131
+ transform: rotate(0);
132
+ }
133
+ 100% {
134
+ -webkit-transform: rotate(360deg);
135
+ transform: rotate(360deg);
136
+ }
137
+ }
97
138
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
98
139
  content: "\e729";
99
140
  font-family: "e-icons";
100
141
  }
101
142
 
143
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
144
+ /* stylelint-disable declaration-no-important */
145
+ height: 20px !important;
146
+ width: 20px !important;
147
+ -webkit-transform-origin: 10px 10px 10px !important;
148
+ transform-origin: 10px 10px 10px !important;
149
+ /* stylelint-enable declaration-no-important */
150
+ }
151
+
102
152
  .e-multicolumn-grid tr.e-groupcaptionrow {
103
153
  position: sticky;
104
154
  top: 0;
@@ -139,6 +189,14 @@
139
189
  border-radius: 0 0 2px 2px;
140
190
  }
141
191
 
192
+ .e-multicolumn-list .e-multicolumn-list-hidden {
193
+ border: 0;
194
+ height: 0;
195
+ padding: 0;
196
+ visibility: hidden;
197
+ width: 0;
198
+ }
199
+
142
200
  .e-multicolumn-grid.e-grid {
143
201
  border-width: 1px;
144
202
  border-radius: 2px;
@@ -220,7 +278,8 @@
220
278
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
221
279
  }
222
280
 
223
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
281
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
282
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
224
283
  position: relative;
225
284
  }
226
285
 
@@ -316,6 +375,16 @@
316
375
  margin-top: 2px;
317
376
  }
318
377
 
378
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
379
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
380
+ /* stylelint-disable declaration-no-important */
381
+ height: 26px !important;
382
+ width: 26px !important;
383
+ -webkit-transform-origin: 13px 13px 13px !important;
384
+ transform-origin: 13px 13px 13px !important;
385
+ /* stylelint-enable declaration-no-important */
386
+ }
387
+
319
388
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
320
389
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
321
390
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/tailwind.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/tailwind-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/tailwind-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/tailwind-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/tailwind-definition.scss';
8
9
  @import 'multicolumn-combobox/tailwind-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/tailwind.scss';
10
11
  @import 'multicolumn-combobox/all.scss';