@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
@@ -93,11 +93,61 @@
93
93
  padding: 4px 8px;
94
94
  }
95
95
 
96
+ /* stylelint-disable property-no-vendor-prefix */
97
+ @-webkit-keyframes material-spinner-rotate {
98
+ 0% {
99
+ -webkit-transform: rotate(0deg);
100
+ transform: rotate(0deg);
101
+ }
102
+ 100% {
103
+ -webkit-transform: rotate(360deg);
104
+ transform: rotate(360deg);
105
+ }
106
+ }
107
+ @keyframes material-spinner-rotate {
108
+ 0% {
109
+ -webkit-transform: rotate(0deg);
110
+ transform: rotate(0deg);
111
+ }
112
+ 100% {
113
+ -webkit-transform: rotate(360deg);
114
+ transform: rotate(360deg);
115
+ }
116
+ }
117
+ @-webkit-keyframes fabric-spinner-rotate {
118
+ 0% {
119
+ -webkit-transform: rotate(0deg);
120
+ transform: rotate(0deg);
121
+ }
122
+ 100% {
123
+ -webkit-transform: rotate(360deg);
124
+ transform: rotate(360deg);
125
+ }
126
+ }
127
+ @keyframes fabric-spinner-rotate {
128
+ 0% {
129
+ -webkit-transform: rotate(0deg);
130
+ transform: rotate(0deg);
131
+ }
132
+ 100% {
133
+ -webkit-transform: rotate(360deg);
134
+ transform: rotate(360deg);
135
+ }
136
+ }
96
137
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
97
138
  content: "\e969";
98
139
  font-family: "e-icons";
99
140
  }
100
141
 
142
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
143
+ /* stylelint-disable declaration-no-important */
144
+ height: 20px !important;
145
+ width: 20px !important;
146
+ -webkit-transform-origin: 10px 10px 10px !important;
147
+ transform-origin: 10px 10px 10px !important;
148
+ /* stylelint-enable declaration-no-important */
149
+ }
150
+
101
151
  .e-multicolumn-grid tr.e-groupcaptionrow {
102
152
  position: sticky;
103
153
  top: 0;
@@ -138,6 +188,14 @@
138
188
  border-radius: 0 0 0 0;
139
189
  }
140
190
 
191
+ .e-multicolumn-list .e-multicolumn-list-hidden {
192
+ border: 0;
193
+ height: 0;
194
+ padding: 0;
195
+ visibility: hidden;
196
+ width: 0;
197
+ }
198
+
141
199
  .e-multicolumn-grid.e-grid {
142
200
  border-width: 1px;
143
201
  border-radius: 0;
@@ -219,7 +277,8 @@
219
277
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
220
278
  }
221
279
 
222
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
280
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
281
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
223
282
  position: relative;
224
283
  }
225
284
 
@@ -315,6 +374,16 @@
315
374
  margin-top: 1px;
316
375
  }
317
376
 
377
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
378
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
379
+ /* stylelint-disable declaration-no-important */
380
+ height: 26px !important;
381
+ width: 26px !important;
382
+ -webkit-transform-origin: 13px 13px 13px !important;
383
+ transform-origin: 13px 13px 13px !important;
384
+ /* stylelint-enable declaration-no-important */
385
+ }
386
+
318
387
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
319
388
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
320
389
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/material-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/material-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/material-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/material-definition.scss';
8
9
  @import 'multicolumn-combobox/material-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/material.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
@@ -101,11 +101,61 @@
101
101
  padding: 4px 8px;
102
102
  }
103
103
 
104
+ /* stylelint-disable property-no-vendor-prefix */
105
+ @-webkit-keyframes material-spinner-rotate {
106
+ 0% {
107
+ -webkit-transform: rotate(0deg);
108
+ transform: rotate(0deg);
109
+ }
110
+ 100% {
111
+ -webkit-transform: rotate(360deg);
112
+ transform: rotate(360deg);
113
+ }
114
+ }
115
+ @keyframes material-spinner-rotate {
116
+ 0% {
117
+ -webkit-transform: rotate(0deg);
118
+ transform: rotate(0deg);
119
+ }
120
+ 100% {
121
+ -webkit-transform: rotate(360deg);
122
+ transform: rotate(360deg);
123
+ }
124
+ }
125
+ @-webkit-keyframes fabric-spinner-rotate {
126
+ 0% {
127
+ -webkit-transform: rotate(0deg);
128
+ transform: rotate(0deg);
129
+ }
130
+ 100% {
131
+ -webkit-transform: rotate(360deg);
132
+ transform: rotate(360deg);
133
+ }
134
+ }
135
+ @keyframes fabric-spinner-rotate {
136
+ 0% {
137
+ -webkit-transform: rotate(0deg);
138
+ transform: rotate(0deg);
139
+ }
140
+ 100% {
141
+ -webkit-transform: rotate(360deg);
142
+ transform: rotate(360deg);
143
+ }
144
+ }
104
145
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
105
146
  content: "\e70d";
