@syncfusion/ej2-dropdowns 24.2.9 → 25.1.37

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 (95) hide show
  1. package/CHANGELOG.md +27 -150
  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 +2014 -514
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +2030 -513
  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.d.ts +2 -0
  36. package/src/multi-select/checkbox-selection.js +16 -3
  37. package/src/multi-select/float-label.d.ts +5 -5
  38. package/src/multi-select/index.d.ts +1 -0
  39. package/src/multi-select/index.js +1 -0
  40. package/src/multi-select/interface.d.ts +1 -0
  41. package/src/multi-select/multi-select-model.d.ts +17 -2
  42. package/src/multi-select/multi-select.d.ts +35 -4
  43. package/src/multi-select/multi-select.js +1282 -174
  44. package/styles/auto-complete/_bds-definition.scss +2 -0
  45. package/styles/bootstrap-dark.css +7 -1
  46. package/styles/bootstrap.css +7 -1
  47. package/styles/bootstrap4.css +2 -1
  48. package/styles/bootstrap5-dark.css +2 -1
  49. package/styles/bootstrap5.css +2 -1
  50. package/styles/combo-box/_bds-definition.scss +2 -0
  51. package/styles/drop-down-base/_bds-definition.scss +134 -0
  52. package/styles/drop-down-list/_bds-definition.scss +134 -0
  53. package/styles/drop-down-list/icons/_bds.scss +14 -0
  54. package/styles/drop-down-tree/_bds-definition.scss +61 -0
  55. package/styles/drop-down-tree/icons/_bds.scss +11 -0
  56. package/styles/fabric-dark.css +3 -1
  57. package/styles/fabric.css +3 -1
  58. package/styles/fluent-dark.css +7 -1
  59. package/styles/fluent.css +7 -1
  60. package/styles/highcontrast-light.css +3 -1
  61. package/styles/highcontrast.css +3 -1
  62. package/styles/list-box/_bds-definition.scss +136 -0
  63. package/styles/list-box/icons/_bds.scss +25 -0
  64. package/styles/material-dark.css +11 -1
  65. package/styles/material.css +11 -1
  66. package/styles/material3-dark.css +2 -1
  67. package/styles/material3.css +2 -1
  68. package/styles/mention/_bds-definition.scss +1 -0
  69. package/styles/multi-select/_bds-definition.scss +235 -0
  70. package/styles/multi-select/_bootstrap-dark-definition.scss +4 -0
  71. package/styles/multi-select/_bootstrap-definition.scss +4 -0
  72. package/styles/multi-select/_fluent-definition.scss +5 -0
  73. package/styles/multi-select/_layout.scss +8 -1
  74. package/styles/multi-select/_material-dark-definition.scss +11 -0
  75. package/styles/multi-select/_material-definition.scss +11 -0
  76. package/styles/multi-select/bootstrap-dark.css +7 -1
  77. package/styles/multi-select/bootstrap.css +7 -1
  78. package/styles/multi-select/bootstrap4.css +2 -1
  79. package/styles/multi-select/bootstrap5-dark.css +2 -1
  80. package/styles/multi-select/bootstrap5.css +2 -1
  81. package/styles/multi-select/fabric-dark.css +3 -1
  82. package/styles/multi-select/fabric.css +3 -1
  83. package/styles/multi-select/fluent-dark.css +7 -1
  84. package/styles/multi-select/fluent.css +7 -1
  85. package/styles/multi-select/highcontrast-light.css +3 -1
  86. package/styles/multi-select/highcontrast.css +3 -1
  87. package/styles/multi-select/icons/_bds.scss +26 -0
  88. package/styles/multi-select/material-dark.css +11 -1
  89. package/styles/multi-select/material.css +11 -1
  90. package/styles/multi-select/material3-dark.css +2 -1
  91. package/styles/multi-select/material3.css +2 -1
  92. package/styles/multi-select/tailwind-dark.css +2 -1
  93. package/styles/multi-select/tailwind.css +2 -1
  94. package/styles/tailwind-dark.css +2 -1
  95. 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
+ }
@@ -1527,6 +1527,15 @@ ejs-dropdownlist {
1527
1527
  transform: rotate(360deg);
1528
1528
  }
1529
1529
  }
1530
+ .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
1531
+ padding: 1px 0;
1532
+ }
1533
+
1534
+ .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text],
1535
+ .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
1536
+ padding: 0;
1537
+ }
1538
+
1530
1539
  .e-multiselect.e-input-group .e-ddl-icon::before {
1531
1540
  content: "\e969";
1532
1541
  font-family: "e-icons";
@@ -2388,7 +2397,8 @@ ejs-dropdownlist {
2388
2397
  margin-top: -3em;
2389
2398
  }
2390
2399
 
2391
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2400
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
2401
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2392
2402
  margin-top: -3em;
2393
2403
  }
2394
2404
 
@@ -1582,6 +1582,15 @@ ejs-dropdownlist {
1582
1582
  transform: rotate(360deg);
1583
1583
  }
1584
1584
  }
1585
+ .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
1586
+ padding: 1px 0;
1587
+ }
1588
+
1589
+ .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text],
1590
+ .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
1591
+ padding: 0;
1592
+ }
1593
+
1585
1594
  .e-multiselect.e-input-group .e-ddl-icon::before {
1586
1595
  content: "\e969";
1587
1596
  font-family: "e-icons";
@@ -2443,7 +2452,8 @@ ejs-dropdownlist {
2443
2452
  margin-top: -3em;
2444
2453
  }
2445
2454
 
2446
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2455
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
2456
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2447
2457
  margin-top: -3em;
2448
2458
  }
2449
2459
 
@@ -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.6em;
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;
@@ -228,3 +228,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
228
228
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
229
229
  $filled-multiselect-chip-bg-color: $grey-800 !default;
230
230
  $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
231
+
232
+ @include export-module('multiselect-material-dark') {
233
+ .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
234
+ padding: 1px 0;
235
+ }
236
+
237
+ .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'],
238
+ .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
239
+ padding: 0;
240
+ }
241
+ }
@@ -221,3 +221,14 @@ $outline-multiselect-disabled-font-color: rgba($grey-light-font, .38) !default;
221
221
  $outline-multiselect-disabled-chip-bg-color: $grey-100 !default;
222
222
  $filled-multiselect-chip-bg-color: darken($grey-300, 7%) !default;
223
223
  $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
224
+
225
+ @include export-module('multiselect-material') {
226
+ .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
227
+ padding: 1px 0;
228
+ }
229
+
230
+ .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'],
231
+ .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type = 'text'] {
232
+ padding: 0;
233
+ }
234
+ }
@@ -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.6em;
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.6em;
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
+ }
@@ -34,6 +34,15 @@
34
34
  padding: 0 16px 0 0;
35
35
  }
36
36
 
37
+ .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
38
+ padding: 1px 0;
39
+ }
40
+
41
+ .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text],
42
+ .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] {
43
+ padding: 0;
44
+ }
45
+
37
46
  .e-multiselect.e-input-group .e-ddl-icon::before {
38
47
  content: "\e969";
39
48
  font-family: "e-icons";
@@ -895,7 +904,8 @@
895
904
  margin-top: -3em;
896
905
  }
897
906
 
898
- .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,
908
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
899
909
  margin-top: -3em;
900
910
  }
901
911