@syncfusion/ej2-dropdowns 24.2.9 → 25.1.35

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 (92) hide show
  1. package/CHANGELOG.md +23 -158
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +1996 -513
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +2012 -512
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/auto-complete/auto-complete-model.d.ts +3 -1
  14. package/src/auto-complete/auto-complete.d.ts +2 -0
  15. package/src/auto-complete/auto-complete.js +51 -6
  16. package/src/combo-box/combo-box-model.d.ts +10 -1
  17. package/src/combo-box/combo-box.d.ts +10 -2
  18. package/src/combo-box/combo-box.js +55 -23
  19. package/src/common/interface.d.ts +32 -0
  20. package/src/common/virtual-scroll.d.ts +1 -3
  21. package/src/common/virtual-scroll.js +157 -27
  22. package/src/drop-down-base/drop-down-base-model.d.ts +1 -1
  23. package/src/drop-down-base/drop-down-base.d.ts +64 -5
  24. package/src/drop-down-base/drop-down-base.js +241 -24
  25. package/src/drop-down-list/drop-down-list-model.d.ts +10 -1
  26. package/src/drop-down-list/drop-down-list.d.ts +16 -50
  27. package/src/drop-down-list/drop-down-list.js +150 -196
  28. package/src/drop-down-tree/drop-down-tree-model.d.ts +16 -12
  29. package/src/drop-down-tree/drop-down-tree.d.ts +13 -3
  30. package/src/drop-down-tree/drop-down-tree.js +55 -49
  31. package/src/global.js +1 -1
  32. package/src/list-box/list-box.js +9 -4
  33. package/src/mention/mention.d.ts +2 -0
  34. package/src/mention/mention.js +16 -8
  35. package/src/multi-select/checkbox-selection.js +8 -2
  36. package/src/multi-select/float-label.d.ts +5 -5
  37. package/src/multi-select/index.d.ts +1 -0
  38. package/src/multi-select/index.js +1 -0
  39. package/src/multi-select/interface.d.ts +1 -0
  40. package/src/multi-select/multi-select-model.d.ts +17 -2
  41. package/src/multi-select/multi-select.d.ts +34 -4
  42. package/src/multi-select/multi-select.js +1271 -173
  43. package/styles/auto-complete/_bds-definition.scss +2 -0
  44. package/styles/bootstrap-dark.css +7 -1
  45. package/styles/bootstrap.css +7 -1
  46. package/styles/bootstrap4.css +2 -1
  47. package/styles/bootstrap5-dark.css +2 -1
  48. package/styles/bootstrap5.css +2 -1
  49. package/styles/combo-box/_bds-definition.scss +2 -0
  50. package/styles/drop-down-base/_bds-definition.scss +134 -0
  51. package/styles/drop-down-list/_bds-definition.scss +134 -0
  52. package/styles/drop-down-list/icons/_bds.scss +14 -0
  53. package/styles/drop-down-tree/_bds-definition.scss +61 -0
  54. package/styles/drop-down-tree/icons/_bds.scss +11 -0
  55. package/styles/fabric-dark.css +3 -1
  56. package/styles/fabric.css +3 -1
  57. package/styles/fluent-dark.css +7 -1
  58. package/styles/fluent.css +7 -1
  59. package/styles/highcontrast-light.css +3 -1
  60. package/styles/highcontrast.css +3 -1
  61. package/styles/list-box/_bds-definition.scss +136 -0
  62. package/styles/list-box/icons/_bds.scss +25 -0
  63. package/styles/material-dark.css +2 -1
  64. package/styles/material.css +2 -1
  65. package/styles/material3-dark.css +2 -1
  66. package/styles/material3.css +2 -1
  67. package/styles/mention/_bds-definition.scss +1 -0
  68. package/styles/multi-select/_bds-definition.scss +235 -0
  69. package/styles/multi-select/_bootstrap-dark-definition.scss +4 -0
  70. package/styles/multi-select/_bootstrap-definition.scss +4 -0
  71. package/styles/multi-select/_fluent-definition.scss +5 -0
  72. package/styles/multi-select/_layout.scss +8 -1
  73. package/styles/multi-select/bootstrap-dark.css +7 -1
  74. package/styles/multi-select/bootstrap.css +7 -1
  75. package/styles/multi-select/bootstrap4.css +2 -1
  76. package/styles/multi-select/bootstrap5-dark.css +2 -1
  77. package/styles/multi-select/bootstrap5.css +2 -1
  78. package/styles/multi-select/fabric-dark.css +3 -1
  79. package/styles/multi-select/fabric.css +3 -1
  80. package/styles/multi-select/fluent-dark.css +7 -1
  81. package/styles/multi-select/fluent.css +7 -1
  82. package/styles/multi-select/highcontrast-light.css +3 -1
  83. package/styles/multi-select/highcontrast.css +3 -1
  84. package/styles/multi-select/icons/_bds.scss +26 -0
  85. package/styles/multi-select/material-dark.css +2 -1
  86. package/styles/multi-select/material.css +2 -1
  87. package/styles/multi-select/material3-dark.css +2 -1
  88. package/styles/multi-select/material3.css +2 -1
  89. package/styles/multi-select/tailwind-dark.css +2 -1
  90. package/styles/multi-select/tailwind.css +2 -1
  91. package/styles/tailwind-dark.css +2 -1
  92. package/styles/tailwind.css +2 -1