106
147
  font-family: "e-icons";
107
148
  }
108
149
 
150
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
151
+ /* stylelint-disable declaration-no-important */
152
+ height: 20px !important;
153
+ width: 20px !important;
154
+ -webkit-transform-origin: 10px 10px 10px !important;
155
+ transform-origin: 10px 10px 10px !important;
156
+ /* stylelint-enable declaration-no-important */
157
+ }
158
+
109
159
  .e-multicolumn-grid tr.e-groupcaptionrow {
110
160
  position: sticky;
111
161
  top: 0;
@@ -146,6 +196,14 @@
146
196
  border-radius: 0 0 4px 4px;
147
197
  }
148
198
 
199
+ .e-multicolumn-list .e-multicolumn-list-hidden {
200
+ border: 0;
201
+ height: 0;
202
+ padding: 0;
203
+ visibility: hidden;
204
+ width: 0;
205
+ }
206
+
149
207
  .e-multicolumn-grid.e-grid {
150
208
  border-width: 1px;
151
209
  border-radius: 4px;
@@ -227,7 +285,8 @@
227
285
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
228
286
  }
229
287
 
230
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
288
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
289
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
231
290
  position: relative;
232
291
  }
233
292
 
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/material3-dark-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/material3-dark-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/material3-dark-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/material3-dark-definition.scss';
8
9
  @import 'multicolumn-combobox/material3-dark-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/material3-dark.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
@@ -101,11 +101,61 @@
101
101
  padding: 4px 8px;
102
102
  }
103
103
 
104
+ /* stylelint-disable property-no-vendor-prefix */
105
+ @-webkit-keyframes material-spinner-rotate {
106
+ 0% {
107
+ -webkit-transform: rotate(0deg);
108
+ transform: rotate(0deg);
109
+ }
110
+ 100% {
111
+ -webkit-transform: rotate(360deg);
112
+ transform: rotate(360deg);
113
+ }
114
+ }
115
+ @keyframes material-spinner-rotate {
116
+ 0% {
117
+ -webkit-transform: rotate(0deg);
118
+ transform: rotate(0deg);
119
+ }
120
+ 100% {
121
+ -webkit-transform: rotate(360deg);
122
+ transform: rotate(360deg);
123
+ }
124
+ }
125
+ @-webkit-keyframes fabric-spinner-rotate {
126
+ 0% {
127
+ -webkit-transform: rotate(0deg);
128
+ transform: rotate(0deg);
129
+ }
130
+ 100% {
131
+ -webkit-transform: rotate(360deg);
132
+ transform: rotate(360deg);
133
+ }
134
+ }
135
+ @keyframes fabric-spinner-rotate {
136
+ 0% {
137
+ -webkit-transform: rotate(0deg);
138
+ transform: rotate(0deg);
139
+ }
140
+ 100% {
141
+ -webkit-transform: rotate(360deg);
142
+ transform: rotate(360deg);
143
+ }
144
+ }
104
145
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
105
146
  content: "\e70d";
106
147
  font-family: "e-icons";
107
148
  }
108
149
 
150
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
151
+ /* stylelint-disable declaration-no-important */
152
+ height: 20px !important;
153
+ width: 20px !important;
154
+ -webkit-transform-origin: 10px 10px 10px !important;
155
+ transform-origin: 10px 10px 10px !important;
156
+ /* stylelint-enable declaration-no-important */
157
+ }
158
+
109
159
  .e-multicolumn-grid tr.e-groupcaptionrow {
110
160
  position: sticky;
111
161
  top: 0;
@@ -146,6 +196,14 @@
146
196
  border-radius: 0 0 4px 4px;
147
197
  }
148
198
 
199
+ .e-multicolumn-list .e-multicolumn-list-hidden {
200
+ border: 0;
201
+ height: 0;
202
+ padding: 0;
203
+ visibility: hidden;
204
+ width: 0;
205
+ }
206
+
149
207
  .e-multicolumn-grid.e-grid {
150
208
  border-width: 1px;
151
209
  border-radius: 4px;
@@ -227,7 +285,8 @@
227
285
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
228
286
  }
