@syncfusion/ej2-multicolumn-combobox 26.2.12 → 27.1.50

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 (149) hide show
  1. package/.eslintrc.json +261 -0
  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 +94 -43
  5. package/dist/es6/ej2-multicolumn-combobox.es2015.js.map +1 -1
  6. package/dist/es6/ej2-multicolumn-combobox.es5.js +94 -40
  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/package.json +8 -8
  12. package/src/multicolumn-combobox/multi-column-combo-box-model.d.ts +1 -1
  13. package/src/multicolumn-combobox/multi-column-combo-box.d.ts +4 -2
  14. package/src/multicolumn-combobox/multi-column-combo-box.js +94 -41
  15. package/styles/bootstrap-dark-lite.css +267 -0
  16. package/styles/bootstrap-dark-lite.scss +10 -0
  17. package/styles/bootstrap-dark.css +77 -108
  18. package/styles/bootstrap-dark.scss +1 -0
  19. package/styles/bootstrap-lite.css +267 -0
  20. package/styles/bootstrap-lite.scss +10 -0
  21. package/styles/bootstrap.css +77 -108
  22. package/styles/bootstrap.scss +1 -0
  23. package/styles/bootstrap4-lite.css +309 -0
  24. package/styles/bootstrap4-lite.scss +10 -0
  25. package/styles/bootstrap4.css +78 -131
  26. package/styles/bootstrap4.scss +1 -0
  27. package/styles/bootstrap5-dark-lite.css +317 -0
  28. package/styles/bootstrap5-dark-lite.scss +10 -0
  29. package/styles/bootstrap5-dark.css +78 -127
  30. package/styles/bootstrap5-dark.scss +1 -0
  31. package/styles/bootstrap5-lite.css +317 -0
  32. package/styles/bootstrap5-lite.scss +10 -0
  33. package/styles/bootstrap5.3-lite.css +321 -0
  34. package/styles/bootstrap5.3-lite.scss +10 -0
  35. package/styles/bootstrap5.3.css +372 -0
  36. package/styles/bootstrap5.3.scss +11 -0
  37. package/styles/bootstrap5.css +78 -127
  38. package/styles/bootstrap5.scss +1 -0
  39. package/styles/fabric-dark-lite.css +243 -0
  40. package/styles/fabric-dark-lite.scss +10 -0
  41. package/styles/fabric-dark.css +78 -108
  42. package/styles/fabric-dark.scss +1 -0
  43. package/styles/fabric-lite.css +243 -0
  44. package/styles/fabric-lite.scss +10 -0
  45. package/styles/fabric.css +78 -101
  46. package/styles/fabric.scss +1 -0
  47. package/styles/fluent-dark-lite.css +310 -0
  48. package/styles/fluent-dark-lite.scss +10 -0
  49. package/styles/fluent-dark.css +78 -114
  50. package/styles/fluent-dark.scss +1 -0
  51. package/styles/fluent-lite.css +310 -0
  52. package/styles/fluent-lite.scss +10 -0
  53. package/styles/fluent.css +78 -114
  54. package/styles/fluent.scss +1 -0
  55. package/styles/fluent2-lite.css +314 -0
  56. package/styles/fluent2-lite.scss +10 -0
  57. package/styles/fluent2.css +78 -111
  58. package/styles/fluent2.scss +1 -0
  59. package/styles/highcontrast-light-lite.css +264 -0
  60. package/styles/highcontrast-light-lite.scss +10 -0
  61. package/styles/highcontrast-light.css +78 -98
  62. package/styles/highcontrast-light.scss +1 -0
  63. package/styles/highcontrast-lite.css +268 -0
  64. package/styles/highcontrast-lite.scss +10 -0
  65. package/styles/highcontrast.css +82 -98
  66. package/styles/highcontrast.scss +1 -0
  67. package/styles/material-dark-lite.css +292 -0
  68. package/styles/material-dark-lite.scss +10 -0
  69. package/styles/material-dark.css +78 -92
  70. package/styles/material-dark.scss +1 -0
  71. package/styles/material-lite.css +296 -0
  72. package/styles/material-lite.scss +10 -0
  73. package/styles/material.css +78 -113
  74. package/styles/material.scss +1 -0
  75. package/styles/material3-dark-lite.css +306 -0
  76. package/styles/material3-dark-lite.scss +10 -0
  77. package/styles/material3-dark.css +77 -116
  78. package/styles/material3-dark.scss +1 -0
  79. package/styles/material3-lite.css +308 -0
  80. package/styles/material3-lite.scss +10 -0
  81. package/styles/material3.css +77 -116
  82. package/styles/material3.scss +1 -0
  83. package/styles/multicolumn-combobox/_bds-definition.scss +1 -0
  84. package/styles/multicolumn-combobox/_bigger.scss +37 -0
  85. package/styles/multicolumn-combobox/_bootstrap-dark-definition.scss +1 -0
  86. package/styles/multicolumn-combobox/_bootstrap-definition.scss +1 -0
  87. package/styles/multicolumn-combobox/_bootstrap4-definition.scss +1 -0
  88. package/styles/multicolumn-combobox/_bootstrap5-definition.scss +1 -0
  89. package/styles/multicolumn-combobox/_bootstrap5.3-definition.scss +15 -14
  90. package/styles/multicolumn-combobox/_fabric-dark-definition.scss +1 -0
  91. package/styles/multicolumn-combobox/_fabric-definition.scss +1 -0
  92. package/styles/multicolumn-combobox/_fluent-definition.scss +1 -0
  93. package/styles/multicolumn-combobox/_fluent2-definition.scss +1 -0
  94. package/styles/multicolumn-combobox/_fusionnew-definition.scss +1 -0
  95. package/styles/multicolumn-combobox/_highcontrast-definition.scss +1 -0
  96. package/styles/multicolumn-combobox/_highcontrast-light-definition.scss +1 -0
  97. package/styles/multicolumn-combobox/_layout.scss +34 -33
  98. package/styles/multicolumn-combobox/_material-dark-definition.scss +1 -0
  99. package/styles/multicolumn-combobox/_material-definition.scss +1 -0
  100. package/styles/multicolumn-combobox/_material3-definition.scss +1 -0
  101. package/styles/multicolumn-combobox/_tailwind-definition.scss +1 -0
  102. package/styles/multicolumn-combobox/_theme.scss +3 -0
  103. package/styles/multicolumn-combobox/bootstrap-dark.css +77 -108
  104. package/styles/multicolumn-combobox/bootstrap-dark.scss +1 -0
  105. package/styles/multicolumn-combobox/bootstrap.css +77 -108
  106. package/styles/multicolumn-combobox/bootstrap.scss +1 -0
  107. package/styles/multicolumn-combobox/bootstrap4.css +78 -131
  108. package/styles/multicolumn-combobox/bootstrap4.scss +1 -0
  109. package/styles/multicolumn-combobox/bootstrap5-dark.css +78 -127
  110. package/styles/multicolumn-combobox/bootstrap5-dark.scss +1 -0
  111. package/styles/multicolumn-combobox/bootstrap5.3.css +372 -0
  112. package/styles/multicolumn-combobox/bootstrap5.3.scss +11 -0
  113. package/styles/multicolumn-combobox/bootstrap5.css +78 -127
  114. package/styles/multicolumn-combobox/bootstrap5.scss +1 -0
  115. package/styles/multicolumn-combobox/fabric-dark.css +78 -108
  116. package/styles/multicolumn-combobox/fabric-dark.scss +1 -0
  117. package/styles/multicolumn-combobox/fabric.css +78 -101
  118. package/styles/multicolumn-combobox/fabric.scss +1 -0
  119. package/styles/multicolumn-combobox/fluent-dark.css +78 -114
  120. package/styles/multicolumn-combobox/fluent-dark.scss +1 -0
  121. package/styles/multicolumn-combobox/fluent.css +78 -114
  122. package/styles/multicolumn-combobox/fluent.scss +1 -0
  123. package/styles/multicolumn-combobox/fluent2.css +78 -111
  124. package/styles/multicolumn-combobox/fluent2.scss +1 -0
  125. package/styles/multicolumn-combobox/highcontrast-light.css +78 -98
  126. package/styles/multicolumn-combobox/highcontrast-light.scss +1 -0
  127. package/styles/multicolumn-combobox/highcontrast.css +82 -98
  128. package/styles/multicolumn-combobox/highcontrast.scss +1 -0
  129. package/styles/multicolumn-combobox/material-dark.css +78 -92
  130. package/styles/multicolumn-combobox/material-dark.scss +1 -0
  131. package/styles/multicolumn-combobox/material.css +78 -113
  132. package/styles/multicolumn-combobox/material.scss +1 -0
  133. package/styles/multicolumn-combobox/material3-dark.css +77 -116
  134. package/styles/multicolumn-combobox/material3-dark.scss +1 -0
  135. package/styles/multicolumn-combobox/material3.css +77 -116
  136. package/styles/multicolumn-combobox/material3.scss +1 -0
  137. package/styles/multicolumn-combobox/tailwind-dark.css +78 -111
  138. package/styles/multicolumn-combobox/tailwind-dark.scss +1 -0
  139. package/styles/multicolumn-combobox/tailwind.css +78 -111
  140. package/styles/multicolumn-combobox/tailwind.scss +1 -0
  141. package/styles/tailwind-dark-lite.css +297 -0
  142. package/styles/tailwind-dark-lite.scss +10 -0
  143. package/styles/tailwind-dark.css +78 -111
  144. package/styles/tailwind-dark.scss +1 -0
  145. package/styles/tailwind-lite.css +297 -0
  146. package/styles/tailwind-lite.scss +10 -0
  147. package/styles/tailwind.css +78 -111
  148. package/styles/tailwind.scss +1 -0
  149. package/tslint.json +111 -0
