@syncfusion/ej2-dropdowns 18.2.44-4568 → 18.2.44-4570

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 (170) hide show
  1. package/.eslintrc.json +244 -0
  2. package/CHANGELOG.md +1524 -1524
  3. package/README.md +118 -118
  4. package/dist/ej2-dropdowns.umd.min.js +1 -1
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +99 -60
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +191 -151
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +1 -1
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/ts/auto-complete/auto-complete.ts +527 -0
  13. package/dist/ts/combo-box/combo-box.ts +957 -0
  14. package/dist/ts/common/highlight-search.ts +47 -0
  15. package/dist/ts/common/incremental-search.ts +81 -0
  16. package/dist/ts/drop-down-base/drop-down-base.ts +1572 -0
  17. package/dist/ts/drop-down-list/drop-down-list.ts +2993 -0
  18. package/dist/ts/drop-down-tree/drop-down-tree.ts +3066 -0
  19. package/dist/ts/list-box/list-box.ts +2317 -0
  20. package/dist/ts/multi-select/checkbox-selection.ts +528 -0
  21. package/dist/ts/multi-select/float-label.ts +155 -0
  22. package/dist/ts/multi-select/interface.ts +66 -0
  23. package/dist/ts/multi-select/multi-select.ts +4216 -0
  24. package/helpers/e2e/index.js +3 -3
  25. package/license +2 -2
  26. package/package.json +63 -77
  27. package/src/auto-complete/auto-complete-model.d.ts +179 -179
  28. package/src/auto-complete/auto-complete.js +19 -19
  29. package/src/combo-box/combo-box-model.d.ts +212 -212
  30. package/src/combo-box/combo-box.js +19 -19
  31. package/src/drop-down-base/drop-down-base-model.d.ts +191 -191
  32. package/src/drop-down-base/drop-down-base.js +19 -19
  33. package/src/drop-down-list/drop-down-list-model.d.ts +222 -222
  34. package/src/drop-down-list/drop-down-list.js +19 -19
  35. package/src/drop-down-tree/drop-down-tree-model.d.ts +344 -344
  36. package/src/drop-down-tree/drop-down-tree.js +19 -19
  37. package/src/list-box/list-box-model.d.ts +156 -156
  38. package/src/list-box/list-box.js +19 -19
  39. package/src/multi-select/checkbox-selection.js +3 -1
  40. package/src/multi-select/multi-select-model.d.ts +452 -452
  41. package/src/multi-select/multi-select.d.ts +2 -0
  42. package/src/multi-select/multi-select.js +58 -19
  43. package/styles/_all.scss +3 -3
  44. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  45. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  46. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  47. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  48. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  49. package/styles/bootstrap-dark.css +13 -16
  50. package/styles/bootstrap.css +12 -15
  51. package/styles/bootstrap4.css +6 -10
  52. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  53. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  54. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  55. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  56. package/styles/combo-box/_material-dark-definition.scss +2 -2
  57. package/styles/drop-down-base/_all.scss +2 -2
  58. package/styles/drop-down-base/_bootstrap-dark-definition.scss +64 -64
  59. package/styles/drop-down-base/_bootstrap-definition.scss +64 -64
  60. package/styles/drop-down-base/_bootstrap4-definition.scss +78 -78
  61. package/styles/drop-down-base/_definition.scss +23 -23
  62. package/styles/drop-down-base/_fabric-dark-definition.scss +68 -68
  63. package/styles/drop-down-base/_fabric-definition.scss +66 -66
  64. package/styles/drop-down-base/_highcontrast-definition.scss +82 -82
  65. package/styles/drop-down-base/_highcontrast-light-definition.scss +81 -81
  66. package/styles/drop-down-base/_layout.scss +108 -108
  67. package/styles/drop-down-base/_material-dark-definition.scss +67 -67
  68. package/styles/drop-down-base/_material-definition.scss +65 -65
  69. package/styles/drop-down-base/_theme.scss +242 -242
  70. package/styles/drop-down-list/_all.scss +2 -2
  71. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  72. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  73. package/styles/drop-down-list/_bootstrap4-definition.scss +184 -184
  74. package/styles/drop-down-list/_fabric-dark-definition.scss +127 -127
  75. package/styles/drop-down-list/_fabric-definition.scss +122 -122
  76. package/styles/drop-down-list/_highcontrast-definition.scss +131 -131
  77. package/styles/drop-down-list/_highcontrast-light-definition.scss +133 -133
  78. package/styles/drop-down-list/_layout.scss +218 -218
  79. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  80. package/styles/drop-down-list/_material-definition.scss +166 -166
  81. package/styles/drop-down-list/_theme.scss +10 -10
  82. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  83. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  84. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  85. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  86. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  87. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  88. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  89. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  90. package/styles/drop-down-list/icons/_material.scss +14 -14
  91. package/styles/drop-down-list/material.css +9 -0
  92. package/styles/drop-down-tree/_all.scss +2 -2
  93. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +61 -61
  94. package/styles/drop-down-tree/_bootstrap-definition.scss +61 -61
  95. package/styles/drop-down-tree/_bootstrap4-definition.scss +62 -62
  96. package/styles/drop-down-tree/_fabric-dark-definition.scss +62 -62
  97. package/styles/drop-down-tree/_fabric-definition.scss +62 -62
  98. package/styles/drop-down-tree/_highcontrast-definition.scss +62 -62
  99. package/styles/drop-down-tree/_highcontrast-light-definition.scss +62 -62
  100. package/styles/drop-down-tree/_layout.scss +437 -437
  101. package/styles/drop-down-tree/_material-dark-definition.scss +60 -60
  102. package/styles/drop-down-tree/_material-definition.scss +60 -60
  103. package/styles/drop-down-tree/_theme.scss +68 -68
  104. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  105. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  106. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  107. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  108. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  109. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  110. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  111. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  112. package/styles/drop-down-tree/icons/_material.scss +11 -11
  113. package/styles/drop-down-tree/material.css +9 -0
  114. package/styles/fabric-dark.css +2 -5
  115. package/styles/fabric.css +1 -4
  116. package/styles/highcontrast-light.css +2 -5
  117. package/styles/highcontrast.css +2 -7
  118. package/styles/list-box/_all.scss +2 -2
  119. package/styles/list-box/_bootstrap-dark-definition.scss +118 -118
  120. package/styles/list-box/_bootstrap-definition.scss +112 -112
  121. package/styles/list-box/_bootstrap4-definition.scss +118 -118
  122. package/styles/list-box/_fabric-dark-definition.scss +118 -118
  123. package/styles/list-box/_fabric-definition.scss +112 -112
  124. package/styles/list-box/_highcontrast-definition.scss +112 -112
  125. package/styles/list-box/_highcontrast-light-definition.scss +118 -118
  126. package/styles/list-box/_layout.scss +458 -458
  127. package/styles/list-box/_material-dark-definition.scss +118 -118
  128. package/styles/list-box/_material-definition.scss +112 -112
  129. package/styles/list-box/_theme.scss +273 -273
  130. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  131. package/styles/list-box/icons/_bootstrap.scss +25 -25
  132. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  133. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  134. package/styles/list-box/icons/_fabric.scss +25 -25
  135. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  136. package/styles/list-box/icons/_highcontrast.scss +25 -25
  137. package/styles/list-box/icons/_material-dark.scss +25 -25
  138. package/styles/list-box/icons/_material.scss +25 -25
  139. package/styles/material-dark.css +8 -11
  140. package/styles/material.css +34 -10
  141. package/styles/multi-select/_all.scss +2 -2
  142. package/styles/multi-select/_bootstrap-dark-definition.scss +171 -171
  143. package/styles/multi-select/_bootstrap-definition.scss +166 -166
  144. package/styles/multi-select/_bootstrap4-definition.scss +233 -233
  145. package/styles/multi-select/_fabric-dark-definition.scss +170 -170
  146. package/styles/multi-select/_fabric-definition.scss +167 -167
  147. package/styles/multi-select/_highcontrast-definition.scss +257 -259
  148. package/styles/multi-select/_highcontrast-light-definition.scss +258 -258
  149. package/styles/multi-select/_layout.scss +1153 -1153
  150. package/styles/multi-select/_material-dark-definition.scss +186 -186
  151. package/styles/multi-select/_material-definition.scss +191 -191
  152. package/styles/multi-select/_theme.scss +384 -389
  153. package/styles/multi-select/bootstrap-dark.css +13 -16
  154. package/styles/multi-select/bootstrap.css +12 -15
  155. package/styles/multi-select/bootstrap4.css +6 -10
  156. package/styles/multi-select/fabric-dark.css +2 -5
  157. package/styles/multi-select/fabric.css +1 -4
  158. package/styles/multi-select/highcontrast-light.css +2 -5
  159. package/styles/multi-select/highcontrast.css +2 -7
  160. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  161. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  162. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  163. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  164. package/styles/multi-select/icons/_fabric.scss +26 -26
  165. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  166. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  167. package/styles/multi-select/icons/_material-dark.scss +26 -26
  168. package/styles/multi-select/icons/_material.scss +324 -324
  169. package/styles/multi-select/material-dark.css +8 -11
  170. package/styles/multi-select/material.css +16 -10
