@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/bootstrap5.css CHANGED
@@ -114,11 +114,61 @@
114
114
  font-size: 14px;
115
115
  }
116
116
 
117
+ /* stylelint-disable property-no-vendor-prefix */
118
+ @-webkit-keyframes material-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 material-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
+ }
138
+ @-webkit-keyframes fabric-spinner-rotate {
139
+ 0% {
140
+ -webkit-transform: rotate(0);
141
+ transform: rotate(0);
142
+ }
143
+ 100% {
144
+ -webkit-transform: rotate(360deg);
145
+ transform: rotate(360deg);
146
+ }
147
+ }
148
+ @keyframes fabric-spinner-rotate {
149
+ 0% {
150
+ -webkit-transform: rotate(0);
151
+ transform: rotate(0);
152
+ }
153
+ 100% {
154
+ -webkit-transform: rotate(360deg);
155
+ transform: rotate(360deg);
156
+ }
157
+ }
117
158
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
118
159
  content: "\e729";
119
160
  font-family: "e-icons";
120
161
  }
121
162
 
163
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
164
+ /* stylelint-disable declaration-no-important */
165
+ height: 20px !important;
166
+ width: 20px !important;
167
+ -webkit-transform-origin: 10px 10px 10px !important;
168
+ transform-origin: 10px 10px 10px !important;
169
+ /* stylelint-enable declaration-no-important */
170
+ }
171
+
122
172
  .e-multicolumn-grid tr.e-groupcaptionrow {
123
173
  position: sticky;
124
174
  top: 0;
@@ -159,6 +209,14 @@
159
209
  border-radius: 0 0 2px 2px;
160
210
  }
161
211
 
212
+ .e-multicolumn-list .e-multicolumn-list-hidden {
213
+ border: 0;
214
+ height: 0;
215
+ padding: 0;
216
+ visibility: hidden;
217
+ width: 0;
218
+ }
219
+
162
220
  .e-multicolumn-grid.e-grid {
163
221
  border-width: 1px;
164
222
  border-radius: 2px;
@@ -240,7 +298,8 @@
240
298
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
241
299
  }
242
300
 
243
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
301
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
302
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
244
303
  position: relative;
245
304
  }
246
305
 
@@ -336,6 +395,16 @@
336
395
  margin-top: 4px;
337
396
  }
338
397
 
398
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
399
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
400
+ /* stylelint-disable declaration-no-important */
401
+ height: 26px !important;
402
+ width: 26px !important;
403
+ -webkit-transform-origin: 13px 13px 13px !important;
404
+ transform-origin: 13px 13px 13px !important;
405
+ /* stylelint-enable declaration-no-important */
406
+ }
407
+
339
408
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
340
409
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
341
410
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/bootstrap5.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/bootstrap5-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/bootstrap5-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
8
9
  @import 'multicolumn-combobox/bootstrap5-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/bootstrap5.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/fabric-dark-lite.css CHANGED
@@ -40,11 +40,61 @@
40
40
  color: #fff;
41
41
  }
42
42
 
43
+ /* stylelint-disable property-no-vendor-prefix */
44
+ @-webkit-keyframes material-spinner-rotate {
45
+ 0% {
46
+ -webkit-transform: rotate(0);
47
+ transform: rotate(0);
48
+ }
49
+ 100% {
50
+ -webkit-transform: rotate(360deg);
51
+ transform: rotate(360deg);
52
+ }
53
+ }
54
+ @keyframes material-spinner-rotate {
55
+ 0% {
56
+ -webkit-transform: rotate(0);
57
+ transform: rotate(0);
58
+ }
59
+ 100% {
60
+ -webkit-transform: rotate(360deg);
61
+ transform: rotate(360deg);
62
+ }
63
+ }
64
+ @-webkit-keyframes fabric-spinner-rotate {
65
+ 0% {
66
+ -webkit-transform: rotate(0);
67
+ transform: rotate(0);
68
+ }
69
+ 100% {
70
+ -webkit-transform: rotate(360deg);
71
+ transform: rotate(360deg);
72
+ }
73
+ }
74
+ @keyframes fabric-spinner-rotate {
75
+ 0% {
76
+ -webkit-transform: rotate(0);
77
+ transform: rotate(0);
78
+ }
79
+ 100% {
80
+ -webkit-transform: rotate(360deg);
81
+ transform: rotate(360deg);
82
+ }
83
+ }
43
84
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
44
85
  content: "\e966";
45
86
  font-family: "e-icons";
46
87
  }
47
88
 