@@ -10,10 +10,6 @@
10
10
  padding: 0 12px 0 0;
11
11
  }
12
12
 
13
- .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
14
- padding: 0 16px 0 0;
15
- }
16
-
17
13
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
18
14
  -webkit-transform: rotate(0deg);
19
15
  transform: rotate(0deg);
@@ -62,52 +58,18 @@
62
58
  border-radius: 4px;
63
59
  }
64
60
 
65
- .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
66
- border-color: rgba(var(--color-sf-primary));
67
- }
68
-
69
- .e-bigger .e-popup.e-ddl-device-filter {
70
- margin-top: 0;
71
- }
72
-
73
- .e-bigger .e-ddl-device .e-input-group,
74
- .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
75
- background: rgba(0, 0, 0, 0.0001);
76
- border-width: 0;
77
- -webkit-box-shadow: none;
78
- box-shadow: none;
79
- margin-bottom: 0;
80
- }
81
-
82
- .e-bigger .e-ddl-device .e-input-group .e-back-icon,
83
- .e-bigger .e-ddl-device .e-input-group input.e-input,
84
- .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
85
- background: rgba(0, 0, 0, 0.0001);
86
- }
87
-
88
61
  .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
89
62
  margin: 0 6px;
90
63
  min-height: 30px;
91
64
  min-width: 30px;
