@syncfusion/ej2-dropdowns 21.2.8 → 22.1.34

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 (162) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +35 -6
  3. package/README.md +201 -103
  4. package/dist/ej2-dropdowns.min.js +2 -2
  5. package/dist/ej2-dropdowns.umd.min.js +2 -2
  6. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es2015.js +158 -41
  8. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  9. package/dist/es6/ej2-dropdowns.es5.js +158 -41
  10. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  11. package/dist/global/ej2-dropdowns.min.js +2 -2
  12. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  13. package/dist/global/index.d.ts +1 -1
  14. package/package.json +11 -11
  15. package/src/auto-complete/auto-complete-model.d.ts +2 -1
  16. package/src/auto-complete/auto-complete.d.ts +2 -1
  17. package/src/auto-complete/auto-complete.js +1 -1
  18. package/src/combo-box/combo-box-model.d.ts +6 -3
  19. package/src/combo-box/combo-box.d.ts +6 -3
  20. package/src/drop-down-base/drop-down-base-model.d.ts +8 -4
  21. package/src/drop-down-base/drop-down-base.d.ts +8 -4
  22. package/src/drop-down-base/drop-down-base.js +21 -7
  23. package/src/drop-down-list/drop-down-list-model.d.ts +6 -3
  24. package/src/drop-down-list/drop-down-list.d.ts +6 -3
  25. package/src/drop-down-list/drop-down-list.js +23 -14
  26. package/src/drop-down-tree/drop-down-tree-model.d.ts +21 -6
  27. package/src/drop-down-tree/drop-down-tree.d.ts +55 -62
  28. package/src/drop-down-tree/drop-down-tree.js +1 -1
  29. package/src/list-box/list-box.d.ts +15 -0
  30. package/src/list-box/list-box.js +53 -3
  31. package/src/mention/mention-model.d.ts +4 -2
  32. package/src/mention/mention.d.ts +4 -2
  33. package/src/multi-select/multi-select-model.d.ts +15 -8
  34. package/src/multi-select/multi-select.d.ts +15 -7
  35. package/src/multi-select/multi-select.js +59 -15
  36. package/styles/auto-complete/_material3-dark-definition.scss +1 -0
  37. package/styles/auto-complete/_material3-definition.scss +2 -0
  38. package/styles/auto-complete/material3-dark.css +198 -0
  39. package/styles/auto-complete/material3-dark.scss +5 -0
  40. package/styles/auto-complete/material3.css +254 -0
  41. package/styles/auto-complete/material3.scss +5 -0
  42. package/styles/bootstrap-dark.css +212 -100
  43. package/styles/bootstrap.css +214 -101
  44. package/styles/bootstrap4.css +214 -101
  45. package/styles/bootstrap5-dark.css +212 -100
  46. package/styles/bootstrap5.css +212 -100
  47. package/styles/combo-box/_material3-dark-definition.scss +1 -0
  48. package/styles/combo-box/_material3-definition.scss +2 -0
  49. package/styles/combo-box/material3-dark.css +198 -0
  50. package/styles/combo-box/material3-dark.scss +5 -0
  51. package/styles/combo-box/material3.css +254 -0
  52. package/styles/combo-box/material3.scss +5 -0
  53. package/styles/drop-down-base/_layout.scss +3 -1
  54. package/styles/drop-down-base/_material3-dark-definition.scss +1 -0
  55. package/styles/drop-down-base/_material3-definition.scss +87 -0
  56. package/styles/drop-down-base/_theme.scss +10 -0
  57. package/styles/drop-down-base/bootstrap-dark.css +4 -0
  58. package/styles/drop-down-base/bootstrap.css +4 -0
  59. package/styles/drop-down-base/bootstrap4.css +4 -0
  60. package/styles/drop-down-base/bootstrap5-dark.css +4 -0
  61. package/styles/drop-down-base/bootstrap5.css +4 -0
  62. package/styles/drop-down-base/fabric-dark.css +4 -0
  63. package/styles/drop-down-base/fabric.css +4 -0
  64. package/styles/drop-down-base/fluent-dark.css +4 -0
  65. package/styles/drop-down-base/fluent.css +4 -0
  66. package/styles/drop-down-base/highcontrast-light.css +4 -0
  67. package/styles/drop-down-base/highcontrast.css +4 -0
  68. package/styles/drop-down-base/material-dark.css +4 -0
  69. package/styles/drop-down-base/material.css +4 -0
  70. package/styles/drop-down-base/material3-dark.css +439 -0
  71. package/styles/drop-down-base/material3-dark.scss +4 -0
  72. package/styles/drop-down-base/material3.css +495 -0
  73. package/styles/drop-down-base/material3.scss +4 -0
  74. package/styles/drop-down-base/tailwind-dark.css +4 -0
  75. package/styles/drop-down-base/tailwind.css +4 -0
  76. package/styles/drop-down-list/_layout.scss +15 -1
  77. package/styles/drop-down-list/_material3-dark-definition.scss +1 -0
  78. package/styles/drop-down-list/_material3-definition.scss +180 -0
  79. package/styles/drop-down-list/icons/_material3-dark.scss +1 -0
  80. package/styles/drop-down-list/material3-dark.css +503 -0
  81. package/styles/drop-down-list/material3-dark.scss +9 -0
  82. package/styles/drop-down-list/material3.css +559 -0
  83. package/styles/drop-down-list/material3.scss +9 -0
  84. package/styles/drop-down-tree/_layout.scss +13 -7
  85. package/styles/drop-down-tree/_material3-dark-definition.scss +1 -0
  86. package/styles/drop-down-tree/_material3-definition.scss +76 -0
  87. package/styles/drop-down-tree/_theme.scss +14 -2
  88. package/styles/drop-down-tree/icons/_material3-dark.scss +1 -0
  89. package/styles/drop-down-tree/icons/_material3.scss +1 -1
  90. package/styles/drop-down-tree/material3-dark.css +466 -0
  91. package/styles/drop-down-tree/material3-dark.scss +10 -0
  92. package/styles/drop-down-tree/material3.css +522 -0
  93. package/styles/drop-down-tree/material3.scss +10 -0
  94. package/styles/fabric-dark.css +212 -100
  95. package/styles/fabric.css +214 -101
  96. package/styles/fluent-dark.css +214 -101
  97. package/styles/fluent.css +214 -101
  98. package/styles/highcontrast-light.css +212 -100
  99. package/styles/highcontrast.css +214 -101
  100. package/styles/list-box/_layout.scss +17 -3
  101. package/styles/list-box/_material3-dark-definition.scss +1 -0
  102. package/styles/list-box/_material3-definition.scss +117 -0
  103. package/styles/list-box/_theme.scss +2 -1
  104. package/styles/list-box/bootstrap-dark.css +207 -99
  105. package/styles/list-box/bootstrap.css +209 -100
  106. package/styles/list-box/bootstrap4.css +209 -100
  107. package/styles/list-box/bootstrap5-dark.css +207 -99
  108. package/styles/list-box/bootstrap5.css +207 -99
  109. package/styles/list-box/fabric-dark.css +207 -99
  110. package/styles/list-box/fabric.css +209 -100
  111. package/styles/list-box/fluent-dark.css +209 -100
  112. package/styles/list-box/fluent.css +209 -100
  113. package/styles/list-box/highcontrast-light.css +207 -99
  114. package/styles/list-box/highcontrast.css +209 -100
  115. package/styles/list-box/icons/_material3-dark.scss +1 -0
  116. package/styles/list-box/material-dark.css +207 -99
  117. package/styles/list-box/material.css +209 -100
  118. package/styles/list-box/material3-dark.css +956 -0
  119. package/styles/list-box/material3-dark.scss +6 -0
  120. package/styles/list-box/material3.css +1012 -0
  121. package/styles/list-box/material3.scss +6 -0
  122. package/styles/list-box/tailwind-dark.css +209 -100
  123. package/styles/list-box/tailwind.css +209 -100
  124. package/styles/material-dark.css +212 -100
  125. package/styles/material.css +214 -101
  126. package/styles/material3-dark.css +4664 -0
  127. package/styles/material3-dark.scss +10 -0
  128. package/styles/material3.css +4720 -0
  129. package/styles/material3.scss +10 -0
  130. package/styles/mention/_material3-dark-definition.scss +1 -0
  131. package/styles/mention/_material3-definition.scss +1 -0
  132. package/styles/mention/material3-dark.css +87 -0
  133. package/styles/mention/material3-dark.scss +7 -0
  134. package/styles/mention/material3.css +143 -0
  135. package/styles/mention/material3.scss +7 -0
  136. package/styles/multi-select/_layout.scss +160 -7
  137. package/styles/multi-select/_material3-dark-definition.scss +1 -0
  138. package/styles/multi-select/_material3-definition.scss +246 -0
  139. package/styles/multi-select/_theme.scss +6 -0
  140. package/styles/multi-select/bootstrap-dark.css +1 -1
  141. package/styles/multi-select/bootstrap.css +1 -1
  142. package/styles/multi-select/bootstrap4.css +1 -1
  143. package/styles/multi-select/bootstrap5-dark.css +1 -1
  144. package/styles/multi-select/bootstrap5.css +1 -1
  145. package/styles/multi-select/fabric-dark.css +1 -1
  146. package/styles/multi-select/fabric.css +1 -1
  147. package/styles/multi-select/fluent-dark.css +1 -1
  148. package/styles/multi-select/fluent.css +1 -1
  149. package/styles/multi-select/highcontrast-light.css +1 -1
  150. package/styles/multi-select/highcontrast.css +1 -1
  151. package/styles/multi-select/icons/_material3-dark.scss +1 -0
  152. package/styles/multi-select/icons/_material3.scss +3 -4
  153. package/styles/multi-select/material-dark.css +1 -1
  154. package/styles/multi-select/material.css +1 -1
  155. package/styles/multi-select/material3-dark.css +2547 -0
  156. package/styles/multi-select/material3-dark.scss +10 -0
  157. package/styles/multi-select/material3.css +2603 -0
  158. package/styles/multi-select/material3.scss +10 -0
  159. package/styles/multi-select/tailwind-dark.css +1 -1
  160. package/styles/multi-select/tailwind.css +1 -1
  161. package/styles/tailwind-dark.css +214 -101
  162. package/styles/tailwind.css +214 -101