@@ -0,0 +1,25 @@
1
+ @include export-module('list-box-bds-icons') {
2
+ .e-listbox-tool .e-moveup::before {
3
+ content: '\e776';
4
+ }
5
+
6
+ .e-listbox-tool .e-movedown::before {
7
+ content: '\e729';
8
+ }
9
+
10
+ .e-listbox-tool .e-moveto::before {
11
+ content: '\e748';
12
+ }
13
+
14
+ .e-listbox-tool .e-movefrom::before {
15
+ content: '\e765';
16
+ }
17
+
18
+ .e-listbox-tool .e-moveallto::before {
19
+ content: '\e7a9';
20
+ }
21
+
22
+ .e-listbox-tool .e-moveallfrom::before {
23
+ content: '\e744';
24
+ }
25
+ }
@@ -2388,7 +2388,8 @@ ejs-dropdownlist {
2388
2388
  margin-top: -3em;
2389
2389
  }
2390
2390
 
2391
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2391
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
2392
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2392
2393
  margin-top: -3em;
2393
2394
  }
2394
2395
 
@@ -2443,7 +2443,8 @@ ejs-dropdownlist {
2443
2443
  margin-top: -3em;
2444
2444
  }
2445
2445
 
2446
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2446
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
2447
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2447
2448
  margin-top: -3em;
2448
2449
  }
2449
2450
 
@@ -2204,7 +2204,8 @@ ejs-dropdownlist {
2204
2204
  height: 38px;
2205
2205
  }
2206
2206
 
2207
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2207
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
2208
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2208
2209
  margin-top: -2.5em;
2209
2210
  }
2210
2211
 
@@ -2260,7 +2260,8 @@ ejs-dropdownlist {
2260
2260
  height: 38px;
2261
2261
  }
2262
2262
 
2263
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2263
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
2264
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2264
2265
  margin-top: -2.5em;
2265
2266
  }
2266
2267
 