92
65
  }
93
66
 
94
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
95
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
96
- min-height: 38px;
97
- min-width: 38px;
98
- }
99
-
100
67
  .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
101
68
  .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
102
69
  min-height: 22px;
103
70
  min-width: 22px;
104
71
  }
105
72
 
106
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
107
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
108
- padding: 4px 16px 4px 0;
109
- }
110
-
111
73
  .e-input-group.e-ddl,
112
74
  .e-input-group.e-ddl .e-input,
113
75
  .e-input-group.e-ddl .e-ddl-icon {
@@ -137,31 +99,6 @@
137
99
  padding: 4px 5px 4px 12px;
138
100
  }
139
101
 
140
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
141
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
142
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
143
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
144
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
145
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
146
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
147
- min-height: 34px;
148
- min-width: 34px;
149
- }
150
-
151
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
152
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
153
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
154
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
155
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
156
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
157
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
158
- padding: 8px 16px;
159
- }
160
-
161
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
162
- margin: 0 4px;
163
- }
164
-
165
102
  .e-ddl.e-popup.e-outline .e-filter-parent {
166
103
  padding: 4px 8px;
167
104
  }
@@ -177,6 +114,7 @@
177
114
  }
178
115
 
179
116
  .e-multicolumn-grid th.e-grouptopleftcell.e-lastgrouptopleftcell,
117
+ .e-multicolumn-grid th.e-grouptopleftcell.e-lastgroupleftcell,
180
118
  .e-multicolumn-grid td.e-recordplusexpand,
181
119
  .e-multicolumn-grid td.e-indentcell,
182
120
  .e-multicolumn-grid col.e-group-intent,
@@ -184,6 +122,10 @@
184
122
  display: none;
185
123
  }
186
124
 