@@ -1,273 +1,273 @@
1
- @include export-module('listbox-theme') {
2
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
3
- height: $listbox-filter-small-height;
4
- }
5
-
6
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
7
- height: $listbox-filter-bigger-height;
8
- }
9
-
10
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
11
- height: $listbox-filter-bigger-small-height;
12
- }
13
-
14
- #{&}.e-listbox-wrapper {
15
- border: 1px solid $listbox-border-color;
16
- font-family: $listview-font-family;
17
- font-size: $listview-font-size;
18
- @at-root {
19
- & .e-list-header {
20
- background-color: $listview-header-bg;
21
- border-color: $listview-header-border;
22
- color: $listview-header-text-color;
23
- font-size: $listview-header-font-size;
24
- }
25
-
26
- &.e-filter-list .e-list-parent {
27
- height: $listbox-filter-height;
28
- }
29
-
30
- & .e-icons {
31
- color: $listview-icon-color;
32
- }
33
-
34
- & .e-list-item {
35
- background-color: $listview-background;
36
- border-bottom: $listview-border-bottom solid $listview-border-bottom-color;
37
- border-left: $listview-border-left solid $listview-border-left-color;
38
- border-right: $listview-border-right solid $listview-border-right-color;
39
- border-top: $listview-border-top solid $listview-border-top-color;
40
- color: $listview-text-color;
41
- }
42
-
43
- & .e-list-item:hover:not(.e-selected):not(.e-disabled),
44
- & .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
45
- background-color: $listview-item-hover-bg;
46
- border-color: $listview-hover-border-color;
47
- color: $listview-text-hover-color;
48
- }
49
-
50
- & .e-list-item.e-selected {
51
- background-color: $listview-item-active-bg;
52
- color: $listview-text-active-color;
53
- }
54
-
55
- & .e-list-item.e-selected.e-checklist {
56
- background-color: $listview-background;
57
- color: $listview-text-color;
58
- }
59
-
60
- & .e-list-item.e-focused,
61
- & .e-list-item.e-focused.e-selected.e-checklist {
62
- background-color: $listview-item-active-bg;
63
- color: $listview-text-active-color;
64
- }
65
-
66
- & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
67
- & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
68
- background-color: $checkmark-bgcolor;
69
- border-color: $checkmark-border-color;
70
- color: $checkmark-color;
71
- }
72
-
73
- & .e-list-group-item {
74
- background-color: $listview-groupheader-bg;
75
- border-color: $listview-header-border;
76
- color: $listview-groupheader-text-color;
77
- font-size: $listview-groupheader-font-size;
78
- }
79
-
80
- & .e-selectall-parent {
81
- background-color: $listview-background;
82
- border-bottom: 1px solid $select-all-border-color;
83
- color: $listview-text-color;
84
- }
85
-
86
- & .e-sortableclone.e-ripple .e-ripple-element {
87
- background-color: transparent;
88
- }
89
- }
90
-
91
- &.e-list-template {
92
-
93
- .e-list-wrapper {
94
- height: inherit;
95
- position: relative;
96
-
97
- &:not(.e-list-multi-line) {
98
- padding: $listview-template-padding;
99
- }
100
-
101
- &.e-list-multi-line {
102
- padding: $listview-template-multiline-padding;
103
-
104
- .e-list-item-header {
105
- color: $listview-template-multiline-header-color;
106
- display: block;
107
- font-size: $listview-template-multiline-header-font-size;
108
- font-weight: 500;
109
- margin: 0;
110
- overflow: hidden;
111
- padding: $listview-template-multiline-header-padding;
112
- text-overflow: ellipsis;
113
- white-space: nowrap;
114
- }
115
-
116
- .e-list-content {
117
- color: $listview-template-multiline-content-color;
118
- display: block;
119
- font-size: $listview-template-multiline-content-font-size;
120
- margin: 0;
121
- padding: $listview-template-multiline-content-padding;
122
- word-wrap: break-word;
123
- }
124
-
125
- .e-list-content:not(.e-text-overflow) {
126
- overflow: hidden;
127
- text-overflow: ellipsis;
128
- white-space: nowrap;
129
- }
130
- }
131
-
132
- &.e-list-avatar {
133
- .e-avatar {
134
- height: $listview-template-avatar-size;
135
- left: $listview-template-avatar-left;
136
- position: absolute;
137
- top: $listview-template-avatar-top;
138
- width: $listview-template-avatar-size;
139
- }
140
- }
141
-
142
- &.e-list-avatar:not(.e-list-badge) {
143
- padding-left: $listview-template-avatar-padding-left;
144
- padding-right: $listview-template-avatar-padding-right;
145
- }
146
-
147
- &.e-list-avatar-right:not(.e-list-badge) {
148
- padding-left: $listview-template-avatar-rightposition-padding-left;
149
- padding-right: $listview-template-avatar-rightposition-padding-right;
150
-
151
- .e-avatar {
152
- height: $listview-template-avatar-size;
153
- position: absolute;
154
- right: $listview-template-avatar-rightposition-right;
155
- top: $listview-template-avatar-top;
156
- width: $listview-template-avatar-size;
157
- }
158
- }
159
-
160
- &.e-list-multi-line.e-list-avatar {
161
- .e-avatar {
162
- top: $listview-template-multiline-avatar-top;
163
- }
164
- }
165
-
166
- &.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) {
167
- .e-avatar {
168
- top: $listview-template-multiline-avatar-top;
169
- }
170
- }
171
-
172
- &.e-list-badge {
173
-
174
- .e-badge {
175
- font-size: $listview-template-badge-font-size;
176
- height: $listview-template-badge-height;
177
- line-height: $listview-template-badge-line-height;
178
- padding: 0;
179
- position: absolute;
180
- right: $listview-template-badge-right;
181
- top: 50%;
182
- transform: translateY(-50%);
183
- width: $listview-template-badge-width;
184
- }
185
- }
186
-
187
- &.e-list-badge.e-list-avatar {
188
- padding-left: $listview-template-avatar-badge-padding-left;
189
- padding-right: $listview-template-avatar-badge-padding-right;
190
- }
191
-
192
- &.e-list-badge:not(.e-list-avatar) {
193
- padding-left: $listview-template-badgewithoutavatar-padding-left;
194
- padding-right: $listview-template-badgewithoutavatar-padding-right;
195
- }
196
-
197
- &:not(.e-list-multi-line) {
198
- .e-list-content {
199
- display: block;
200
- margin: 0;
201
- overflow: hidden;
202
- padding: $listview-template-item-padding;
203
- text-overflow: ellipsis;
204
- white-space: nowrap;
205
- }
206
- }
207
- }
208
-
209
- .e-list-item {
210
- &.e-list-item:hover .e-list-item-header {
211
- color: $listview-text-hover-color;
212
- }
213
-
214
- &.e-list-item:hover .e-list-content {
215
- color: $listview-text-hover-color;
216
- }
217
-
218
- &.e-selected .e-list-item-header {
219
- color: $listview-text-active-color;
220
- }
221
-
222
- &.e-selected .e-list-content {
223
- color: $listview-text-active-color;
224
- }
225
- }
226
- }
227
-
228
- &.e-rtl {
229
- &.e-list-template .e-list-wrapper {
230
-
231
- &.e-list-avatar {
232
- .e-avatar {
233
- left: inherit;
234
- right: $listview-template-avatar-left;
235
- }
236
- }
237
-
238
- &.e-list-avatar:not(.e-list-badge) {
239
- padding-left: $listview-template-avatar-padding-right;
240
- padding-right: $listview-template-avatar-padding-left;
241
- }
242
-
243
- &.e-list-avatar-right:not(.e-list-badge) {
244
- padding-left: $listview-template-avatar-rightposition-padding-right;
245
- padding-right: $listview-template-avatar-rightposition-padding-left;
246
-
247
- .e-avatar {
248
- left: $listview-template-avatar-rightposition-right;
249
- right: inherit;
250
- }
251
- }
252
-
253
- &.e-list-badge {
254
-
255
- .e-badge {
256
- left: $listview-template-badge-right;
257
- right: inherit;
258
- }
259
- }
260
-
261
- &.e-list-badge.e-list-avatar {
262
- padding-left: $listview-template-avatar-badge-padding-right;
263
- padding-right: $listview-template-avatar-badge-padding-left;
264
- }
265
-
266
- &.e-list-badge:not(.e-list-avatar) {
267
- padding-left: $listview-template-badgewithoutavatar-padding-right;
268
- padding-right: $listview-template-badgewithoutavatar-padding-left;
269
- }
270
- }
271
- }
272
- }
273
- }
1
+ @include export-module('listbox-theme') {
2
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
3
+ height: $listbox-filter-small-height;
4
+ }
5
+
6
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
7
+ height: $listbox-filter-bigger-height;
8
+ }
9
+
10
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
11
+ height: $listbox-filter-bigger-small-height;
12
+ }
13
+
14
+ #{&}.e-listbox-wrapper {
15
+ border: 1px solid $listbox-border-color;
16
+ font-family: $listview-font-family;
17
+ font-size: $listview-font-size;
18
+ @at-root {
19
+ & .e-list-header {
20
+ background-color: $listview-header-bg;
21
+ border-color: $listview-header-border;
22
+ color: $listview-header-text-color;
23
+ font-size: $listview-header-font-size;
24
+ }
25
+
26
+ &.e-filter-list .e-list-parent {
27
+ height: $listbox-filter-height;
28
+ }
29
+
30
+ & .e-icons {
31
+ color: $listview-icon-color;
32
+ }
33
+
34
+ & .e-list-item {
35
+ background-color: $listview-background;
36
+ border-bottom: $listview-border-bottom solid $listview-border-bottom-color;
37
+ border-left: $listview-border-left solid $listview-border-left-color;
38
+ border-right: $listview-border-right solid $listview-border-right-color;
39
+ border-top: $listview-border-top solid $listview-border-top-color;
40
+ color: $listview-text-color;
41
+ }
42
+
43
+ & .e-list-item:hover:not(.e-selected):not(.e-disabled),
44
+ & .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
45
+ background-color: $listview-item-hover-bg;
46
+ border-color: $listview-hover-border-color;
47
+ color: $listview-text-hover-color;
48
+ }
49
+
50
+ & .e-list-item.e-selected {
51
+ background-color: $listview-item-active-bg;
52
+ color: $listview-text-active-color;
53
+ }
54
+
55
+ & .e-list-item.e-selected.e-checklist {
56
+ background-color: $listview-background;
57
+ color: $listview-text-color;
58
+ }
59
+
60
+ & .e-list-item.e-focused,
61
+ & .e-list-item.e-focused.e-selected.e-checklist {
62
+ background-color: $listview-item-active-bg;
63
+ color: $listview-text-active-color;
64
+ }
65
+
66
+ & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
67
+ & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
68
+ background-color: $checkmark-bgcolor;
69
+ border-color: $checkmark-border-color;
70
+ color: $checkmark-color;
71
+ }
72
+
73
+ & .e-list-group-item {
74
+ background-color: $listview-groupheader-bg;
75
+ border-color: $listview-header-border;
76
+ color: $listview-groupheader-text-color;
77
+ font-size: $listview-groupheader-font-size;
78
+ }
79
+
80
+ & .e-selectall-parent {
81
+ background-color: $listview-background;
82
+ border-bottom: 1px solid $select-all-border-color;
83
+ color: $listview-text-color;
84
+ }
85
+
86
+ & .e-sortableclone.e-ripple .e-ripple-element {
87
+ background-color: transparent;
88
+ }
89
+ }
90
+
91
+ &.e-list-template {
92
+
93
+ .e-list-wrapper {
94
+ height: inherit;
95
+ position: relative;
96
+
97
+ &:not(.e-list-multi-line) {
98
+ padding: $listview-template-padding;
99
+ }
100
+
101
+ &.e-list-multi-line {
102
+ padding: $listview-template-multiline-padding;
103
+
104
+ .e-list-item-header {
105
+ color: $listview-template-multiline-header-color;
106
+ display: block;
107
+ font-size: $listview-template-multiline-header-font-size;
108
+ font-weight: 500;
109
+ margin: 0;
110
+ overflow: hidden;
111
+ padding: $listview-template-multiline-header-padding;
112
+ text-overflow: ellipsis;
113
+ white-space: nowrap;
114
+ }
115
+
116
+ .e-list-content {
117
+ color: $listview-template-multiline-content-color;
118
+ display: block;
119
+ font-size: $listview-template-multiline-content-font-size;
120
+ margin: 0;
121
+ padding: $listview-template-multiline-content-padding;
122
+ word-wrap: break-word;
123
+ }
124
+
125
+ .e-list-content:not(.e-text-overflow) {
126
+ overflow: hidden;
127
+ text-overflow: ellipsis;
128
+ white-space: nowrap;
129
+ }
130
+ }
131
+
132
+ &.e-list-avatar {
133
+ .e-avatar {
134
+ height: $listview-template-avatar-size;
135
+ left: $listview-template-avatar-left;
136
+ position: absolute;
137
+ top: $listview-template-avatar-top;
138
+ width: $listview-template-avatar-size;
139
+ }
140
+ }
141
+
142
+ &.e-list-avatar:not(.e-list-badge) {
143
+ padding-left: $listview-template-avatar-padding-left;
144
+ padding-right: $listview-template-avatar-padding-right;
145
+ }
146
+
147
+ &.e-list-avatar-right:not(.e-list-badge) {
148
+ padding-left: $listview-template-avatar-rightposition-padding-left;
149
+ padding-right: $listview-template-avatar-rightposition-padding-right;
150
+
151
+ .e-avatar {
152
+ height: $listview-template-avatar-size;
153
+ position: absolute;
154
+ right: $listview-template-avatar-rightposition-right;
155
+ top: $listview-template-avatar-top;
156
+ width: $listview-template-avatar-size;
157
+ }
158
+ }
159
+
160
+ &.e-list-multi-line.e-list-avatar {
161
+ .e-avatar {
162
+ top: $listview-template-multiline-avatar-top;
163
+ }
164
+ }
165
+
166
+ &.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) {
167
+ .e-avatar {
168
+ top: $listview-template-multiline-avatar-top;
169
+ }
170
+ }
171
+
172
+ &.e-list-badge {
173
+
174
+ .e-badge {
175
+ font-size: $listview-template-badge-font-size;
176
+ height: $listview-template-badge-height;
177
+ line-height: $listview-template-badge-line-height;
178
+ padding: 0;
179
+ position: absolute;
180
+ right: $listview-template-badge-right;
181
+ top: 50%;
182
+ transform: translateY(-50%);
183
+ width: $listview-template-badge-width;
184
+ }
185
+ }
186
+
187
+ &.e-list-badge.e-list-avatar {
188
+ padding-left: $listview-template-avatar-badge-padding-left;
189
+ padding-right: $listview-template-avatar-badge-padding-right;
190
+ }
191
+
192
+ &.e-list-badge:not(.e-list-avatar) {
193
+ padding-left: $listview-template-badgewithoutavatar-padding-left;
194
+ padding-right: $listview-template-badgewithoutavatar-padding-right;
195
+ }
196
+
197
+ &:not(.e-list-multi-line) {
198
+ .e-list-content {
199
+ display: block;
200
+ margin: 0;
201
+ overflow: hidden;
202
+ padding: $listview-template-item-padding;
203
+ text-overflow: ellipsis;
204
+ white-space: nowrap;
205
+ }
206
+ }
207
+ }
208
+
209
+ .e-list-item {
210
+ &.e-list-item:hover .e-list-item-header {
211
+ color: $listview-text-hover-color;
212
+ }
213
+
214
+ &.e-list-item:hover .e-list-content {
215
+ color: $listview-text-hover-color;
216
+ }
217
+
218
+ &.e-selected .e-list-item-header {
219
+ color: $listview-text-active-color;
220
+ }
221
+
222
+ &.e-selected .e-list-content {
223
+ color: $listview-text-active-color;
224
+ }
225
+ }
226
+ }
227
+
228
+ &.e-rtl {
229
+ &.e-list-template .e-list-wrapper {
230
+
231
+ &.e-list-avatar {
232
+ .e-avatar {
233
+ left: inherit;
234
+ right: $listview-template-avatar-left;
235
+ }
236
+ }
237
+
238
+ &.e-list-avatar:not(.e-list-badge) {
239
+ padding-left: $listview-template-avatar-padding-right;
240
+ padding-right: $listview-template-avatar-padding-left;
241
+ }
242
+
243
+ &.e-list-avatar-right:not(.e-list-badge) {
244
+ padding-left: $listview-template-avatar-rightposition-padding-right;
245
+ padding-right: $listview-template-avatar-rightposition-padding-left;
246
+
247
+ .e-avatar {
248
+ left: $listview-template-avatar-rightposition-right;
249
+ right: inherit;
250
+ }
251
+ }
252
+
253
+ &.e-list-badge {
254
+
255
+ .e-badge {
256
+ left: $listview-template-badge-right;
257
+ right: inherit;
258
+ }
259
+ }
260
+
261
+ &.e-list-badge.e-list-avatar {
262
+ padding-left: $listview-template-avatar-badge-padding-right;
263
+ padding-right: $listview-template-avatar-badge-padding-left;
264
+ }
265
+
266
+ &.e-list-badge:not(.e-list-avatar) {
267
+ padding-left: $listview-template-badgewithoutavatar-padding-right;
268
+ padding-right: $listview-template-badgewithoutavatar-padding-left;
269
+ }
270
+ }
271
+ }
272
+ }
273
+ }
@@ -1,25 +1,25 @@
1
- @include export-module('list-box-bootstrap-dark-icons') {
2
- .e-listbox-tool .e-moveup::before {
3
- content: '\e651';
4
- }
5
-
6
- .e-listbox-tool .e-movedown::before {
7
- content: '\e652';
8
- }
9
-
10
- .e-listbox-tool .e-moveto::before {
11
- content: '\e653';
12
- }
13
-
14
- .e-listbox-tool .e-movefrom::before {
15
- content: '\e654';
16
- }
17
-
18
- .e-listbox-tool .e-moveallto::before {
19
- content: '\e655';
20
- }
21
-
22
- .e-listbox-tool .e-moveallfrom::before {
23
- content: '\e656';
24
- }
25
- }
1
+ @include export-module('list-box-bootstrap-dark-icons') {
2
+ .e-listbox-tool .e-moveup::before {
3
+ content: '\e651';
4
+ }
5
+
6
+ .e-listbox-tool .e-movedown::before {
7
+ content: '\e652';
8
+ }
9
+
10
+ .e-listbox-tool .e-moveto::before {
11
+ content: '\e653';
12
+ }
13
+
14
+ .e-listbox-tool .e-movefrom::before {
15
+ content: '\e654';
16
+ }
17
+
18
+ .e-listbox-tool .e-moveallto::before {
19
+ content: '\e655';
20
+ }
21
+
22
+ .e-listbox-tool .e-moveallfrom::before {
23
+ content: '\e656';
24
+ }
25
+ }
@@ -1,25 +1,25 @@
1
- @include export-module('list-box-bootstrap-icons') {
2
- .e-listbox-tool .e-moveup::before {
3
- content: '\e651';
4
- }
5
-
6
- .e-listbox-tool .e-movedown::before {
7
- content: '\e652';
8
- }
9
-
10
- .e-listbox-tool .e-moveto::before {
11
- content: '\e653';
12
- }
13
-
14
- .e-listbox-tool .e-movefrom::before {
15
- content: '\e654';
16
- }
17
-
18
- .e-listbox-tool .e-moveallto::before {
19
- content: '\e655';
20
- }
21
-
22
- .e-listbox-tool .e-moveallfrom::before {
23
- content: '\e656';
24
- }
25
- }
1
+ @include export-module('list-box-bootstrap-icons') {
2
+ .e-listbox-tool .e-moveup::before {
3
+ content: '\e651';
4
+ }
5
+
6
+ .e-listbox-tool .e-movedown::before {
7
+ content: '\e652';
8
+ }
9
+
10
+ .e-listbox-tool .e-moveto::before {
11
+ content: '\e653';
12
+ }
13
+
14
+ .e-listbox-tool .e-movefrom::before {
15
+ content: '\e654';
16
+ }
17
+
18
+ .e-listbox-tool .e-moveallto::before {
19
+ content: '\e655';
20
+ }
21
+
22
+ .e-listbox-tool .e-moveallfrom::before {
23
+ content: '\e656';
24
+ }
25
+ }