@@ -0,0 +1 @@
1
+ /* stylelint-disable-line no-empty-source */
@@ -0,0 +1,235 @@
1
+ $ddl-chip-mobile-close-font: 16px !default;
2
+ $ddl-multiselect-skin-name: $skin-name !default;
3
+ $ddl-delim-font-size: $text-sm !default;
4
+ $ddl-rtl-wrapper: 0 2px 0 32px !default;
5
+ $ddl-chip-mobile-bg: $primary !default;
6
+ $ddl-search-wrapper-width: calc(100% - 32px) !default;
7
+ $ddl-bigger-search-wrapper-width: calc(100% - 50px) !default;
8
+ $ddl-bigger-small-search-wrapper-width: calc(100% - 32px) !default;
9
+ $ddl-small-search-wrapper-width: calc(100% - 30px) !default;
10
+ $ddl-popup-shadow-value: $shadow-lg !default;
11
+ $ddl-remains-padding-left: 16px !default;
12
+ $ddl-chip-margin: 3px !default;
13
+ $ddl-chip-margin-bigger: 3px !default;
14
+ $ddl-chip-radius: 6px !default;
15
+ $ddl-chip-content-padding: 0 4px 0 0 !default;
16
+ $ddl-chip-mobile-content-padding: 8px 4px 8px 0 !default;
17
+ $ddl-rtl-chip-mobile-content-padding: 8px 0 8px 4px !default;
18
+ $ddl-chip-padding: 0 4px 0 8px !default;
19
+ $ddl-chip-close-top: 0 !default;
20
+ $ddl-chip-close-left: 0 !default;
21
+ $ddl-chip-close-margin: 0 0 0 !default;
22
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
23
+ $ddl-chip-close-square: $text-base !default;
24
+ $ddl-chip-close-width: $text-base !default;
25
+ $ddl-chip-hooker-square: 28px !default;
26
+ $ddl-chip-hooker-width: 28px !default;
27
+ $ddl-chip-close-font: $text-base !default;
28
+ $ddl-chip-height: 22px !default;
29
+ $ddl-chip-mobile-height: 30px !default;
30
+ $ddl-chip-collection-top: 0 !default;
31
+ $ddl-input-height: 28px !default;
32
+ $ddl-input-bigger-height: 36px !default;
33
+ $ddl-input-mob-height: 30px !default;
34
+ $ddl-control-height: 28px !default;
35
+ $ddl-control-bigger-height: 36px !default;
36
+ $ddl-delimviewheight: 28px !default;
37
+ $ddl-delimviewheight-bigger: 36px !default;
38
+ $ddl-closer-hooker-font: $text-lg !default;
39
+ $ddl-closer-hooker-font-bigger: 22px !default;
40
+ $ddl-closer-hooker-font-small: $text-base !default;
41
+ $ddl-closer-hooker-font-bigger-small: $text-xl !default;
42
+ $ddl-chip-font-family: $font-family !default;
43
+ $ddl-closer-margin-top: -1.65em !default;
44
+ $ddl-closer-margin-top-bigger: -1.62em !default;
45
+ $ddl-icon-margin-top: -1.3em !default;
46
+ $ddl-clear-margin-top: -2em !default;
47
+ $ddl-icon-margin-top-bigger: -1.3em !default;
48
+ $ddl-small-ddl-icon-top: -1.3em !default;
49
+ $ddl-bigger-small-ddl-icon-top: -1.3em !default;
50
+ $ddl-chip-mobile-radius: 6px !default;
51
+ $ddl-chip-sel-mobile-height: 40px !default;
52
+ $ddl-chip-selected-padding: 12px 4px 11px 0 !default;
53
+ $ddl-chip-mobile-close-margin: 3px 0 0 !default;
54
+ $ddl-chip-close-mob-margin: 8px 0 0 !default;
55
+ $ddl-closer-hooker-top: 100% !default;
56
+ $ddl-chip-hooker-right: 5px !default;
57
+ $ddl-chip-mob-left: 0 !default;
58
+ $ddl-chip-mob-padding: 0 0 0 16px !default;
59
+ $ddl-chip-font-size: $text-sm !default;
60
+ $ddl-chip-bigger-font-size: $text-base !default;
61
+ $ddl-chip-small-font-size: $text-xs !default;
62
+ $ddl-chip-bigger-small-font-size: $text-sm !default;
63
+ $ddl-delim-bigger-font-size: $text-base !default;
64
+ $ddl-rtl-chip-close-left: 0 !default;
65
+ $ddl-rtl-chip-content-padding: 5px 4px !default;
66
+ $ddl-rtl-mob-chip-content-padding: 8px 4px !default;
67
+ $ddl-rtl-mob-chip-content-margin: 3px !default;
68
+ $ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
69
+ $ddl-rtl-chip-padding: 0 8px 0 4px !default;
70
+ $ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
71
+ $ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
72
+ $ddl-rtl-hooker-left: -4px !default;
73
+ $ddl-chip-close-mob-top: 0 !default;
74
+ $ddl-chip-close-mobile-top: 0 !default;
75
+ $ddl-control-placholder-padding: 0 32px 0 0 !default;
76
+ $ddl-overall-close-top: 6px !default;
77
+ $ddl-overall-close-left: 6px !default;
78
+ $ddl-sel-chip-close-mobile-top: 0 !default;
79
+ $ddl-sel-chip-close-mobile-left: 12px !default;
80
+ $ddl-chip-sel-mobile-close-height: 40px !default;
81
+ $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
82
+ $ddl-input-text-indent: 10px !default;
83
+ $ddl-input-placeholder-padding: 4px 0 4px 12px !default;
84
+ $ddl-rtl-chip-sel-close-left: -12px !default;
85
+ $ddl-popup-active-focus-border-width: 1px !default;
86
+ $ddl-popup-active-focus-shadow-item: none !default;
87
+ $ddl-popup-active-border-width: 1px !default;
88
+ $ddl-delim-text-indent: 10px !default;
89
+ $ddl-delimview-bigger-padding-left: $ddl-delim-text-indent !default;
90
+ $ddl-popup-normal-border-width: 0 !default;
91
+ $ddl-check-right: 12px !default;
92
+ $ddl-check-left: 12px !default;
93
+ $ddl-bigger-select-all-height: 36px !default;
94
+ $ddl-select-all-height: 30px !default;
95
+ $ddl-back-icon-margin: 2.5px 10px 0 -52px !default;
96
+ $ddl-back-icon-padding: 0 8px !default;
97
+ $ddl-filterbar-padding: 0 !default;
98
+ $ddl-bigger-filterbar-padding: 0 !default;
99
+ $ddl-delimviewheight-check-bigger: 36px !default;
100
+ $ddl-popup-reorder-border: $border-light !default;
101
+ $ddl-check-right-margin: 8px !default;
102
+ $ddl-bigger-check-right-margin: 12px !default;
103
+ $ddl-selectall-font-size: $text-sm !default;
104
+ $ddl-bigger-selectall-font-size: $text-base !default;
105
+ $ddl-small-selectall-font-size: $text-xs !default;
106
+ $ddl-bigger-small-selectall-font-size: $text-sm !default;
107
+ $ddl-close-icon-left: 32px !default;
108
+ $ddl-check-icon-top: 0 !default;
109
+ $ddl-bigger-check-right: 16px !default;
110
+ $ddl-small-check-right: 8px !default;
111
+ $ddl-bigger-small-check-right: 14px !default;
112
+ $ddl-delim-text-padding-right: 6px !default;
113
+ $ddl-list-rtl-padding-right: 15px !default;
114
+ $ddl-close-rtl-icon-left: 32px !default;
115
+ $ddl-chip-close-rtl-left: -7px !default;
116
+ $ddl-multiselect-group-list-item-rtl-padding-right: 25px !default;
117
+ $ddl-bigger-multiselect-group-list-item-rtl-padding-right: 25px !default;
118
+ $ddl-multiselect-group-list-group-item-padding-left: 16px !default;
119
+ $ddl-multiselect-group-checkbox-wrapper-padding-left: 14px !default;
120
+ $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left: $ddl-multiselect-group-checkbox-wrapper-padding-left !default;
121
+ $ddl-multiselect-group-list-group-item-rtl-padding-right: 16px !default;
122
+ $ddl-multiselect-label-position: 15px !default;
123
+ $ddl-multiselect-filled-floatlabel-fontsize: 14px !default;
124
+ $ddl-multiselect-filled-float-input-min-height: 28px !default;
125
+ $ddl-multiselect-filled-input-min-height: 39px !default;
126
+ $ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
127
+ $ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
128
+ $multiselect-disable-font-color: $content-text-color-disabled !default;
129
+ $ddl-bigger-clear-icon-height: 36px !default;
130
+ $ddl-bigger-clear-icon-width: 40px !default;
131
+ $ddl-small-clear-icon-height: 24px !default;
132
+ $ddl-small-clear-icon-width: 28px !default;
133
+ $ddl-bigger-small-clear-icon-height: 32px !default;
134
+ $ddl-bigger-small-clear-icon-width: 32px !default;
135
+ $ddl-bigger-chip-close-square: $text-xl !default;
136
+ $ddl-bigger-chip-close-width: $text-xl !default;
137
+ $ddl-bigger-chip-close-font: $text-xl !default;
138
+
139
+ // Small size
140
+ $ddl-select-all-height-small: 24px !default;
141
+ $ddl-small-chip-height: 18px !default;
142
+ $ddl-chip-small-font-size: $text-xs !default;
143
+ $ddl-small-chip-close-square: $text-sm !default;
144
+ $ddl-small-chip-close-width: $text-sm !default;
145
+ $ddl-small-chip-close-font: $text-sm !default;
146
+ $ddl-control-small-height: 24px !default;
147
+ $ddl-small-input-height: 24px !default;
148
+ $ddl-delim-small-font-size: $text-xs !default;
149
+ $ddl-small-closer-margin-top: -1.65em !default;
150
+ $ddl-chip-close-hooker-small-left: 6px !default;
151
+ $ddl-chip-close-hooker-small-bigger-left: 6px !default;
152
+ $ddl-delimviewheight-small: 24px !default;
153
+ $ddl-multiselect-filled-input-min-height-small: 32px !default;
154
+ $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
155
+ $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
156
+ $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
157
+
158
+ // Touch
159
+ $ddl-multiselect-filled-input-min-height-bigger: 52px !default;
160
+ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
161
+ $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
162
+
163
+ // Touch Small size
164
+ $ddl-select-all-height-bigger-small: 32px !default;
165
+ $ddl-bigger-small-chip-height: 26px !default;
166
+ $ddl-bigger-small-chip-close-square: $text-lg !default;
167
+ $ddl-bigger-small-chip-close-width: $text-lg !default;
168
+ $ddl-bigger-small-chip-close-font: $text-lg !default;
169
+ $ddl-control-bigger-small-height: 28px !default;
170
+ $ddl-bigger-small-input-height: 32px !default;
171
+ $ddl-delim-bigger-small-font-size: $text-sm !default;
172
+ $ddl-delimviewheight-bigger-small: 32px !default;
173
+ $ddl-closer-margin-top-bigger-small: -1.64em !default;
174
+
175
+ // color
176
+
177
+ $ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
178
+ $ddl-chip-selected-shadow-value: 0 2px 3px 1px $ddl-list-box-shadow-color !default;
179
+ $ddl-chip-mobile-font: $content-text-color !default;
180
+ $ddl-chip-bg-color: $content-bg-color-alt3 !default;
181
+ $ddl-chip-hover-bg-color: $content-bg-color-alt4 !default;
182
+ $ddl-chip-hover-font-color: $content-text-color-hover !default;
183
+ $ddl-sel-hover-chip-bg-color: $content-bg-color-alt5 !default;
184
+ $ddl-sel-chip-hover-font-color: $content-text-color-hover !default;
185
+ $ddl-chip-font-color: $content-text-color !default;
186
+ $ddl-chip-close: $icon-color !default;
187
+ $ddl-sel-chip-font-color: $content-text-color !default;
188
+ $ddl-sel-chip-close: $content-text-color !default;
189
+ $ddl-sel-chip-color: $content-text-color !default;
190
+ $ddl-sel-chip-bg-color: $content-bg-color-alt5 !default;
191
+ $ddl-remains-font-color: $content-text-color !default;
192
+ $ddl-popup-active-focus-bg-color: $content-bg-color-selected !default;
193
+ $ddl-popup-active-focus-font-color: $content-text-color-selected !default;
194
+ $ddl-popup-active-focus-border-color: transparent !default;
195
+ $ddl-input-placeholder: $placeholder-text-color !default;
196
+ $ddl-popup-active-border-color: $border-selected !default;
197
+ $ddl-multi-list-default-font-color: $content-text-color !default;
198
+ $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
199
+ $ddl-delim-font-color: $content-text-color !default;
200
+ $ddl-close-icon-color: $icon-color !default;
201
+ $ddl-close-icon-hover-color: $icon-color-hover !default;
202
+
203
+ @include export-module('multiselect-bds') {
204
+ .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
205
+ line-height: 30px;
206
+ top: 0;
207
+ }
208
+
209
+ .e-multiselect .e-input-group-icon.e-ddl-icon {
210
+ border-radius: 0 4px 4px 0;
211
+ border-right-width: 0;
212
+ }
213
+
214
+ .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
215
+ border-left-width: 0;
216
+ border-radius: 4px 0 0 4px;
217
+ border-right-width: 0;
218
+ }
219
+
220
+ .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
221
+ height: 32px;
222
+ width: 32px;
223
+ }
224
+
225
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
226
+ height: $ddl-chip-hooker-square;
227
+ width: $ddl-chip-hooker-square;
228
+ }
229
+
230
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
231
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
232
+ color: $content-text-color;
233
+ height: 100%;
234
+ }
235
+ }
@@ -200,4 +200,8 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
200
200
  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