125
+ .e-multicolumn-grid td.e-rowcell {
126
+ cursor: default;
127
+ }
128
+
187
129
  .e-multicolumn-grid .e-gridheader .e-headercelldiv {
188
130
  overflow: hidden;
189
131
  }
@@ -200,16 +142,27 @@
200
142
  -webkit-box-align: center;
201
143
  -ms-flex-align: center;
202
144
  align-items: center;
145
+ border-radius: 0 0 4px 4px;
203
146
  }
204
147
 
205
148
  .e-multicolumn-grid.e-grid {
206
149
  border-width: 1px;
150
+ border-radius: 4px;
151
+ }
152
+ .e-multicolumn-grid.e-grid .e-gridcontent {
153
+ border-radius: 0 0 4px 4px;
207
154
  }
208
155
 
209
156
  .e-input-group.e-multicolumn-list input[readonly].e-input {
210
157
  pointer-events: none;
211
158
  }
212
159
 
160
+ .e-multicolumn-list:has(.e-popup-footer) .e-multicolumn-grid.e-grid {
161
+ border-radius: 4px 4px 0 0;
162
+ }
163
+ .e-multicolumn-list:has(.e-popup-footer) .e-multicolumn-grid.e-grid .e-gridcontent {
164
+ border-radius: 0;
165
+ }
213
166
  .e-multicolumn-list.e-icon-anim .e-multicolumn-list-icon::before {
214
167
  -webkit-transform: rotate(180deg);
215
168
  transform: rotate(180deg);
@@ -258,20 +211,25 @@
258
211
  position: sticky;
259
212
  top: 0;
260
213
  z-index: 1;
214
+ border-radius: 4px 4px 0 0;
261
215
  }
262
216
 
263
217
  .e-multicolumn-grid .e-headercontent {
264
- border-right-width: inherit !important; /* stylelint-disable-line declaration-no-important */
218
+ border-right-color: transparent; /* stylelint-disable-line declaration-no-important */
265
219
  }
266
220
 
267
221
  .e-multicolumn-grid.e-rtl .e-headercontent {
268
- border-left-width: inherit !important; /* stylelint-disable-line declaration-no-important */
222
+ border-left-color: transparent; /* stylelint-disable-line declaration-no-important */
269
223
  }
270
224
 
271
225
  .e-multicolumn-grid .e-content {
272
226
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
273
227
  }
274
228
 
229
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
230
+ position: relative;
231
+ }
232
+
275
233
  .e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
276
234
  .e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-small.e-popup.e-multicolumn-list .e-popup-footer,
277
235
  .e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
@@ -292,57 +250,6 @@
292
250
  margin-top: 1px;
293
251
  }
294
252
 
295
- .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
296
- .e-bigger .e-popup.e-multicolumn-list .e-popup-footer {
297
- font-size: 16px;
298
- }
299
- .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
300
- .e-bigger.e-popup .e-multicolumn-grid .e-row,
301
- .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow,
302
- .e-bigger .e-popup.e-multicolumn-list .e-popup-footer,
303
- .e-bigger .e-popup .e-multicolumn-grid .e-row,
304
- .e-bigger .e-popup .e-multicolumn-grid .e-emptyrow {
305
- height: 40px;
306
- }
307
- .e-bigger.e-popup.e-multicolumn-list,
308
- .e-bigger .e-popup.e-multicolumn-list {
309
- margin-top: 1px;
310
- }
311
-
312
- .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
313
- .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
314
- .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
315
- .e-bigger.e-small .e-popup .e-multicolumn-grid .e-rowcell,
316
- .e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
317
- .e-bigger .e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
318
- .e-bigger .e-small.e-popup .e-multicolumn-grid .e-rowcell,
319
- .e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
320
- .e-small .e-bigger.e-popup .e-multicolumn-grid .e-headercelldiv,
321
- .e-small .e-bigger.e-popup .e-multicolumn-grid .e-rowcell,
322
- .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer {
323
- font-size: 14px;
324
- }
325
- .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
326
- .e-bigger.e-small.e-popup .e-multicolumn-grid .e-row,
327
- .e-bigger.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
328
- .e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
329
- .e-bigger.e-small .e-popup .e-multicolumn-grid .e-row,
330
- .e-bigger.e-small .e-popup .e-multicolumn-grid .e-emptyrow,
331
- .e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
332
- .e-bigger .e-small.e-popup .e-multicolumn-grid .e-row,
333
- .e-bigger .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
334
- .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
335
- .e-small .e-bigger.e-popup .e-multicolumn-grid .e-row,
336
- .e-small .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow {
337
- height: 36px;
338
- }
339
- .e-bigger.e-small.e-popup.e-multicolumn-list,
340
- .e-bigger.e-small .e-popup.e-multicolumn-list,
341
- .e-bigger .e-small.e-popup.e-multicolumn-list,
342
- .e-small .e-bigger.e-popup.e-multicolumn-list {
343
- margin-top: 1px;
344
- }
345
-
346
253
  .e-multicolumn-list .e-popup-footer {
347
254
  background: rgba(var(--color-sf-surface));
348
255
  color: var(--color-sf-on-surface-variant);
@@ -391,8 +298,62 @@
391
298
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
392
299
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
393
300
  }