229
287
 
230
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
288
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
289
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
231
290
  position: relative;
232
291
  }
233
292
 
@@ -325,6 +384,16 @@
325
384
  margin-top: 1px;
326
385
  }
327
386
 
387
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
388
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
389
+ /* stylelint-disable declaration-no-important */
390
+ height: 26px !important;
391
+ width: 26px !important;
392
+ -webkit-transform-origin: 13px 13px 13px !important;
393
+ transform-origin: 13px 13px 13px !important;
394
+ /* stylelint-enable declaration-no-important */
395
+ }
396
+
328
397
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
329
398
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
330
399
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
@@ -7,6 +7,7 @@
7
7
  @import 'ej2-dropdowns/styles/drop-down-list/material3-dark-definition.scss';
8
8
  @import 'ej2-dropdowns/styles/combo-box/material3-dark-definition.scss';
9
9
  @import 'ej2-grids/styles/grid/material3-dark-definition.scss';
10
+ @import 'ej2-popups/styles/spinner/material3-dark-definition.scss';
10
11
  @import 'multicolumn-combobox/material3-dark-definition.scss';
11
12
  @import 'multicolumn-combobox/icons/material3-dark.scss';
12
13
  @import 'multicolumn-combobox/all.scss';
@@ -103,11 +103,61 @@
103
103
  padding: 4px 8px;
104
104
  }
105
105
 
106
+ /* stylelint-disable property-no-vendor-prefix */
107
+ @-webkit-keyframes material-spinner-rotate {
108
+ 0% {
109
+ -webkit-transform: rotate(0deg);
110
+ transform: rotate(0deg);
111
+ }
112
+ 100% {
113
+ -webkit-transform: rotate(360deg);
114
+ transform: rotate(360deg);
115
+ }
116
+ }
117
+ @keyframes material-spinner-rotate {
118
+ 0% {
119
+ -webkit-transform: rotate(0deg);
120
+ transform: rotate(0deg);
121
+ }
122
+ 100% {
123
+ -webkit-transform: rotate(360deg);
124
+ transform: rotate(360deg);
125
+ }
126
+ }
127
+ @-webkit-keyframes fabric-spinner-rotate {
128
+ 0% {
129
+ -webkit-transform: rotate(0deg);
130
+ transform: rotate(0deg);
131
+ }
132
+ 100% {
133
+ -webkit-transform: rotate(360deg);
134
+ transform: rotate(360deg);
135
+ }
136
+ }
137
+ @keyframes fabric-spinner-rotate {
138
+ 0% {
139
+ -webkit-transform: rotate(0deg);
140
+ transform: rotate(0deg);
141
+ }
142
+ 100% {
143
+ -webkit-transform: rotate(360deg);
144
+ transform: rotate(360deg);
145
+ }
146
+ }
106
147
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
107
148
  content: "\e70d";
108
149
  font-family: "e-icons";
109
150
  }
110
151
 
152
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
153
+ /* stylelint-disable declaration-no-important */
154
+ height: 20px !important;
155
+ width: 20px !important;
156
+ -webkit-transform-origin: 10px 10px 10px !important;
157
+ transform-origin: 10px 10px 10px !important;
158
+ /* stylelint-enable declaration-no-important */
159
+ }
160
+
111
161
  .e-multicolumn-grid tr.e-groupcaptionrow {
112
162
  position: sticky;
113
163
  top: 0;
@@ -148,6 +198,14 @@
148
198
  border-radius: 0 0 4px 4px;
149
199
  }
150
200
 
201
+ .e-multicolumn-list .e-multicolumn-list-hidden {
202
+ border: 0;
203
+ height: 0;
204
+ padding: 0;
205
+ visibility: hidden;
206
+ width: 0;
207
+ }
208
+
151
209
  .e-multicolumn-grid.e-grid {
152
210
  border-width: 1px;
153
211
  border-radius: 4px;
@@ -229,7 +287,8 @@
229
287
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
230
288
  }
231
289
 
232
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
290
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
291
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
233
292
  position: relative;
234
293
  }
235
294
 
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/material3-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/material3-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/material3-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/material3-definition.scss';
8
9
  @import 'multicolumn-combobox/material3-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/material3.scss';
10
11
  @import 'multicolumn-combobox/all.scss';
@@ -103,11 +103,61 @@
103
103
  padding: 4px 8px;
104
104
  }
105
105
 