201
201
  color: $grey-light-font;
202
202
  }
203
+
204
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
205
+ margin-top: -3.2em;
206
+ }
203
207
  }
@@ -189,4 +189,8 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
189
189
  height: $ddl-chip-hooker-square;
190
190
  width: $ddl-chip-hooker-square;
191
191
  }
192
+
193
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
194
+ margin-top: -3.2em;
195
+ }
192
196
  }
@@ -238,4 +238,9 @@ $ddl-small-clear-icon-width: 12px !default;
238
238
  .e-multiselect .e-input-group-icon.e-ddl-icon {
239
239
  border-left-width: 0;
240
240
  }
241
+
242
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
243
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
244
+ margin-top: -1.5em;
245
+ }
241
246
  }
@@ -466,14 +466,21 @@
466
466
  }
467
467
  }
468
468
 
469
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
469
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
470
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
470
471
  margin-top: $ddl-closer-margin-top-bigger;
471
472
  @if $ddl-multiselect-skin-name == 'FluentUI' {
472
473
  margin-top: $ddl-bigger-clear-margin-top;
473
474
  }
475
+ @if $ddl-multiselect-skin-name == 'bootstrap' {
476
+ margin-top: -3.7em;
477
+ }
474
478
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
475
479
  margin-top: -2.15em;