301
+ .e-popup.e-multicolumn-list .e-grid .e-headercell {
302
+ background-color: unset;
303
+ }
394
304
  .e-popup.e-multicolumn-list .e-headertext,
395
305
  .e-popup.e-multicolumn-list .e-grid th.e-headercell[aria-sort=ascending] .e-headertext,
396
306
  .e-popup.e-multicolumn-list .e-grid th.e-headercell[aria-sort=descending] .e-headertext {
397
307
  color: var(--color-sf-on-surface-variant);
308
+ }
309
+
310
+ .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
311
+ .e-bigger .e-popup.e-multicolumn-list .e-popup-footer {
312
+ font-size: 16px;
313
+ }
314
+ .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
315
+ .e-bigger.e-popup .e-multicolumn-grid .e-row,
316
+ .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow,
317
+ .e-bigger .e-popup.e-multicolumn-list .e-popup-footer,
318
+ .e-bigger .e-popup .e-multicolumn-grid .e-row,
319
+ .e-bigger .e-popup .e-multicolumn-grid .e-emptyrow {
320
+ height: 40px;
321
+ }
322
+ .e-bigger.e-popup.e-multicolumn-list,
323
+ .e-bigger .e-popup.e-multicolumn-list {
324
+ margin-top: 1px;
325
+ }
326
+
327
+ .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
328
+ .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
329
+ .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
330
+ .e-bigger.e-small .e-popup .e-multicolumn-grid .e-rowcell,
331
+ .e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
332
+ .e-bigger .e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
333
+ .e-bigger .e-small.e-popup .e-multicolumn-grid .e-rowcell,
334
+ .e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
335
+ .e-small .e-bigger.e-popup .e-multicolumn-grid .e-headercelldiv,
336
+ .e-small .e-bigger.e-popup .e-multicolumn-grid .e-rowcell,
337
+ .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer {
338
+ font-size: 14px;
339
+ }
340
+ .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
341
+ .e-bigger.e-small.e-popup .e-multicolumn-grid .e-row,
342
+ .e-bigger.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
343
+ .e-bigger.e-small .e-popup.e-multicolumn-list .e-popup-footer,
344
+ .e-bigger.e-small .e-popup .e-multicolumn-grid .e-row,
345
+ .e-bigger.e-small .e-popup .e-multicolumn-grid .e-emptyrow,
346
+ .e-bigger .e-small.e-popup.e-multicolumn-list .e-popup-footer,
347
+ .e-bigger .e-small.e-popup .e-multicolumn-grid .e-row,
348
+ .e-bigger .e-small.e-popup .e-multicolumn-grid .e-emptyrow,
349
+ .e-small .e-bigger.e-popup.e-multicolumn-list .e-popup-footer,
350
+ .e-small .e-bigger.e-popup .e-multicolumn-grid .e-row,
351
+ .e-small .e-bigger.e-popup .e-multicolumn-grid .e-emptyrow {
352
+ height: 36px;
353
+ }
354
+ .e-bigger.e-small.e-popup.e-multicolumn-list,
355
+ .e-bigger.e-small .e-popup.e-multicolumn-list,
356
+ .e-bigger .e-small.e-popup.e-multicolumn-list,
357
+ .e-small .e-bigger.e-popup.e-multicolumn-list {
358
+ margin-top: 1px;
398
359
  }
@@ -10,3 +10,4 @@
10
10
  @import 'multicolumn-combobox/material3-definition.scss';
11
11
  @import 'multicolumn-combobox/icons/material3.scss';