106
+ /* stylelint-disable property-no-vendor-prefix */
107
+ @-webkit-keyframes material-spinner-rotate {
108
+ 0% {
109
+ -webkit-transform: rotate(0deg);
110
+ transform: rotate(0deg);
111
+ }
112
+ 100% {
113
+ -webkit-transform: rotate(360deg);
114
+ transform: rotate(360deg);
115
+ }
116
+ }
117
+ @keyframes material-spinner-rotate {
118
+ 0% {
119
+ -webkit-transform: rotate(0deg);
120
+ transform: rotate(0deg);
121
+ }
122
+ 100% {
123
+ -webkit-transform: rotate(360deg);
124
+ transform: rotate(360deg);
125
+ }
126
+ }
127
+ @-webkit-keyframes fabric-spinner-rotate {
128
+ 0% {
129
+ -webkit-transform: rotate(0deg);
130
+ transform: rotate(0deg);
131
+ }
132
+ 100% {
133
+ -webkit-transform: rotate(360deg);
134
+ transform: rotate(360deg);
135
+ }
136
+ }
137
+ @keyframes fabric-spinner-rotate {
138
+ 0% {
139
+ -webkit-transform: rotate(0deg);
140
+ transform: rotate(0deg);
141
+ }
142
+ 100% {
143
+ -webkit-transform: rotate(360deg);
144
+ transform: rotate(360deg);
145
+ }
146
+ }
106
147
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
107
148
  content: "\e70d";
108
149
  font-family: "e-icons";
109
150
  }
110
151
 
152
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
153
+ /* stylelint-disable declaration-no-important */
154
+ height: 20px !important;
155
+ width: 20px !important;
156
+ -webkit-transform-origin: 10px 10px 10px !important;
157
+ transform-origin: 10px 10px 10px !important;
158
+ /* stylelint-enable declaration-no-important */
159
+ }
160
+
111
161
  .e-multicolumn-grid tr.e-groupcaptionrow {
112
162
  position: sticky;
113
163
  top: 0;
@@ -148,6 +198,14 @@
148
198
  border-radius: 0 0 4px 4px;
149
199
  }
150
200
 
201
+ .e-multicolumn-list .e-multicolumn-list-hidden {
202
+ border: 0;
203
+ height: 0;
204
+ padding: 0;
205
+ visibility: hidden;
206
+ width: 0;
207
+ }
208
+
151
209
  .e-multicolumn-grid.e-grid {
152
210
  border-width: 1px;
153
211
  border-radius: 4px;
@@ -229,7 +287,8 @@
229
287
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
230
288
  }
231
289
 
232
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
290
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
291
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
233
292
  position: relative;
234
293
  }
235
294
 
@@ -327,6 +386,16 @@
327
386
  margin-top: 1px;
328
387
  }
329
388
 
389
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
390
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
391
+ /* stylelint-disable declaration-no-important */
392
+ height: 26px !important;
393
+ width: 26px !important;
394
+ -webkit-transform-origin: 13px 13px 13px !important;
395
+ transform-origin: 13px 13px 13px !important;
396
+ /* stylelint-enable declaration-no-important */
397
+ }
398
+
330
399
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
331
400
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
332
401
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
@@ -7,6 +7,7 @@
7
7
  @import 'ej2-dropdowns/styles/drop-down-list/material3-definition.scss';
8
8
  @import 'ej2-dropdowns/styles/combo-box/material3-definition.scss';
9
9
  @import 'ej2-grids/styles/grid/material3-definition.scss';
10
+ @import 'ej2-popups/styles/spinner/material3-definition.scss';
10
11
  @import 'multicolumn-combobox/material3-definition.scss';
11
12
  @import 'multicolumn-combobox/icons/material3.scss';
12
13
  @import 'multicolumn-combobox/all.scss';
@@ -18,6 +18,15 @@
18
18
  @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-value);
19
19
  }
20
20
 
21
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
22
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
23
+ /* stylelint-disable declaration-no-important */
24
+ height: 26px !important;
25
+ width: 26px !important;
26
+ transform-origin: 13px 13px 13px !important;
27
+ /* stylelint-enable declaration-no-important */
28
+ }
29
+
21
30
  .e-bigger.e-small.e-popup,
22
31
  .e-bigger.e-small .e-popup,
23
32
  .e-bigger .e-small.e-popup,
@@ -5,6 +5,13 @@
5
5
  }
6
6
 