@@ -47,7 +47,8 @@
47
47
 
48
48
  /* stylelint-disable property-no-vendor-prefix */
49
49
  .e-listbox-wrapper,
50
- .e-listbox-container {
50
+ .e-listbox-container,
51
+ .e-listboxtool-wrapper {
51
52
  -webkit-overflow-scrolling: touch;
52
53
  box-sizing: border-box;
53
54
  cursor: pointer;
@@ -59,24 +60,29 @@
59
60
  width: 100%;
60
61
  }
61
62
  .e-listbox-wrapper *,
62
- .e-listbox-container * {
63
+ .e-listbox-container *,
64
+ .e-listboxtool-wrapper * {
63
65
  box-sizing: border-box;
64
66
  }
65
67
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
66
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
68
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
69
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
67
70
  width: 86% !important; /* stylelint-disable-line declaration-no-important */
68
71
  }
69
72
  .e-listbox-wrapper:focus,
70
- .e-listbox-container:focus {
73
+ .e-listbox-container:focus,
74
+ .e-listboxtool-wrapper:focus {
71
75
  outline: none;
72
76
  }
73
77
  .e-listbox-wrapper.e-disabled,
74
- .e-listbox-container.e-disabled {
78
+ .e-listbox-container.e-disabled,
79
+ .e-listboxtool-wrapper.e-disabled {
75
80
  cursor: default;
76
81
  pointer-events: none;
77
82
  }
78
83
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
79
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
84
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
85
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
80
86
  text-align: center;
81
87
  }
82
88
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -84,53 +90,66 @@
84
90
  .e-listbox-wrapper .e-selectall-parent,
85
91
  .e-listbox-container:not(.e-list-template) .e-list-item,
86
92
  .e-listbox-container .e-list-nrt,
87
- .e-listbox-container .e-selectall-parent {
93
+ .e-listbox-container .e-selectall-parent,
94
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
95
+ .e-listboxtool-wrapper .e-list-nrt,
96
+ .e-listboxtool-wrapper .e-selectall-parent {
88
97
  height: 40px;
89
98
  line-height: 1.5;
90
99
  padding: 10px 16px 10px 16px;
91
100
  position: relative;
92
101
  }
93
102
  .e-listbox-wrapper.e-filter-list,
94
- .e-listbox-container.e-filter-list {
103
+ .e-listbox-container.e-filter-list,
104
+ .e-listboxtool-wrapper.e-filter-list {
95
105
  overflow: inherit;
96
106
  }
97
107
  .e-listbox-wrapper .e-list-parent,
98
- .e-listbox-container .e-list-parent {
108
+ .e-listbox-container .e-list-parent,
109
+ .e-listboxtool-wrapper .e-list-parent {
99
110
  height: 100%;
100
111
  min-height: 40px;
101
112
  }
102
113
  .e-listbox-wrapper .e-list-item,
103
- .e-listbox-container .e-list-item {
114
+ .e-listbox-container .e-list-item,
115
+ .e-listboxtool-wrapper .e-list-item {
104
116
  border-bottom: 1px solid;
105
117
  outline: none;
106
118
  }
107
119
  .e-listbox-wrapper .e-list-item.e-disabled,
108
- .e-listbox-container .e-list-item.e-disabled {
120
+ .e-listbox-container .e-list-item.e-disabled,
121
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
109
122
  pointer-events: none;
110
123
  }
111
124
  .e-listbox-wrapper .e-disable,
112
- .e-listbox-container .e-disable {
125
+ .e-listbox-container .e-disable,
126
+ .e-listboxtool-wrapper .e-disable {
113
127
  opacity: 0.7;
114
128
  }
115
129
  .e-listbox-wrapper .e-list-parent,
116
- .e-listbox-container .e-list-parent {
130
+ .e-listbox-container .e-list-parent,
131
+ .e-listboxtool-wrapper .e-list-parent {
117
132
  margin: 0;
118
133
  padding: 0;
119
134
  }
120
135
  .e-listbox-wrapper .e-list-header .e-text.header,
121
- .e-listbox-container .e-list-header .e-text.header {
136
+ .e-listbox-container .e-list-header .e-text.header,
137
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
122
138
  display: none;
123
139
  }
124
140
  .e-listbox-wrapper .e-icon-back,
125
- .e-listbox-container .e-icon-back {
141
+ .e-listbox-container .e-icon-back,
142
+ .e-listboxtool-wrapper .e-icon-back {
126
143
  margin-top: 0;
127
144
  }
128
145
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
129
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
146
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
147
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
130
148
  display: none;
131
149
  }
132
150
  .e-listbox-wrapper .e-list-header,
133
- .e-listbox-container .e-list-header {
151
+ .e-listbox-container .e-list-header,
152
+ .e-listboxtool-wrapper .e-list-header {
134
153
  -ms-flex-align: center;
135
154
  align-items: center;
136
155
  border-bottom: 1px solid;
@@ -141,21 +160,25 @@
141
160
  padding: 0 16px;
142
161
  }
143
162
  .e-listbox-wrapper .e-has-header > .e-view,
144
- .e-listbox-container .e-has-header > .e-view {
163
+ .e-listbox-container .e-has-header > .e-view,
164
+ .e-listboxtool-wrapper .e-has-header > .e-view {
145
165
  top: 45px;
146
166
  }
147
167
  .e-listbox-wrapper .e-but-back,
148
- .e-listbox-container .e-but-back {
168
+ .e-listbox-container .e-but-back,
169
+ .e-listboxtool-wrapper .e-but-back {
149
170
  cursor: pointer;
150
171
  padding-right: 10px;
151
172
  }
152
173
  .e-listbox-wrapper .e-list-group-item:first-child,
153
- .e-listbox-container .e-list-group-item:first-child {
174
+ .e-listbox-container .e-list-group-item:first-child,
175
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
154
176
  border: 0;
155
177
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
156
178
  }
157
179
  .e-listbox-wrapper .e-list-group-item,
158
- .e-listbox-container .e-list-group-item {
180
+ .e-listbox-container .e-list-group-item,
181
+ .e-listboxtool-wrapper .e-list-group-item {
159
182
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
160
183
  border-top: 0 solid;
161
184
  font-weight: 600;
@@ -164,7 +187,8 @@
164
187
  padding: 10px 16px 10px 16px;
165
188
  }
166
189
  .e-listbox-wrapper .e-icon-collapsible,
167
- .e-listbox-container .e-icon-collapsible {
190
+ .e-listbox-container .e-icon-collapsible,
191
+ .e-listboxtool-wrapper .e-icon-collapsible {
168
192
  cursor: pointer;
169
193
  font-size: 12px;
170
194
  position: absolute;
@@ -173,42 +197,51 @@
173
197
  transform: translateY(-50%);
174
198
  }
175
199
  .e-listbox-wrapper .e-text-content,
176
- .e-listbox-container .e-text-content {
200
+ .e-listbox-container .e-text-content,
201
+ .e-listboxtool-wrapper .e-text-content {
177
202
  height: 100%;
178
203
  position: relative;
179
204
  vertical-align: middle;
180
205
  }
181
206
  .e-listbox-wrapper .e-text-content *,
182
- .e-listbox-container .e-text-content * {
207
+ .e-listbox-container .e-text-content *,
208
+ .e-listboxtool-wrapper .e-text-content * {
183
209
  display: inline-block;
184
210
  vertical-align: middle;
185
211
  }
186
212
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
187
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
213
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
214
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
188
215
  width: calc(100% - 40px);
189
216
  }
190
217
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
191
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
218
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
219
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
192
220
  width: calc(100% - 90px);
193
221
  }
194
222
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
195
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
223
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
224
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
196
225
  width: calc(100% - 80px);
197
226
  }
198
227
  .e-listbox-wrapper .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
199
- .e-listbox-container .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
228
+ .e-listbox-container .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
229
+ .e-listboxtool-wrapper .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
200
230
  width: calc(100% - 92px);
201
231
  }
202
232
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
203
- .e-listbox-container .e-checkbox .e-checkbox-left {
233
+ .e-listbox-container .e-checkbox .e-checkbox-left,
234
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
204
235
  margin: 0 10px 0 0;
205
236
  }
206
237
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
207
- .e-listbox-container .e-checkbox .e-checkbox-right {
238
+ .e-listbox-container .e-checkbox .e-checkbox-right,
239
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
208
240
  margin: 0 0 0 10px;
209
241
  }
210
242
  .e-listbox-wrapper .e-list-text,
211
- .e-listbox-container .e-list-text {
243
+ .e-listbox-container .e-list-text,
244
+ .e-listboxtool-wrapper .e-list-text {
212
245
  cursor: pointer;
213
246
  display: inline-block;
214
247
  overflow: hidden;
@@ -218,107 +251,129 @@
218
251
  width: 100%;
219
252
  }
220
253
  .e-listbox-wrapper .e-list-icon + .e-list-text,
221
- .e-listbox-container .e-list-icon + .e-list-text {
254
+ .e-listbox-container .e-list-icon + .e-list-text,
255
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
222
256
  width: calc(100% - 60px);
223
257
  }
224
258
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
225
- .e-listbox-container .e-icon-wrapper .e-list-text {
259
+ .e-listbox-container .e-icon-wrapper .e-list-text,
260
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
226
261
  width: calc(100% - 60px);
227
262
  }
228
263
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
229
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
264
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
265
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
230
266
  width: calc(100% - 60px);
231
267
  }
232
268
  .e-listbox-wrapper .e-list-icon,
233
- .e-listbox-container .e-list-icon {
269
+ .e-listbox-container .e-list-icon,
270
+ .e-listboxtool-wrapper .e-list-icon {
234
271
  height: 30px;
235
272
  margin-right: 10px;
236
273
  width: 30px;
237
274
  }
238
275
  .e-listbox-wrapper .e-content,
239
- .e-listbox-container .e-content {
276
+ .e-listbox-container .e-content,
277
+ .e-listboxtool-wrapper .e-content {
240
278
  overflow: hidden;
241
279
  position: relative;
242
280
  }
243
281
  .e-listbox-wrapper .e-list-header .e-text,
244
- .e-listbox-container .e-list-header .e-text {
282
+ .e-listbox-container .e-list-header .e-text,
283
+ .e-listboxtool-wrapper .e-list-header .e-text {
245
284
  cursor: pointer;
246
285
  text-indent: 0;
247
286
  }
248
287
  .e-listbox-wrapper .e-text .e-headertext,
249
- .e-listbox-container .e-text .e-headertext {
288
+ .e-listbox-container .e-text .e-headertext,
289
+ .e-listboxtool-wrapper .e-text .e-headertext {
250
290
  display: inline-block;
251
291
  line-height: 1.2;
252
292
  }
253
293
  .e-listbox-wrapper.e-rtl,
254
- .e-listbox-container.e-rtl {
294
+ .e-listbox-container.e-rtl,
295
+ .e-listboxtool-wrapper.e-rtl {
255
296
  direction: rtl;
256
297
  }
257
298
  .e-listbox-wrapper.e-rtl .e-list-icon,
258
- .e-listbox-container.e-rtl .e-list-icon {
299
+ .e-listbox-container.e-rtl .e-list-icon,
300
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
259
301
  margin-left: 16px;
260
302
  margin-right: 0;
261
303
  }
262
304
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
263
- .e-listbox-container.e-rtl .e-icon-collapsible {
305
+ .e-listbox-container.e-rtl .e-icon-collapsible,
306
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
264
307
  left: 0%;
265
308
  right: initial;
266
309
  top: 50%;
267
310
  transform: translateY(-50%) rotate(180deg);
268
311
  }
269
312
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
270
- .e-listbox-container.e-rtl .e-list-header .e-text {
313
+ .e-listbox-container.e-rtl .e-list-header .e-text,
314
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
271
315
  cursor: pointer;
272
316
  }
273
317
  .e-listbox-wrapper.e-rtl .e-but-back,
274
- .e-listbox-container.e-rtl .e-but-back {
318
+ .e-listbox-container.e-rtl .e-but-back,
319
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
275
320
  transform: rotate(180deg);
276
321
  }
277
322
  .e-listbox-wrapper.e-rtl .e-icon-back,
278
- .e-listbox-container.e-rtl .e-icon-back {
323
+ .e-listbox-container.e-rtl .e-icon-back,
324
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
279
325
  margin-top: 0;
280
326
  }
281
327
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
282
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
328
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
329
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
283
330
  margin: 0 0 0 10px;
284
331
  }
285
332
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
286
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
333
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
334
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
287
335
  margin: 0 10px 0 0;
288
336
  }
289
337
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
290
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
338
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
339
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
291
340
  margin: 0 0 0 10px;
292
341
  }
293
342
  .e-listbox-wrapper .e-checkbox-wrapper,
294
- .e-listbox-container .e-checkbox-wrapper {
343
+ .e-listbox-container .e-checkbox-wrapper,
344
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
295
345
  margin: 0 10px 0 0;
296
346
  text-indent: 0;
297
347
  vertical-align: middle;
298
348
  }
299
349
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
300
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
350
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
351
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
301
352
  position: absolute;
302
353
  right: 0;
303
354
  top: 30%;
304
355
  }
305
356
  .e-listbox-wrapper .e-input-group,
306
- .e-listbox-container .e-input-group {
357
+ .e-listbox-container .e-input-group,
358
+ .e-listboxtool-wrapper .e-input-group {
307
359
  padding: 4px 8px;
308
360
  }
309
361
  .e-listbox-wrapper .e-input-focus,
310
- .e-listbox-container .e-input-focus {
362
+ .e-listbox-container .e-input-focus,
363
+ .e-listboxtool-wrapper .e-input-focus {
311
364
  padding: 4px 4px 4px 8px;
312
365
  }
313
366
  .e-listbox-wrapper .e-hidden-select,
314
- .e-listbox-container .e-hidden-select {
367
+ .e-listbox-container .e-hidden-select,
368
+ .e-listboxtool-wrapper .e-hidden-select {
315
369
  height: 1px;
316
370
  opacity: 0;
317
371
  position: absolute;
318
372
  width: 100%;
319
373
  }
320
374
  .e-listbox-wrapper .e-placeholder,
321
- .e-listbox-container .e-placeholder {
375
+ .e-listbox-container .e-placeholder,
376
+ .e-listboxtool-wrapper .e-placeholder {
322
377
  background-color: #007bff;
323
378
  display: block;
324
379
  height: 1px;
@@ -340,24 +395,29 @@ ejs-listbox {
340
395
  }
341
396
 
342
397
  .e-listbox-wrapper.e-sortableclone,
343
- .e-listbox-container.e-sortableclone {
398
+ .e-listbox-container.e-sortableclone,
399
+ .e-listboxtool-wrapper.e-sortableclone {
344
400
  border-width: 0;
345
401
  overflow: visible;
346
402
  }
347
403
  .e-listbox-wrapper.e-sortableclone .e-list-item,
348
- .e-listbox-container.e-sortableclone .e-list-item {
404
+ .e-listbox-container.e-sortableclone .e-list-item,
405
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
349
406
  list-style-type: none;
350
407
  }
351
408
  .e-listbox-wrapper.e-sortableclone .e-ripple,
352
- .e-listbox-container.e-sortableclone .e-ripple {
409
+ .e-listbox-container.e-sortableclone .e-ripple,
410
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
353
411
  overflow: visible;
354
412
  }
355
413
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
356
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
414
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
415
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
357
416
  display: none;
358
417
  }
359
418
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
360
- .e-listbox-container.e-sortableclone .e-list-badge {
419
+ .e-listbox-container.e-sortableclone .e-list-badge,
420
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
361
421
  -ms-flex-align: center;
362
422
  align-items: center;
363
423
  background-color: #007bff;
@@ -376,6 +436,10 @@ ejs-listbox {
376
436
  width: 22px;
377
437
  }
378
438
 
439
+ .e-listboxtool-wrapper.e-sortableclone {
440
+ display: block;
441
+ }
442
+
379
443
  .e-listboxtool-wrapper,
380
444
  .e-listboxtool-container {
381
445
  cursor: pointer;
@@ -601,12 +665,14 @@ ejs-listbox {
601
665
  }
602
666
 
603
667
  .e-listbox-wrapper,
604
- .e-listbox-container {
668
+ .e-listbox-container,
669
+ .e-listboxtool-wrapper {
605
670
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
606
671
  font-size: 14px;
607
672
  }
608
673
  .e-listbox-wrapper .e-list-header,
609
- .e-listbox-container .e-list-header {
674
+ .e-listbox-container .e-list-header,
675
+ .e-listboxtool-wrapper .e-list-header {
610
676
  background-color: #fff;
611
677
  border-color: rgba(0, 0, 0, 0.13);
612
678
  color: #212529;
@@ -614,27 +680,32 @@ ejs-listbox {
614
680
  }
615
681
 
616
682
  .e-listbox-wrapper.e-filter-list .e-list-parent,
617
- .e-listbox-container.e-filter-list .e-list-parent {
683
+ .e-listbox-container.e-filter-list .e-list-parent,
684
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
618
685
  height: calc(100% - 39px);
619
686
  }
620
687
 
621
688
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
622
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
689
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
690
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
623
691
  height: calc(100% - 79px);
624
692
  }
625
693
 
626
694
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
627
- .e-listbox-container .e-selectall-parent + .e-list-parent {
695
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
696
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
628
697
  height: calc(100% - 40px);
629
698
  }
630
699
 
631
700
  .e-listbox-wrapper .e-icons,
632
- .e-listbox-container .e-icons {
701
+ .e-listbox-container .e-icons,
702
+ .e-listboxtool-wrapper .e-icons {
633
703
  color: #212529;
634
704
  }
635
705
 
636
706
  .e-listbox-wrapper .e-list-item,
637
- .e-listbox-container .e-list-item {
707
+ .e-listbox-container .e-list-item,
708
+ .e-listboxtool-wrapper .e-list-item {
638
709
  background-color: #fff;
639
710
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
640
711
  border-left: 0 solid rgba(0, 0, 0, 0.13);
@@ -645,41 +716,50 @@ ejs-listbox {
645
716
 
646
717
  .e-listbox-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled), .e-listbox-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
647
718
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
648
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
719
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
720
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
721
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
649
722
  background-color: #e9ecef;
650
723
  border-color: transparent;
651
724
  color: #212529;
652
725
  }
653
726
 
654
727
  .e-listbox-wrapper .e-list-item.e-selected,
655
- .e-listbox-container .e-list-item.e-selected {
728
+ .e-listbox-container .e-list-item.e-selected,
729
+ .e-listboxtool-wrapper .e-list-item.e-selected {
656
730
  background-color: #007bff;
657
731
  color: #fff;
658
732
  }
659
733
 
660
734
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
661
- .e-listbox-container .e-list-item.e-selected.e-checklist {
735
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
736
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
662
737
  background-color: #fff;
663
738
  color: #212529;
664
739
  }
665
740
 
666
741
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
667
742
  .e-listbox-container .e-list-item.e-focused,
668
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
743
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
744
+ .e-listboxtool-wrapper .e-list-item.e-focused,
745
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
669
746
  background-color: #007bff;
670
747
  color: #fff;
671
748
  }
672
749
 
673
750
  .e-listbox-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listbox-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
674
751
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
675
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
752
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
753
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
754
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
676
755
  background-color: #fff;
677
756
  border-color: #fff;
678
757
  color: #000;
679
758
  }
680
759
 
681
760
  .e-listbox-wrapper .e-list-group-item,
682
- .e-listbox-container .e-list-group-item {
761
+ .e-listbox-container .e-list-group-item,
762
+ .e-listboxtool-wrapper .e-list-group-item {
683
763
  background-color: #fff;
684
764
  border-color: rgba(0, 0, 0, 0.13);
685
765
  color: #6c757d;
@@ -687,32 +767,38 @@ ejs-listbox {
687
767
  }
688
768
 
689
769
  .e-listbox-wrapper .e-selectall-parent,
690
- .e-listbox-container .e-selectall-parent {
770
+ .e-listbox-container .e-selectall-parent,
771
+ .e-listboxtool-wrapper .e-selectall-parent {
691
772
  background-color: #fff;
692
773
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
693
774
  color: #212529;
694
775
  }
695
776
 
696
777
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
697
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
778
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
779
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
698
780
  background-color: transparent;
699
781
  }
700
782
 
701
783
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
702
- .e-listbox-container.e-list-template .e-list-wrapper {
784
+ .e-listbox-container.e-list-template .e-list-wrapper,
785
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
703
786
  height: inherit;
704
787
  position: relative;
705
788
  }
706
789
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
707
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
790
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
791
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
708
792
  padding: 0.7142em 1.0714em;
709
793
  }
710
794
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
711
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
795
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
796
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
712
797
  padding: 0.7142em 1.0714em;
713
798
  }
714
799
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
715
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
800
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
801
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
716
802
  color: #212529;
717
803
  display: block;
718
804
  font-size: 18px;
@@ -724,7 +810,8 @@ ejs-listbox {
724
810
  white-space: nowrap;
725
811
  }
726
812
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
727
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
813
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
814
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
728
815
  color: #212529;
729
816
  display: block;
730
817
  font-size: 14px;
@@ -733,13 +820,15 @@ ejs-listbox {
733
820
  word-wrap: break-word;
734
821
  }
735
822
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
736
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
823
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
824
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
737
825
  overflow: hidden;
738
826
  text-overflow: ellipsis;
739
827
  white-space: nowrap;
740
828
  }
741
829
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
742
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
830
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
831
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
743
832
  height: 2.8571em;
744
833
  left: 1.0667em;
745
834
  position: absolute;
@@ -747,17 +836,20 @@ ejs-listbox {
747
836
  width: 2.8571em;
748
837
  }
749
838
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
750
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
839
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
840
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
751
841
  padding-left: 4.6428em;
752
842
  padding-right: 1.0714em;
753
843
  }
754
844
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
755
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
845
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
846
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
756
847
  padding-left: 1.0714em;
757
848
  padding-right: 4.6428em;
758
849
  }
759
850
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
760
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
851
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
852
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
761
853
  height: 2.8571em;
762
854
  position: absolute;
763
855
  right: 1.0667em;
@@ -765,15 +857,18 @@ ejs-listbox {
765
857
  width: 2.8571em;
766
858
  }
767
859
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
768
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
860
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
861
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
769
862
  top: 0.7142em;
770
863
  }
771
864
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
772
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
865
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
866
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
773
867
  top: 0.7142em;
774
868
  }
775
869
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
776
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
870
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
871
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
777
872
  font-size: 15px;
778
873
  height: 1.333em;
779
874
  line-height: 1.433em;
@@ -785,17 +880,20 @@ ejs-listbox {
785
880
  width: 2em;
786
881
  }
787
882
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
788
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
883
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
884
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
789
885
  padding-left: 4.6428em;
790
886
  padding-right: 3.9285em;
791
887
  }
792
888
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
793
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
889
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
890
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
794
891
  padding-left: 1.0714em;
795
892
  padding-right: 3.9285em;
796
893
  }
797
894
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
798
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
895
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
896
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
799
897
  display: block;
800
898
  margin: 0;
801
899
  overflow: hidden;
@@ -804,53 +902,64 @@ ejs-listbox {
804
902
  white-space: nowrap;
805
903
  }
806
904
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
807
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
905
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
906
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
808
907
  color: #212529;
809
908
  }
810
909
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
811
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
910
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
911
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
812
912
  color: #212529;
813
913
  }
814
914
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
815
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
915
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
916
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
816
917
  color: #fff;
817
918
  }
818
919
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
819
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
920
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
921
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
820
922
  color: #fff;
821
923
  }
822
924
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
823
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
925
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
926
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
824
927
  left: inherit;
825
928
  right: 1.0667em;
826
929
  }
827
930
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
828
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
931
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
932
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
829
933
  padding-left: 1.0714em;
830
934
  padding-right: 4.6428em;
831
935
  }
832
936
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
833
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
937
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
938
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
834
939
  padding-left: 4.6428em;
835
940
  padding-right: 1.0714em;
836
941
  }
837
942
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
838
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
943
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
944
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
839
945
  left: 1.0667em;
840
946
  right: inherit;
841
947
  }
842
948
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
843
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
949
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
950
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
844
951
  left: 1em;
845
952
  right: inherit;
846
953
  }
847
954
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
848
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
955
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
956
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
849
957
  padding-left: 3.9285em;
850
958
  padding-right: 4.6428em;
851
959
  }
852
960
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
853
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
961
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
962
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
854
963
  padding-left: 3.9285em;
855
964
  padding-right: 1.0714em;
856
965
  }