12
12
  @import 'multicolumn-combobox/all.scss';
13
+ @import 'multicolumn-combobox/bigger.scss';
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 30px !default;
3
3
  $multicolumn-margin-top-value: 2px !default;
4
4
  $footer-border-width: 0 0 0 0 !default;
5
5
  $grid-border-width: 0 !default;
6
+ $multicolumn-popup-border-radius: 4px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 24px !default;
8
9
  $multicolumn-margin-top-small-value: 2px !default;
@@ -0,0 +1,37 @@
1
+ @mixin multicolumn-combobox-styles($margin-top-value) {
2
+ &.e-multicolumn-list {
3
+ margin-top: $margin-top-value;
4
+ }
5
+ }
6
+
7
+ @include export-module('multicolumn-combobox-bigger') {
8
+ .e-bigger.e-popup,
9
+ .e-bigger .e-popup {
10
+ &.e-multicolumn-list .e-popup-footer {
11
+ font-size: 16px;
12
+ }
13
+ &.e-multicolumn-list .e-popup-footer,
14
+ .e-multicolumn-grid .e-row,
15
+ .e-multicolumn-grid .e-emptyrow {
16
+ height: $multicolumn-grid-bigger-height;
17
+ }
18
+ @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-value);
19
+ }
20
+
21
+ .e-bigger.e-small.e-popup,
22
+ .e-bigger.e-small .e-popup,
23
+ .e-bigger .e-small.e-popup,
24
+ .e-small .e-bigger.e-popup {
25
+ .e-multicolumn-grid .e-headercelldiv,
26
+ .e-multicolumn-grid .e-rowcell,
27
+ &.e-multicolumn-list .e-popup-footer {
28
+ font-size: 14px;
29
+ }
30
+ &.e-multicolumn-list .e-popup-footer,
31
+ .e-multicolumn-grid .e-row,
32
+ .e-multicolumn-grid .e-emptyrow {
33
+ height: $multicolumn-grid-bigger-small-height;
34
+ }
35
+ @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-small-value);
36
+ }
37
+ }
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 0 1px 0 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 4px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 1px 0 0 0 !default;
5
5
  $grid-border-width: 0 !default;
6
+ $multicolumn-popup-border-radius: 4px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 26px !default;
3
3
  $multicolumn-margin-top-value: 2px !default;
4
4
  $footer-border-width: 1px 0 0 0 !default;
5
5
  $grid-border-width: 0 !default;
6
+ $multicolumn-popup-border-radius: 2px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 24px !default;
8
9
  $multicolumn-margin-top-small-value: 3px !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 30px !default;
3
3
  $multicolumn-margin-top-value: 3px !default;
4
4
  $footer-border-width: 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 2px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 26px !default;
8
9
  $multicolumn-margin-top-small-value: 3px !default;
@@ -1,31 +1,32 @@
1
1
  $header-font-weight: 700 !default;
2
2
  $multicolumn-grid-height: 30px !default;
3
- $multicolumn-margin-top-value: 3px !default;
3
+ $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 4px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 26px !default;
8
- $multicolumn-margin-top-small-value: 3px !default;
9
+ $multicolumn-margin-top-small-value: unset !default;
9
10
 
10
11
  $multicolumn-grid-bigger-height: 32px !default;
11
- $multicolumn-margin-top-bigger-value: 4px !default;
12
+ $multicolumn-margin-top-bigger-value: unset !default;
12
13
 
13
14
  $multicolumn-grid-bigger-small-height: 30px !default;
14
- $multicolumn-margin-top-bigger-small-value: 4px !default;
15
+ $multicolumn-margin-top-bigger-small-value: unset !default;
15
16
 
16
- $footer-border-color: $border-light !default;
17
- $popup-text-color: $content-text-color !default;
18
- $grid-content-color: $content-text-color-alt1 !default;
17
+ $footer-border-color: $flyout-border !default;
18
+ $popup-text-color: $flyout-text-color !default;
19
+ $grid-content-color: $flyout-text-color !default;
19
20
  $grid-content-hover-bg-color: $flyout-bg-color-hover !default;
20
21
  $grid-content-active-bg-color: $flyout-bg-color-pressed !default;
21
22
  $grid-content-active-color: $flyout-text-color-pressed !default;