7
7
  @include export-module('multicolumn-combobox-layout') {
8
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
9
+ /* stylelint-disable declaration-no-important */
10
+ height: 20px !important;
11
+ width: 20px !important;
12
+ transform-origin: 10px 10px 10px !important;
13
+ /* stylelint-enable declaration-no-important */
14
+ }
8
15
  .e-multicolumn-grid tr.e-groupcaptionrow {
9
16
  position: sticky;
10
17
  top: 0;
@@ -45,6 +52,13 @@
45
52
  align-items: center;
46
53
  border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
47
54
  }
55
+ .e-multicolumn-list .e-multicolumn-list-hidden {
56
+ border: 0;
57
+ height: 0;
58
+ padding: 0;
59
+ visibility: hidden;
60
+ width: 0;
61
+ }
48
62
  .e-multicolumn-grid.e-grid {
49
63
  border-width: $grid-border-width;
50
64
  border-radius: $multicolumn-popup-border-radius;
@@ -121,7 +135,8 @@
121
135
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
122
136
  }
123
137
 
124
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
138
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
139
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
125
140
  position: relative;
126
141
  }
127
142
 
@@ -210,11 +210,61 @@
210
210
  min-width: 300px !important;
211
211
  }
212
212
 
213
+ /* stylelint-disable property-no-vendor-prefix */
214
+ @-webkit-keyframes material-spinner-rotate {
215
+ 0% {
216
+ -webkit-transform: rotate(0);
217
+ transform: rotate(0);
218
+ }
219
+ 100% {
220
+ -webkit-transform: rotate(360deg);
221
+ transform: rotate(360deg);
222
+ }
223
+ }
224
+ @keyframes material-spinner-rotate {
225
+ 0% {
226
+ -webkit-transform: rotate(0);
227
+ transform: rotate(0);
228
+ }
229
+ 100% {
230
+ -webkit-transform: rotate(360deg);
231
+ transform: rotate(360deg);
232
+ }
233
+ }
234
+ @-webkit-keyframes fabric-spinner-rotate {
235
+ 0% {
236
+ -webkit-transform: rotate(0);
237
+ transform: rotate(0);
238
+ }
239
+ 100% {
240
+ -webkit-transform: rotate(360deg);
241
+ transform: rotate(360deg);
242
+ }
243
+ }
244
+ @keyframes fabric-spinner-rotate {
245
+ 0% {
246
+ -webkit-transform: rotate(0);
247
+ transform: rotate(0);
248
+ }
249
+ 100% {
250
+ -webkit-transform: rotate(360deg);
251
+ transform: rotate(360deg);
252
+ }
253
+ }
213
254
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
214
255
  content: "\e729";
215
256
  font-family: "e-icons";
216
257
  }
217
258
 
259
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
260
+ /* stylelint-disable declaration-no-important */
261
+ height: 20px !important;
262
+ width: 20px !important;
263
+ -webkit-transform-origin: 10px 10px 10px !important;
264
+ transform-origin: 10px 10px 10px !important;
265
+ /* stylelint-enable declaration-no-important */
266
+ }
267
+
218
268
  .e-multicolumn-grid tr.e-groupcaptionrow {
219
269
  position: sticky;
220
270
  top: 0;
@@ -255,6 +305,14 @@
255
305
  border-radius: 0 0 4px 4px;
256
306
  }
257
307
 
308
+ .e-multicolumn-list .e-multicolumn-list-hidden {
309
+ border: 0;
310
+ height: 0;
311
+ padding: 0;
312
+ visibility: hidden;
313
+ width: 0;
314
+ }
315
+
258
316
  .e-multicolumn-grid.e-grid {
259
317
  border-width: 0;
260
318
  border-radius: 4px;
@@ -336,7 +394,8 @@
336
394
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
337
395
  }
338
396
 
339
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
397
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
398
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
340
399
  position: relative;
341
400
  }
342
401
 
@@ -432,6 +491,16 @@
432
491
  margin-top: 2px;
433
492
  }
434
493
 
494
+ .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
495
+ .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
496
+ /* stylelint-disable declaration-no-important */
497
+ height: 26px !important;
498
+ width: 26px !important;
499
+ -webkit-transform-origin: 13px 13px 13px !important;
500
+ transform-origin: 13px 13px 13px !important;
501
+ /* stylelint-enable declaration-no-important */
502
+ }
503
+
435
504
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
436
505
  .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
437
506
  .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/bds-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/bds-definition.scss';
8
9
  @import 'bds-definition.scss';
9
10
  @import 'icons/bds.scss';
10
11
  @import 'all.scss';