476
480
  }
481
+ @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
482
+ margin-top: -3.2em;
483
+ }
477
484
  @if $ddl-multiselect-skin-name == 'tailwind' {
478
485
  height: $ddl-bigger-clear-icon-height;
479
486
  margin-top: $ddl-clear-margin-top;
@@ -62,6 +62,10 @@
62
62
  color: #fff;
63
63
  }
64
64
 
65
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
66
+ margin-top: -3.2em;
67
+ }
68
+
65
69
  .e-multiselect.e-input-group .e-ddl-icon::before {
66
70
  content: "\e969";
67
71
  font-family: "e-icons";
@@ -362,8 +366,10 @@
362
366
  margin-top: -4em;
363
367
  }
364
368
 
365
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
369
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
370
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
366
371
  margin-top: -4em;
372
+ margin-top: -3.7em;
367
373
  }
368
374
 
369
375
  .e-multi-select-wrapper input[type=text] {
@@ -55,6 +55,10 @@
55
55
  width: 40px;
56
56
  }
57
57
 
58
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
59
+ margin-top: -3.2em;
60
+ }
61
+
58
62
  .e-multiselect.e-input-group .e-ddl-icon::before {
59
63
  content: "\e969";
60
64
  font-family: "e-icons";
@@ -355,8 +359,10 @@
355
359
  margin-top: -4em;
356
360
  }