22
- $grid-footer-bg-color: $content-bg-color !default;
23
- $grid-footer-color: $content-text-color-alt3 !default;
24
- $grid-group-content-header-color: $content-text-color-alt3 !default;
25
- $grid-group-content-header-bg-color: $content-bg-color !default;
23
+ $grid-footer-bg-color: $flyout-bg-color !default;
24
+ $grid-footer-color: $content-text-color-alt2 !default;
25
+ $grid-group-content-header-color: $content-text-color-alt2 !default;
26
+ $grid-group-content-header-bg-color: $flyout-bg-color !default;
26
27
  $grid-header-content-bg-color: $transparent !default;
27
- $grid-header-content-color: $content-text-color !default;
28
+ $grid-header-content-color: $flyout-text-color !default;
28
29
  $altrow-bg-color: $content-bg-color-alt1 !default;
29
30
  $popup-box-shadow: none !default;
30
- $nodata-bg-color: $content-bg-color !default;
31
- $nodata-border-color: $border-light !default;
31
+ $nodata-bg-color: $flyout-bg-color !default;
32
+ $nodata-border-color: $flyout-border !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 0 0 0 0 !default;
5
5
  $grid-border-width: 0 !default;
6
+ $multicolumn-popup-border-radius: 0 !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 1px 0 0 0 !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 0 !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 32px !default;
3
3
  $multicolumn-margin-top-value: 2px !default;
4
4
  $footer-border-width: 0 1px 0 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 2px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 26px !default;
8
9
  $multicolumn-margin-top-small-value: 2px !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 32px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 0 1px 0 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 4px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 32px !default;
3
3
  $multicolumn-margin-top-value: 2px !default;
4
4
  $footer-border-width: 1px 0 0 0 !default;
5
5
  $grid-border-width: 0 !default;
6
+ $multicolumn-popup-border-radius: 2px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 26px !default;
8
9
  $multicolumn-margin-top-small-value: 2px !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 0 !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: unset !default;
4
4
  $footer-border-width: 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 0 !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 32px !default;
8
9
  $multicolumn-margin-top-small-value: unset !default;
@@ -10,12 +10,25 @@
10
10
  top: 0;
11
11
  }
12
12
  .e-multicolumn-grid th.e-grouptopleftcell.e-lastgrouptopleftcell,
13
+ .e-multicolumn-grid th.e-grouptopleftcell.e-lastgroupleftcell,
13
14
  .e-multicolumn-grid td.e-recordplusexpand,
14
15
  .e-multicolumn-grid td.e-indentcell,
15
16
  .e-multicolumn-grid col.e-group-intent,
16
17
  .e-multicolumn-list .e-no-records + .e-grid {
17
18
  display: none;
18
19
  }
20
+ .e-multicolumn-grid td.e-rowcell{
21
+ cursor: default;
22
+ }
23
+
24
+ .e-multicolumn-grid.e-rtl .e-gridheader {
25
+ @if ($skin-name == 'highcontrast') {
26
+ .e-headercelldiv {
27
+ margin: 0;
28
+ }
29
+ }
30
+ }
31
+
19
32
  .e-multicolumn-grid .e-gridheader .e-headercelldiv {
20
33
  overflow: hidden;
21
34
  }
@@ -27,9 +40,14 @@
27
40
  height: $multicolumn-grid-height;
28
41
  display: flex;
29
42
  align-items: center;
43
+ border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
30
44
  }
31
45
  .e-multicolumn-grid.e-grid {
32
46
  border-width: $grid-border-width;
47
+ border-radius: $multicolumn-popup-border-radius;
48
+ .e-gridcontent {
49
+ border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
50
+ }
33
51
  }
34
52
  .e-input-group.e-multicolumn-list {
35
53
  input[readonly].e-input {
@@ -37,6 +55,14 @@
37
55
  }
38
56
  }
39
57
  .e-multicolumn-list {
58
+ &:has(.e-popup-footer) {
59
+ .e-multicolumn-grid.e-grid {
60
+ border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius 0 0;
61
+ .e-gridcontent {
62
+ border-radius: 0;
63
+ }
64
+ }
65
+ }
40
66
  &.e-icon-anim .e-multicolumn-list-icon::before {
41
67
  transform: rotate(180deg);
42
68
  }
@@ -59,7 +85,7 @@
59
85
  }