89
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
90
+ /* stylelint-disable declaration-no-important */
91
+ height: 20px !important;
92
+ width: 20px !important;
93
+ -webkit-transform-origin: 10px 10px 10px !important;
94
+ transform-origin: 10px 10px 10px !important;
95
+ /* stylelint-enable declaration-no-important */
96
+ }
97
+
48
98
  .e-multicolumn-grid tr.e-groupcaptionrow {
49
99
  position: sticky;
50
100
  top: 0;
@@ -85,6 +135,14 @@
85
135
  border-radius: 0 0 0 0;
86
136
  }
87
137
 
138
+ .e-multicolumn-list .e-multicolumn-list-hidden {
139
+ border: 0;
140
+ height: 0;
141
+ padding: 0;
142
+ visibility: hidden;
143
+ width: 0;
144
+ }
145
+
88
146
  .e-multicolumn-grid.e-grid {
89
147
  border-width: 0;
90
148
  border-radius: 0;
@@ -166,7 +224,8 @@
166
224
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
167
225
  }
168
226
 
169
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
227
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
228
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
170
229
  position: relative;
171
230
  }
172
231
 
package/styles/fabric-dark-lite.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/fabric-dark-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/fabric-dark-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/fabric-dark-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
8
9
  @import 'multicolumn-combobox/fabric-dark-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/fabric-dark.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/fabric-dark.css CHANGED
@@ -40,11 +40,61 @@
40
40
  color: #fff;
41
41
  }
42
42
 
43
+ /* stylelint-disable property-no-vendor-prefix */
44
+ @-webkit-keyframes material-spinner-rotate {
45
+ 0% {
46
+ -webkit-transform: rotate(0);
47
+ transform: rotate(0);
48
+ }
49
+ 100% {
50
+ -webkit-transform: rotate(360deg);
51
+ transform: rotate(360deg);
52
+ }
53
+ }
54
+ @keyframes material-spinner-rotate {
55
+ 0% {
56
+ -webkit-transform: rotate(0);
57
+ transform: rotate(0);
58
+ }
59
+ 100% {
60
+ -webkit-transform: rotate(360deg);
61
+ transform: rotate(360deg);
62
+ }
63
+ }
64
+ @-webkit-keyframes fabric-spinner-rotate {
65
+ 0% {
66
+ -webkit-transform: rotate(0);
67
+ transform: rotate(0);
68
+ }
69
+ 100% {
70
+ -webkit-transform: rotate(360deg);
71
+ transform: rotate(360deg);
72
+ }
73
+ }
74
+ @keyframes fabric-spinner-rotate {
75
+ 0% {
76
+ -webkit-transform: rotate(0);
77
+ transform: rotate(0);
78
+ }
79
+ 100% {
80
+ -webkit-transform: rotate(360deg);
81
+ transform: rotate(360deg);
82
+ }
83
+ }
43
84
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
44
85
  content: "\e966";
45
86
  font-family: "e-icons";
46
87
  }
47
88
 
89
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
90
+ /* stylelint-disable declaration-no-important */
91
+ height: 20px !important;
92
+ width: 20px !important;
93
+ -webkit-transform-origin: 10px 10px 10px !important;
94
+ transform-origin: 10px 10px 10px !important;
95
+ /* stylelint-enable declaration-no-important */
96
+ }
97
+
48
98
  .e-multicolumn-grid tr.e-groupcaptionrow {
49
99
  position: sticky;
50
100
  top: 0;
@@ -85,6 +135,14 @@
85
135
  border-radius: 0 0 0 0;
86
136
  }
87
137
 
138
+ .e-multicolumn-list .e-multicolumn-list-hidden {
139
+ border: 0;
140
+ height: 0;
141
+ padding: 0;
142
+ visibility: hidden;
143
+ width: 0;
144
+ }
145
+
88
146
  .e-multicolumn-grid.e-grid {
89
147
  border-width: 0;
90
148
  border-radius: 0;
@@ -166,7 +224,8 @@
166
224
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
167
225
  }
168
226
 
169
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
227
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
228
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
170
229
  position: relative;
171
230
  }
172
231
 
@@ -262,6 +321,16 @@
262
321
  margin-top: unset;
263
322
  }
264
323
 
324
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
325
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
326
+ /* stylelint-disable declaration-no-important */
327
+ height: 26px !important;
328
+ width: 26px !important;
329
+ -webkit-transform-origin: 13px 13px 13px !important;
330
+ transform-origin: 13px 13px 13px !important;
331
+ /* stylelint-enable declaration-no-important */
332
+ }
333
+
265
334
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
266
335
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
267
336
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/fabric-dark.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/fabric-dark-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/fabric-dark-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/fabric-dark-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
8
9
  @import 'multicolumn-combobox/fabric-dark-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/fabric-dark.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/fabric-lite.css CHANGED
@@ -40,11 +40,61 @@
40
40
  color: #333;