357
361
 
358
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
362
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
363
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
359
364
  margin-top: -4em;
365
+ margin-top: -3.7em;
360
366
  }
361
367
 
362
368
  .e-multi-select-wrapper input[type=text] {
@@ -447,7 +447,8 @@
447
447
  margin-top: -3.5em;
448
448
  }
449
449
 
450
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
450
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
451
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
451
452
  margin-top: -3.5em;
452
453
  }
453
454
 
@@ -417,7 +417,8 @@
417
417
  margin-top: -2.25em;
418
418
  }
419
419
 
420
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
420
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
421
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
421
422
  margin-top: -2.25em;
422
423
  margin-top: -2.15em;
423
424
  }
@@ -417,7 +417,8 @@
417
417
  margin-top: -2.25em;
418
418
  }
419
419
 
420
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
420
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
421
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
421
422
  margin-top: -2.25em;
422
423
  margin-top: -2.15em;
423
424
  }
@@ -355,8 +355,10 @@
355
355
  margin-top: -3.5em;
356
356
  }
357
357
 
358
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
358
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
359
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
359
360
  margin-top: -3.5em;
361
+ margin-top: -3.2em;
360
362
  }
361
363
 
362
364
  .e-multi-select-wrapper input[type=text] {
@@ -350,8 +350,10 @@
350
350
  margin-top: -3.5em;
351
351
  }
352
352
 
353
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
353
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
354
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
354
355
  margin-top: -3.5em;
356
+ margin-top: -3.2em;
355
357
  }
356
358
 
357
359
  .e-multi-select-wrapper input[type=text] {
@@ -92,6 +92,11 @@
92
92
  border-left-width: 0;
93
93
  }
94
94
 
95
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
96
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
97
+ margin-top: -1.5em;
98
+ }
99
+
95
100
  .e-multiselect.e-input-group .e-ddl-icon::before {
96
101
  content: "\e729";
97
102
  font-family: "e-icons";
@@ -457,7 +462,8 @@
457
462
  font-size: 14px;
458
463
  }