60
86
  .e-popup.e-multicolumn-list {
61
87
  position: absolute;
62
- border-radius: 4px;
88
+ border-radius: $multicolumn-popup-border-radius;
63
89
  margin-top: $multicolumn-margin-top-value;
64
90
  .e-nodata {
65
91
  cursor: default;
@@ -76,21 +102,26 @@
76
102
  position: sticky;
77
103
  top: 0;
78
104
  z-index: 1;
105
+ border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius 0 0;
79
106
  }
80
107
  }
81
108
 
82
109
  .e-multicolumn-grid .e-headercontent {
83
- border-right-width: inherit !important; /* stylelint-disable-line declaration-no-important */
110
+ border-right-color: transparent; /* stylelint-disable-line declaration-no-important */
84
111
  }
85
112
 
86
113
  .e-multicolumn-grid.e-rtl .e-headercontent {
87
- border-left-width: inherit !important; /* stylelint-disable-line declaration-no-important */
114
+ border-left-color: transparent; /* stylelint-disable-line declaration-no-important */
88
115
  }
89
116
 
90
117
  .e-multicolumn-grid .e-content {
91
118
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
92
119
  }
93
120
 
121
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
122
+ position: relative;
123
+ }
124
+
94
125
  .e-small.e-popup,
95
126
  .e-small .e-popup {
96
127
  .e-multicolumn-grid .e-headercelldiv,
@@ -105,34 +136,4 @@
105
136
  }
106
137
  @include multicolumn-combobox-styles($multicolumn-margin-top-small-value);
107
138
  }
108
-
109
- .e-bigger.e-popup,
110
- .e-bigger .e-popup {
111
- &.e-multicolumn-list .e-popup-footer {
112
- font-size: 16px;
113
- }
114
- &.e-multicolumn-list .e-popup-footer,
115
- .e-multicolumn-grid .e-row,
116
- .e-multicolumn-grid .e-emptyrow {
117
- height: $multicolumn-grid-bigger-height;
118
- }
119
- @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-value);
120
- }
121
-
122
- .e-bigger.e-small.e-popup,
123
- .e-bigger.e-small .e-popup,
124
- .e-bigger .e-small.e-popup,
125
- .e-small .e-bigger.e-popup {
126
- .e-multicolumn-grid .e-headercelldiv,
127
- .e-multicolumn-grid .e-rowcell,
128
- &.e-multicolumn-list .e-popup-footer {
129
- font-size: 14px;
130
- }
131
- &.e-multicolumn-list .e-popup-footer,
132
- .e-multicolumn-grid .e-row,
133
- .e-multicolumn-grid .e-emptyrow {
134
- height: $multicolumn-grid-bigger-small-height;
135
- }
136
- @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-small-value);
137
- }
138
139
  }
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: 1px !default;
4
4
  $footer-border-width: 0 0 0 0 !default;
5
5
  $grid-border-width: 0 !default;
6
+ $multicolumn-popup-border-radius: 0 !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 36px !default;
8
9
  $multicolumn-margin-top-small-value: 1px !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 36px !default;
3
3
  $multicolumn-margin-top-value: 1px !default;
4
4
  $footer-border-width: 0 1px 0 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 0 !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 36px !default;
8
9
  $multicolumn-margin-top-small-value: 1px !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 32px !default;
3
3
  $multicolumn-margin-top-value: 1px !default;
4
4
  $footer-border-width: 0 1px 0 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 4px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 26px !default;
8
9
  $multicolumn-margin-top-small-value: 1px !default;
@@ -3,6 +3,7 @@ $multicolumn-grid-height: 30px !default;
3
3
  $multicolumn-margin-top-value: 2px !default;
4
4
  $footer-border-width: 0 1px 0 1px !default;
5
5
  $grid-border-width: 1px !default;
6
+ $multicolumn-popup-border-radius: 2px !default;
6
7
 
7
8
  $multicolumn-grid-small-height: 24px !default;
8
9
  $multicolumn-margin-top-small-value: 2px !default;
@@ -40,6 +40,9 @@
40
40
  .e-altrow {
41
41
  background: $altrow-bg-color;
42
42
  }
43
+ .e-grid .e-headercell {
44
+ background-color: unset;
45
+ }
43
46
  .e-headertext,
44
47
  .e-grid th.e-headercell[aria-sort = 'ascending'] .e-headertext,
45
48
  .e-grid th.e-headercell[aria-sort = 'descending'] .e-headertext {