41
41
  }
42
42
 
43
+ /* stylelint-disable property-no-vendor-prefix */
44
+ @-webkit-keyframes material-spinner-rotate {
45
+ 0% {
46
+ -webkit-transform: rotate(0);
47
+ transform: rotate(0);
48
+ }
49
+ 100% {
50
+ -webkit-transform: rotate(360deg);
51
+ transform: rotate(360deg);
52
+ }
53
+ }
54
+ @keyframes material-spinner-rotate {
55
+ 0% {
56
+ -webkit-transform: rotate(0);
57
+ transform: rotate(0);
58
+ }
59
+ 100% {
60
+ -webkit-transform: rotate(360deg);
61
+ transform: rotate(360deg);
62
+ }
63
+ }
64
+ @-webkit-keyframes fabric-spinner-rotate {
65
+ 0% {
66
+ -webkit-transform: rotate(0);
67
+ transform: rotate(0);
68
+ }
69
+ 100% {
70
+ -webkit-transform: rotate(360deg);
71
+ transform: rotate(360deg);
72
+ }
73
+ }
74
+ @keyframes fabric-spinner-rotate {
75
+ 0% {
76
+ -webkit-transform: rotate(0);
77
+ transform: rotate(0);
78
+ }
79
+ 100% {
80
+ -webkit-transform: rotate(360deg);
81
+ transform: rotate(360deg);
82
+ }
83
+ }
43
84
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
44
85
  content: "\e966";
45
86
  font-family: "e-icons";
46
87
  }
47
88
 
89
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
90
+ /* stylelint-disable declaration-no-important */
91
+ height: 20px !important;
92
+ width: 20px !important;
93
+ -webkit-transform-origin: 10px 10px 10px !important;
94
+ transform-origin: 10px 10px 10px !important;
95
+ /* stylelint-enable declaration-no-important */
96
+ }
97
+
48
98
  .e-multicolumn-grid tr.e-groupcaptionrow {
49
99
  position: sticky;
50
100
  top: 0;
@@ -85,6 +135,14 @@
85
135
  border-radius: 0 0 0 0;
86
136
  }
87
137
 
138
+ .e-multicolumn-list .e-multicolumn-list-hidden {
139
+ border: 0;
140
+ height: 0;
141
+ padding: 0;
142
+ visibility: hidden;
143
+ width: 0;
144
+ }
145
+
88
146
  .e-multicolumn-grid.e-grid {
89
147
  border-width: 1px;
90
148
  border-radius: 0;
@@ -166,7 +224,8 @@
166
224
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
167
225
  }
168
226
 
169
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
227
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
228
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
170
229
  position: relative;
171
230
  }
172
231
 
package/styles/fabric-lite.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/fabric-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/fabric-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/fabric-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/fabric-definition.scss';
8
9
  @import 'multicolumn-combobox/fabric-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/fabric.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/fabric.css CHANGED
@@ -40,11 +40,61 @@
40
40
  color: #333;
41
41
  }
42
42
 
43
+ /* stylelint-disable property-no-vendor-prefix */
44
+ @-webkit-keyframes material-spinner-rotate {
45
+ 0% {
46
+ -webkit-transform: rotate(0);
47
+ transform: rotate(0);
48
+ }
49
+ 100% {
50
+ -webkit-transform: rotate(360deg);
51
+ transform: rotate(360deg);
52
+ }
53
+ }
54
+ @keyframes material-spinner-rotate {
55
+ 0% {
56
+ -webkit-transform: rotate(0);
57
+ transform: rotate(0);
58
+ }
59
+ 100% {
60
+ -webkit-transform: rotate(360deg);
61
+ transform: rotate(360deg);
62
+ }
63
+ }
64
+ @-webkit-keyframes fabric-spinner-rotate {
65
+ 0% {
66
+ -webkit-transform: rotate(0);
67
+ transform: rotate(0);
68
+ }
69
+ 100% {
70
+ -webkit-transform: rotate(360deg);
71
+ transform: rotate(360deg);
72
+ }
73
+ }
74
+ @keyframes fabric-spinner-rotate {
75
+ 0% {
76
+ -webkit-transform: rotate(0);
77
+ transform: rotate(0);
78
+ }
79
+ 100% {
80
+ -webkit-transform: rotate(360deg);
81
+ transform: rotate(360deg);
82
+ }
83
+ }
43
84
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
44
85
  content: "\e966";
45
86
  font-family: "e-icons";
46
87
  }
47
88
 