459
464
 
460
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
465
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
466
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
461
467
  margin-top: -2.7em;
462
468
  margin-top: -2.25em;
463
469
  }
@@ -92,6 +92,11 @@
92
92
  border-left-width: 0;
93
93
  }
94
94
 
95
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
96
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
97
+ margin-top: -1.5em;
98
+ }
99
+
95
100
  .e-multiselect.e-input-group .e-ddl-icon::before {
96
101
  content: "\e729";
97
102
  font-family: "e-icons";
@@ -457,7 +462,8 @@
457
462
  font-size: 14px;
458
463
  }
459
464
 
460
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
465
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
466
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
461
467
  margin-top: -2.7em;
462
468
  margin-top: -2.25em;
463
469
  }
@@ -462,8 +462,10 @@
462
462
  margin-top: -3.5em;
463
463
  }
464
464
 
465
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
465
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
466
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
466
467
  margin-top: -3.5em;
468
+ margin-top: -3.2em;
467
469
  }
468
470
 
469
471
  .e-multi-select-wrapper input[type=text] {
@@ -469,8 +469,10 @@
469
469
  margin-top: -3.5em;
470
470
  }
471
471
 
472
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
472
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
473
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
473
474
  margin-top: -3.5em;
475
+ margin-top: -3.2em;
474
476
  }
475
477
 
476
478
  .e-multi-select-wrapper input[type=text] {
@@ -0,0 +1,26 @@
1
+ @include export-module('multiselect-bds-icons') {
2
+ .e-multiselect.e-input-group .e-ddl-icon::before {
3
+ content: '\e729';
4
+ font-family: 'e-icons';
5
+ }
6
+
7
+ .e-multi-select-wrapper .e-chips .e-chips-close::before {
8
+ content: '\e7e7';
9
+ cursor: pointer;
10
+ left: $ddl-chip-close-left;
11
+ position: relative;
12
+ top: $ddl-chip-close-top;
13
+ }
14
+
15
+ .e-multi-select-wrapper .e-close-hooker::before {
16
+ content: '\e7e7';
17
+ cursor: pointer;
18
+ left: $ddl-overall-close-left;
19
+ position: relative;
20
+ top: $ddl-overall-close-top;
21
+ }
22
+
23
+ .e-multiselect.e-input-group .e-ddl-disable-icon::before {
24
+ content: '';
25
+ }
26
+ }
@@ -895,7 +895,8 @@
895
895
  margin-top: -3em;
896
896
  }
897
897
 
898
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
898
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
899
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
899
900
  margin-top: -3em;
900
901
  }
901
902
 
@@ -903,7 +903,8 @@
903
903
  margin-top: -3em;
904
904
  }
905
905
 
906
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
906
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
907
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
907
908
  margin-top: -3em;
908
909
  }
909
910
 
@@ -995,7 +995,8 @@
995
995
  height: 38px;
996
996
  }
997
997
 
998
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
998
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
999
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
999
1000
  margin-top: -2.5em;
1000
1001
  }
1001
1002
 
@@ -1051,7 +1051,8 @@
1051
1051
  height: 38px;
1052
1052
  }
1053
1053
 
1054
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1054
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1055
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1055
1056
  margin-top: -2.5em;
1056
1057
  }
1057
1058
 
@@ -408,7 +408,8 @@
408
408
  width: 40px;
409
409
  }
410
410
 
411
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
411
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
412
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
412
413
  margin-top: -1.62em;
413
414
  height: 36px;
414
415
  margin-top: -2em;
@@ -408,7 +408,8 @@
408
408
  width: 40px;
409
409
  }
410
410
 
411
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
411
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
412
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
412
413
  margin-top: -1.62em;
413
414
  height: 36px;
414
415
  margin-top: -2em;
@@ -1665,7 +1665,8 @@ ejs-dropdownlist {
1665
1665
  width: 40px;
1666
1666
  }
1667
1667
 
1668
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1668
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1669
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1669
1670
  margin-top: -1.62em;
1670
1671
  height: 36px;
1671
1672
  margin-top: -2em;
@@ -1665,7 +1665,8 @@ ejs-dropdownlist {
1665
1665
  width: 40px;
1666
1666
  }
1667
1667
 
1668
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1668
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1669
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1669
1670
  margin-top: -1.62em;
1670
1671
  height: 36px;
1671
1672
  margin-top: -2em;