89
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
90
+ /* stylelint-disable declaration-no-important */
91
+ height: 20px !important;
92
+ width: 20px !important;
93
+ -webkit-transform-origin: 10px 10px 10px !important;
94
+ transform-origin: 10px 10px 10px !important;
95
+ /* stylelint-enable declaration-no-important */
96
+ }
97
+
48
98
  .e-multicolumn-grid tr.e-groupcaptionrow {
49
99
  position: sticky;
50
100
  top: 0;
@@ -85,6 +135,14 @@
85
135
  border-radius: 0 0 0 0;
86
136
  }
87
137
 
138
+ .e-multicolumn-list .e-multicolumn-list-hidden {
139
+ border: 0;
140
+ height: 0;
141
+ padding: 0;
142
+ visibility: hidden;
143
+ width: 0;
144
+ }
145
+
88
146
  .e-multicolumn-grid.e-grid {
89
147
  border-width: 1px;
90
148
  border-radius: 0;
@@ -166,7 +224,8 @@
166
224
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
167
225
  }
168
226
 
169
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
227
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
228
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
170
229
  position: relative;
171
230
  }
172
231
 
@@ -262,6 +321,16 @@
262
321
  margin-top: unset;
263
322
  }
264
323
 
324
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
325
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
326
+ /* stylelint-disable declaration-no-important */
327
+ height: 26px !important;
328
+ width: 26px !important;
329
+ -webkit-transform-origin: 13px 13px 13px !important;
330
+ transform-origin: 13px 13px 13px !important;
331
+ /* stylelint-enable declaration-no-important */
332
+ }
333
+
265
334
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
266
335
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
267
336
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
package/styles/fabric.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/fabric-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/fabric-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/fabric-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/fabric-definition.scss';
8
9
  @import 'multicolumn-combobox/fabric-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/fabric.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
package/styles/fluent-dark-lite.css CHANGED
@@ -107,11 +107,61 @@
107
107
  font-size: 14px;
108
108
  }
109
109
 
110
+ /* stylelint-disable property-no-vendor-prefix */
111
+ @-webkit-keyframes material-spinner-rotate {
112
+ 0% {
113
+ -webkit-transform: rotate(0);
114
+ transform: rotate(0);
115
+ }
116
+ 100% {
117
+ -webkit-transform: rotate(360deg);
118
+ transform: rotate(360deg);
119
+ }
120
+ }
121
+ @keyframes material-spinner-rotate {
122
+ 0% {
123
+ -webkit-transform: rotate(0);
124
+ transform: rotate(0);
125
+ }
126
+ 100% {
127
+ -webkit-transform: rotate(360deg);
128
+ transform: rotate(360deg);
129
+ }
130
+ }
131
+ @-webkit-keyframes fabric-spinner-rotate {
132
+ 0% {
133
+ -webkit-transform: rotate(0);
134
+ transform: rotate(0);
135
+ }
136
+ 100% {
137
+ -webkit-transform: rotate(360deg);
138
+ transform: rotate(360deg);
139
+ }
140
+ }
141
+ @keyframes fabric-spinner-rotate {
142
+ 0% {
143
+ -webkit-transform: rotate(0);
144
+ transform: rotate(0);
145
+ }
146
+ 100% {
147
+ -webkit-transform: rotate(360deg);
148
+ transform: rotate(360deg);
149
+ }
150
+ }
110
151
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
111
152
  content: "\e729";
112
153
  font-family: "e-icons";
113
154
  }
114
155
 
156
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
157
+ /* stylelint-disable declaration-no-important */
158
+ height: 20px !important;
159
+ width: 20px !important;
160
+ -webkit-transform-origin: 10px 10px 10px !important;
161
+ transform-origin: 10px 10px 10px !important;
162
+ /* stylelint-enable declaration-no-important */
163
+ }
164
+
115
165
  .e-multicolumn-grid tr.e-groupcaptionrow {
116
166
  position: sticky;
117
167
  top: 0;
@@ -152,6 +202,14 @@
152
202
  border-radius: 0 0 2px 2px;
153
203
  }
154
204
 
205
+ .e-multicolumn-list .e-multicolumn-list-hidden {
206
+ border: 0;
207
+ height: 0;
208
+ padding: 0;
209
+ visibility: hidden;
210
+ width: 0;
211
+ }
212
+
155
213
  .e-multicolumn-grid.e-grid {
156
214
  border-width: 1px;
157
215
  border-radius: 2px;
@@ -233,7 +291,8 @@
233
291
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
234
292
  }
235
293
 
236
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
294
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
295
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
237
296
  position: relative;
238
297
  }
239
298
 
package/styles/fluent-dark-lite.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/fluent-dark-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/fluent-dark-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/fluent-dark-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';
8
9
  @import 'multicolumn-combobox/fluent-dark-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/fluent-dark.scss';
10
11
  @import 'multicolumn-combobox/all.scss';