@syncfusion/ej2-dropdowns 20.3.48 → 20.3.49

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 (63) hide show
  1. package/CHANGELOG.md +14 -0
  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 +11 -2
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +11 -2
  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 +9 -9
  13. package/src/drop-down-list/drop-down-list.d.ts +1 -0
  14. package/src/drop-down-list/drop-down-list.js +10 -1
  15. package/src/list-box/list-box.js +1 -1
  16. package/styles/bootstrap-dark.css +8 -0
  17. package/styles/bootstrap.css +8 -0
  18. package/styles/bootstrap4.css +20 -11
  19. package/styles/bootstrap5-dark.css +8 -0
  20. package/styles/bootstrap5.css +8 -0
  21. package/styles/fabric-dark.css +16 -8
  22. package/styles/fabric.css +16 -8
  23. package/styles/fluent-dark.css +9 -1
  24. package/styles/fluent.css +9 -1
  25. package/styles/highcontrast-light.css +8 -0
  26. package/styles/highcontrast.css +17 -9
  27. package/styles/material-dark.css +8 -0
  28. package/styles/material.css +8 -0
  29. package/styles/multi-select/_bootstrap-dark-definition.scss +6 -0
  30. package/styles/multi-select/_bootstrap-definition.scss +6 -0
  31. package/styles/multi-select/_bootstrap4-definition.scss +14 -7
  32. package/styles/multi-select/_bootstrap5-definition.scss +7 -0
  33. package/styles/multi-select/_fabric-dark-definition.scss +10 -4
  34. package/styles/multi-select/_fabric-definition.scss +10 -4
  35. package/styles/multi-select/_fluent-definition.scss +8 -1
  36. package/styles/multi-select/_fusionnew-definition.scss +7 -0
  37. package/styles/multi-select/_highcontrast-definition.scss +11 -5
  38. package/styles/multi-select/_highcontrast-light-definition.scss +6 -0
  39. package/styles/multi-select/_layout.scss +12 -5
  40. package/styles/multi-select/_material-dark-definition.scss +6 -0
  41. package/styles/multi-select/_material-definition.scss +6 -0
  42. package/styles/multi-select/_material3-definition.scss +7 -0
  43. package/styles/multi-select/_tailwind-definition.scss +7 -0
  44. package/styles/multi-select/_theme.scss +4 -0
  45. package/styles/multi-select/bootstrap-dark.css +8 -0
  46. package/styles/multi-select/bootstrap.css +8 -0
  47. package/styles/multi-select/bootstrap4.css +20 -11
  48. package/styles/multi-select/bootstrap5-dark.css +8 -0
  49. package/styles/multi-select/bootstrap5.css +8 -0
  50. package/styles/multi-select/fabric-dark.css +16 -8
  51. package/styles/multi-select/fabric.css +16 -8
  52. package/styles/multi-select/fluent-dark.css +9 -1
  53. package/styles/multi-select/fluent.css +9 -1
  54. package/styles/multi-select/highcontrast-light.css +8 -0
  55. package/styles/multi-select/highcontrast.css +17 -9
  56. package/styles/multi-select/material-dark.css +8 -0
  57. package/styles/multi-select/material.css +8 -0
  58. package/styles/multi-select/tailwind-dark.css +8 -0
  59. package/styles/multi-select/tailwind.css +8 -0
  60. package/styles/tailwind-dark.css +8 -0
  61. package/styles/tailwind.css +8 -0
  62. package/.eslintrc.json +0 -244
  63. package/tslint.json +0 -111
package/styles/multi-select/_bootstrap-dark-definition.scss CHANGED
@@ -38,7 +38,9 @@ $ddl-closer-margin-top-bigger: -4em !default;
38
38
  $ddl-chip-close-top: 9px !default;
39
39
  $ddl-chip-close-left: 10px !default;
40
40
  $ddl-chip-close-margin: 0 0 0 !default;
41
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
41
42
  $ddl-chip-close-square: 30px !default;
43
+ $ddl-chip-close-width: 30px !default;
42
44
  $ddl-chip-close-font: 10px !default;
43
45
  $ddl-chip-height: 28px !default;
44
46
  $ddl-chip-mobile-height: 32px !default;
@@ -53,6 +55,7 @@ $ddl-delimviewheight: 32px !default;
53
55
  $ddl-closer-hooker-font: 10px !default;
54
56
  $ddl-closer-hooker-color: $grey-dark-font !default;
55
57
  $ddl-chip-hooker-square: 40px !default;
58
+ $ddl-chip-hooker-width: 40px !default;
56
59
  $ddl-sel-hover-chip-bg-color: $grey-99 !default;
57
60
  $ddl-sel-chip-hover-font-color: $grey-dark-font !default;
58
61
  $ddl-chip-hooker-right: 0 !default;
@@ -136,12 +139,14 @@ $ddl-select-all-height-small: 22px !default;
136
139
  $ddl-small-chip-height: 22px !default;
137
140
  $ddl-chip-small-font-size: 13px !default;
138
141
  $ddl-small-chip-close-square: 24px !default;
142
+ $ddl-small-chip-close-width: 24px !default;
139
143
  $ddl-small-chip-close-font: 8px !default;
140
144
  $ddl-control-small-height: 24px !default;
141
145
  $ddl-small-input-height: 26px !default;
142
146
  $ddl-delim-small-font-size: 13px !default;
143
147
  $ddl-small-closer-margin-top: -3.5em !default;
144
148
  $ddl-chip-close-hooker-small-left: 8px !default;
149
+ $ddl-chip-close-hooker-small-bigger-left: 8px !default;
145
150
  $ddl-delimviewheight-small: 26px !default;
146
151
 
147
152
  // Touch Small size
@@ -149,6 +154,7 @@ $ddl-select-all-height-bigger-small: 34px !default;
149
154
  $ddl-bigger-small-chip-height: 28px !default;
150
155
  $ddl-chip-bigger-small-font-size: 15px !default;
151
156
  $ddl-bigger-small-chip-close-square: 30px !default;
157
+ $ddl-bigger-small-chip-close-width: 30px !default;
152
158
  $ddl-bigger-small-chip-close-font: 10px !default;
153
159
  $ddl-control-bigger-small-height: 30px !default;
154
160
  $ddl-bigger-small-input-height: 34px !default;
package/styles/multi-select/_bootstrap-definition.scss CHANGED
@@ -37,7 +37,9 @@ $ddl-closer-margin-top-bigger: -4em !default;
37
37
  $ddl-chip-close-top: 9px !default;
38
38
  $ddl-chip-close-left: 10px !default;
39
39
  $ddl-chip-close-margin: 0 0 0 !default;
40
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
40
41
  $ddl-chip-close-square: 30px !default;
42
+ $ddl-chip-close-width: 30px !default;
41
43
  $ddl-chip-close-font: 10px !default;
42
44
  $ddl-chip-height: 28px !default;
43
45
  $ddl-chip-mobile-height: 32px !default;
@@ -52,6 +54,7 @@ $ddl-delimviewheight: 32px !default;
52
54
  $ddl-closer-hooker-font: 10px !default;
53
55
  $ddl-closer-hooker-color: $grey-light-font !default;
54
56
  $ddl-chip-hooker-square: 40px !default;
57
+ $ddl-chip-hooker-width: 40px !default;
55
58
  $ddl-sel-hover-chip-bg-color: $grey-dd !default;
56
59
  $ddl-sel-chip-hover-font-color: $grey-light-font !default;
57
60
  $ddl-chip-hooker-right: 0 !default;
@@ -134,12 +137,14 @@ $ddl-select-all-height-small: 22px !default;
134
137
  $ddl-small-chip-height: 22px !default;
135
138
  $ddl-chip-small-font-size: 13px !default;
136
139
  $ddl-small-chip-close-square: 24px !default;
140
+ $ddl-small-chip-close-width: 24px !default;
137
141
  $ddl-small-chip-close-font: 8px !default;
138
142
  $ddl-control-small-height: 24px !default;
139
143
  $ddl-small-input-height: 26px !default;
140
144
  $ddl-delim-small-font-size: 13px !default;
141
145
  $ddl-small-closer-margin-top: -3.5em !default;
142
146
  $ddl-chip-close-hooker-small-left: 8px !default;
147
+ $ddl-chip-close-hooker-small-bigger-left: 8px !default;
143
148
  $ddl-delimviewheight-small: 26px !default;
144
149
 
145
150
  // Touch Small size
@@ -147,6 +152,7 @@ $ddl-select-all-height-bigger-small: 34px !default;
147
152
  $ddl-bigger-small-chip-height: 28px !default;
148
153
  $ddl-chip-bigger-small-font-size: 15px !default;
149
154
  $ddl-bigger-small-chip-close-square: 30px !default;
155
+ $ddl-bigger-small-chip-close-width: 30px !default;
150
156
  $ddl-bigger-small-chip-close-font: 10px !default;
151
157
  $ddl-control-bigger-small-height: 30px !default;
152
158
  $ddl-bigger-small-input-height: 34px !default;
package/styles/multi-select/_bootstrap4-definition.scss CHANGED
@@ -35,9 +35,11 @@ $ddl-icon-margin-top-bigger: -2.25em !default;
35
35
  $ddl-clear-margin-top: -2.9em !default;
36
36
  $ddl-closer-margin-top-bigger: -3.5em !default;
37
37
  $ddl-chip-close-top: 8px !default;
38
- $ddl-chip-close-left: 10px !default;
39
- $ddl-chip-close-margin: 0 0 0 !default;
38
+ $ddl-chip-close-left: 0 !default;
39
+ $ddl-chip-close-margin: 10px 10px 10px 0 !default;
40
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
40
41
  $ddl-chip-close-square: 24px !default;
42
+ $ddl-chip-close-width: auto !default;
41
43
  $ddl-chip-close-font: 8px !default;
42
44
  $ddl-chip-height: 24px !default;
43
45
  $ddl-chip-mobile-height: 28px !default;
@@ -52,6 +54,7 @@ $ddl-delimviewheight: 29px !default;
52
54
  $ddl-closer-hooker-font: 10px !default;
53
55
  $ddl-closer-hooker-font-bigger: 12px !default;
54
56
  $ddl-chip-hooker-square: 29px !default;
57
+ $ddl-chip-hooker-width: auto !default;
55
58
  $ddl-sel-hover-chip-bg-color: $gray-600 !default;
56
59
  $ddl-sel-chip-hover-font-color: $white !default;
57
60
  $ddl-chip-hooker-right: 0 !default;
@@ -74,7 +77,7 @@ $ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
74
77
  $ddl-rtl-chip-padding: 0 8px 0 0 !default;
75
78
  $ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
76
79
  $ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
77
- $ddl-overall-close-left: 10px !default;
80
+ $ddl-overall-close-left: 0 !default;
78
81
  $ddl-overall-close-top: 10px !default;
79
82
 
80
83
  //$ddl-overall-bigger-close-top: 15px !default;
@@ -126,6 +129,7 @@ $ddl-chip-close-rtl-left: -15px !default;
126
129
  $ddl-close-icon-color: $gray-700 !default;
127
130
  $ddl-bigger-chip-close-font: 10px !default;
128
131
  $ddl-bigger-chip-close-square: 30px !default;
132
+ $ddl-bigger-chip-close-width: auto !default;
129
133
  $ddl-bigger-close-top: 9px !default;
130
134
  $ddl-multi-checkbox-bgcolor: $primary-font !default;
131
135
  $ddl-multi-checkbox-border-color: $primary-font !default;
@@ -144,15 +148,17 @@ $ddl-select-all-height-small: 22px !default;
144
148
  $ddl-small-chip-height: 20px !default;
145
149
  $ddl-chip-small-font-size: 12px !default;
146
150
  $ddl-small-chip-close-square: 18px !default;
151
+ $ddl-small-chip-close-width: auto !default;
147
152
  $ddl-small-chip-close-font: 8px !default;
148
153
  $ddl-control-small-height: 22px !default;
149
154
  $ddl-small-input-height: 22px !default;
150
155
  $ddl-delim-small-font-size: 12px !default;
151
156
  $ddl-small-closer-margin-top: -2.4em !default;
152
157
  $ddl-chip-small-content-padding: 0 8px 0 8px !default;
153
- $ddl-chip-close-small-left: 6px !default;
158
+ $ddl-chip-close-small-left: 0 !default;
154
159
  $ddl-chip-close-small-top: 5px !default;
155
160
  $ddl-chip-close-hooker-small-left: 4px !default;
161
+ $ddl-chip-close-hooker-small-bigger-left: 4px !default;
156
162
  $ddl-chip-close-hooker-small-top: 7px !default;
157
163
  $ddl-delimviewheight-small: 22px !default;
158
164
 
@@ -161,15 +167,16 @@ $ddl-select-all-height-bigger-small: 34px !default;
161
167
  $ddl-bigger-small-chip-height: 30px !default;
162
168
  $ddl-chip-bigger-small-font-size: 15px !default;
163
169
  $ddl-bigger-small-chip-close-square: 24px !default;
170
+ $ddl-bigger-small-chip-close-width: auto !default;
164
171
  $ddl-bigger-small-chip-close-font: 10px !default;
165
172
  $ddl-control-bigger-small-height: 30px !default;
166
173
  $ddl-bigger-small-input-height: 34px !default;
167
174
  $ddl-delim-bigger-small-font-size: 14px !default;
168
- $ddl-chip-close-bigger-left: 13px !default;
175
+ $ddl-chip-close-bigger-left: 0 !default;
169
176
  $ddl-chip-close-bigger-top: 11px !default;
170
177
  $ddl-chip-bigger-content-padding: 7px 8px 7px 12px !default;
171
178
  $ddl-delimviewheight-bigger-small: 34px !default;
172
- $ddl-closer-margin-top-bigger-small: -2.9em !default;
179
+ $ddl-closer-margin-top-bigger-small: -2.5em !default;
173
180
  $multiselect-closer-bigger-height: 36px !default;
174
181
  $multiselect-closer--bigger-margin-top: -3em !default;
175
182
  $multiselect-closer-bigger-width: 0 !default;
@@ -198,7 +205,7 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
198
205
 
199
206
  .e-bigger .e-multi-select-wrapper .e-chips-close {
200
207
  height: $ddl-bigger-chip-close-square;
201
- width: $ddl-bigger-chip-close-square;
208
+ width: $ddl-bigger-chip-close-width;
202
209
  }
203
210
 
204
211
  .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus.e-hover {
package/styles/multi-select/_bootstrap5-definition.scss CHANGED
@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 6px 0 8px !default;
20
20
  $ddl-chip-close-top: 0 !default;
21
21
  $ddl-chip-close-left: 0 !default;
22
22
  $ddl-chip-close-margin: 0 0 0 !default;
23
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
23
24
  $ddl-chip-close-square: 14px !default;
25
+ $ddl-chip-close-width: 14px !default;
24
26
  $ddl-chip-hooker-square: 24px !default;
27
+ $ddl-chip-hooker-width: 24px !default;
25
28
  $ddl-chip-close-font: 14px !default;
26
29
  $ddl-chip-height: 24px !default;
27
30
  $ddl-chip-mobile-height: 30px !default;
@@ -122,12 +125,14 @@ $ddl-select-all-height-small: 26px !default;
122
125
  $ddl-small-chip-height: 20px !default;
123
126
  $ddl-chip-small-font-size: 12px !default;
124
127
  $ddl-small-chip-close-square: 12px !default;
128
+ $ddl-small-chip-close-width: 12px !default;
125
129
  $ddl-small-chip-close-font: 12px !default;
126
130
  $ddl-control-small-height: 24px !default;
127
131
  $ddl-small-input-height: 24px !default;
128
132
  $ddl-delim-small-font-size: 12px !default;
129
133
  $ddl-small-closer-margin-top: -2em !default;
130
134
  $ddl-chip-close-hooker-small-left: 0 !default;
135
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
131
136
  $ddl-delimviewheight-small: 24px !default;
132
137
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
133
138
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -140,12 +145,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
140
145
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
141
146
  $ddl-bigger-chip-close-font: 14px !default;
142
147
  $ddl-bigger-chip-close-square: 14px !default;
148
+ $ddl-bigger-chip-close-width: 14px !default;
143
149
 
144
150
  // Touch Small size
145
151
  $ddl-select-all-height-bigger-small: 40px !default;
146
152
  $ddl-bigger-small-chip-height: 26px !default;
147
153
  $ddl-chip-bigger-small-font-size: 13px !default;
148
154
  $ddl-bigger-small-chip-close-square: 14px !default;
155
+ $ddl-bigger-small-chip-close-width: 14px !default;
149
156
  $ddl-bigger-small-chip-close-font: 14px !default;
150
157
  $ddl-control-bigger-small-height: 28px !default;
151
158
  $ddl-bigger-small-input-height: 32px !default;
package/styles/multi-select/_fabric-dark-definition.scss CHANGED
@@ -32,11 +32,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
32
32
  $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
33
33
  $ddl-chip-padding: 0 0 0 8px !default;
34
34
  $ddl-chip-close-top: 8px !default;
35
- $ddl-chip-close-left: 8px !default;
36
- $ddl-chip-close-margin: 0 !default;
35
+ $ddl-chip-close-left: 0 !default;
36
+ $ddl-chip-close-margin: 8px 8px 8px 8px !default;
37
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
37
38
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
38
39
  $ddl-chip-close-square: 26px !default;
40
+ $ddl-chip-close-width: auto !default;
39
41
  $ddl-chip-hooker-square: 30px !default;
42
+ $ddl-chip-hooker-width: auto !default;
40
43
  $ddl-chip-close-font: 10px !default;
41
44
  $ddl-chip-close-mobile-top: 0 !default;
42
45
  $ddl-chip-height: 26px !default;
@@ -77,7 +80,7 @@ $ddl-rtl-hooker-left: -4px !default;
77
80
  $ddl-chip-close-mob-top: 0 !default;
78
81
  $ddl-control-placholder-padding: 0 32px 0 2px !default;
79
82
  $ddl-overall-close-top: 10px !default;
80
- $ddl-overall-close-left: 10px !default;
83
+ $ddl-overall-close-left: 0 !default;
81
84
  $ddl-sel-chip-close-mobile-top: 0 !default;
82
85
  $ddl-sel-chip-close-mobile-left: 12px !default;
83
86
  $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -133,12 +136,14 @@ $ddl-select-all-height-small: 26px !default;
133
136
  $ddl-small-chip-height: 20px !default;
134
137
  $ddl-chip-small-font-size: 12px !default;
135
138
  $ddl-small-chip-close-square: 22px !default;
139
+ $ddl-small-chip-close-width: auto !default;
136
140
  $ddl-small-chip-close-font: 8px !default;
137
141
  $ddl-control-small-height: 24px !default;
138
142
  $ddl-small-input-height: 24px !default;
139
143
  $ddl-delim-small-font-size: 13px !default;
140
- $ddl-small-closer-margin-top: -2.8em !default;
144
+ $ddl-small-closer-margin-top: -3em !default;
141
145
  $ddl-chip-close-hooker-small-left: 7px !default;
146
+ $ddl-chip-close-hooker-small-bigger-left: -35px !default;
142
147
  $ddl-delimviewheight-small: 24px !default;
143
148
 
144
149
  // Touch Small size
@@ -146,6 +151,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
146
151
  $ddl-bigger-small-chip-height: 26px !default;
147
152
  $ddl-chip-bigger-small-font-size: 12px !default;
148
153
  $ddl-bigger-small-chip-close-square: 26px !default;
154
+ $ddl-bigger-small-chip-close-width: auto !default;
149
155
  $ddl-bigger-small-chip-close-font: 10px !default;
150
156
  $ddl-control-bigger-small-height: 26px !default;
151
157
  $ddl-bigger-small-input-height: 34px !default;
package/styles/multi-select/_fabric-definition.scss CHANGED
@@ -31,11 +31,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
31
31
  $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
32
32
  $ddl-chip-padding: 0 0 0 8px !default;
33
33
  $ddl-chip-close-top: 8px !default;
34
- $ddl-chip-close-left: 8px !default;
35
- $ddl-chip-close-margin: 0 !default;
34
+ $ddl-chip-close-left: 0 !default;
35
+ $ddl-chip-close-margin: 8px 8px 8px 8px !default;
36
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
36
37
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
37
38
  $ddl-chip-close-square: 26px !default;
39
+ $ddl-chip-close-width: auto !default;
38
40
  $ddl-chip-hooker-square: 30px !default;
41
+ $ddl-chip-hooker-width: auto !default;
39
42
  $ddl-chip-close-font: 10px !default;
40
43
  $ddl-chip-close-mobile-top: 0 !default;
41
44
  $ddl-chip-height: 26px !default;
@@ -76,7 +79,7 @@ $ddl-rtl-hooker-left: -4px !default;
76
79
  $ddl-chip-close-mob-top: 0 !default;
77
80
  $ddl-control-placholder-padding: 0 32px 0 2px !default;
78
81
  $ddl-overall-close-top: 10px !default;
79
- $ddl-overall-close-left: 10px !default;
82
+ $ddl-overall-close-left: 0 !default;
80
83
  $ddl-sel-chip-close-mobile-top: 0 !default;
81
84
  $ddl-sel-chip-close-mobile-left: 12px !default;
82
85
  $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -132,12 +135,14 @@ $ddl-select-all-height-small: 26px !default;
132
135
  $ddl-small-chip-height: 20px !default;
133
136
  $ddl-chip-small-font-size: 12px !default;
134
137
  $ddl-small-chip-close-square: 22px !default;
138
+ $ddl-small-chip-close-width: auto !default;
135
139
  $ddl-small-chip-close-font: 8px !default;
136
140
  $ddl-control-small-height: 24px !default;
137
141
  $ddl-small-input-height: 24px !default;
138
142
  $ddl-delim-small-font-size: 13px !default;
139
- $ddl-small-closer-margin-top: -2.8em !default;
143
+ $ddl-small-closer-margin-top: -3em !default;
140
144
  $ddl-chip-close-hooker-small-left: 7px !default;
145
+ $ddl-chip-close-hooker-small-bigger-left: -35px !default;
141
146
  $ddl-delimviewheight-small: 24px !default;
142
147
 
143
148
  // Touch Small size
@@ -145,6 +150,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
145
150
  $ddl-bigger-small-chip-height: 26px !default;
146
151
  $ddl-chip-bigger-small-font-size: 12px !default;
147
152
  $ddl-bigger-small-chip-close-square: 26px !default;
153
+ $ddl-bigger-small-chip-close-width: auto !default;
148
154
  $ddl-bigger-small-chip-close-font: 10px !default;
149
155
  $ddl-control-bigger-small-height: 26px !default;
150
156
  $ddl-bigger-small-input-height: 34px !default;
package/styles/multi-select/_fluent-definition.scss CHANGED
@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 8px 0 4px !default;
20
20
  $ddl-chip-close-top: 3px !default;
21
21
  $ddl-chip-close-left: 6px !default;
22
22
  $ddl-chip-close-margin: 0 0 0 !default;
23
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
23
24
  $ddl-chip-close-square: 14px !default;
25
+ $ddl-chip-close-width: 14px !default;
24
26
  $ddl-chip-hooker-square: 24px !default;
27
+ $ddl-chip-hooker-width: 24px !default;
25
28
  $ddl-chip-close-font: 10px !default;
26
29
  $ddl-chip-height: 24px !default;
27
30
  $ddl-chip-mobile-height: 30px !default;
@@ -122,18 +125,20 @@ $ddl-select-all-height-small: 26px !default;
122
125
  $ddl-small-chip-height: 20px !default;
123
126
  $ddl-chip-small-font-size: 12px !default;
124
127
  $ddl-small-chip-close-square: 12px !default;
128
+ $ddl-small-chip-close-width: 12px !default;
125
129
  $ddl-small-chip-close-font: 8px !default;
126
130
  $ddl-control-small-height: 24px !default;
127
131
  $ddl-small-input-height: 24px !default;
128
132
  $ddl-delim-small-font-size: 12px !default;
129
133
  $ddl-small-closer-margin-top: -2em !default;
130
134
  $ddl-chip-close-hooker-small-left: 0 !default;
135
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
131
136
  $ddl-delimviewheight-small: 24px !default;
132
137
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
133
138
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
134
139
  $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
135
140
  $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
136
- $ddl-chip-close-small-left: 6px !default;
141
+ $ddl-chip-close-small-left: 0 !default;
137
142
  $ddl-chip-close-small-top: 2px !default;
138
143
  $ddl-small-down-icon-left: -2px !default;
139
144
 
@@ -143,6 +148,7 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
143
148
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
144
149
  $ddl-bigger-chip-close-font: 14px !default;
145
150
  $ddl-bigger-chip-close-square: 14px !default;
151
+ $ddl-bigger-chip-close-width: 14px !default;
146
152
  $ddl-bigger-chip-down-icon-font: 14px !default;
147
153
 
148
154
  // Touch Small size
@@ -150,6 +156,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
150
156
  $ddl-bigger-small-chip-height: 26px !default;
151
157
  $ddl-chip-bigger-small-font-size: 13px !default;
152
158
  $ddl-bigger-small-chip-close-square: 14px !default;
159
+ $ddl-bigger-small-chip-close-width: 14px !default;
153
160
  $ddl-bigger-small-chip-close-font: 10px !default;
154
161
  $ddl-control-bigger-small-height: 28px !default;
155
162
  $ddl-bigger-small-input-height: 32px !default;
package/styles/multi-select/_fusionnew-definition.scss CHANGED
@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 6px 0 8px !default;
20
20
  $ddl-chip-close-top: 0 !default;
21
21
  $ddl-chip-close-left: 0 !default;
22
22
  $ddl-chip-close-margin: 0 0 0 !default;
23
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
23
24
  $ddl-chip-close-square: 14px !default;
25
+ $ddl-chip-close-width: 14px !default;
24
26
  $ddl-chip-hooker-square: 24px !default;
27
+ $ddl-chip-hooker-width: 24px !default;
25
28
  $ddl-chip-close-font: 14px !default;
26
29
  $ddl-chip-height: 24px !default;
27
30
  $ddl-chip-mobile-height: 30px !default;
@@ -122,12 +125,14 @@ $ddl-select-all-height-small: 26px !default;
122
125
  $ddl-small-chip-height: 20px !default;
123
126
  $ddl-chip-small-font-size: 12px !default;
124
127
  $ddl-small-chip-close-square: 12px !default;
128
+ $ddl-small-chip-close-width: 12px !default;
125
129
  $ddl-small-chip-close-font: 12px !default;
126
130
  $ddl-control-small-height: 24px !default;
127
131
  $ddl-small-input-height: 24px !default;
128
132
  $ddl-delim-small-font-size: 12px !default;
129
133
  $ddl-small-closer-margin-top: -2em !default;
130
134
  $ddl-chip-close-hooker-small-left: 0 !default;
135
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
131
136
  $ddl-delimviewheight-small: 24px !default;
132
137
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
133
138
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -140,12 +145,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
140
145
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
141
146
  $ddl-bigger-chip-close-font: 14px !default;
142
147
  $ddl-bigger-chip-close-square: 14px !default;
148
+ $ddl-bigger-chip-close-width: 14px !default;
143
149
 
144
150
  // Touch Small size
145
151
  $ddl-select-all-height-bigger-small: 40px !default;
146
152
  $ddl-bigger-small-chip-height: 26px !default;
147
153
  $ddl-chip-bigger-small-font-size: 13px !default;
148
154
  $ddl-bigger-small-chip-close-square: 14px !default;
155
+ $ddl-bigger-small-chip-close-width: 14px !default;
149
156
  $ddl-bigger-small-chip-close-font: 14px !default;
150
157
  $ddl-control-bigger-small-height: 28px !default;
151
158
  $ddl-bigger-small-input-height: 32px !default;
package/styles/multi-select/_highcontrast-definition.scss CHANGED
@@ -31,11 +31,14 @@ $ddl-chip-mobile-content-padding: 6px 8px 6px 0 !default;
31
31
  $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
32
32
  $ddl-chip-padding: 0 0 0 8px !default;
33
33
  $ddl-chip-close-top: 8px !default;
34
- $ddl-chip-close-left: 8px !default;
35
- $ddl-chip-close-margin: 0 !default;
34
+ $ddl-chip-close-left: 0 !default;
35
+ $ddl-chip-close-margin: 10px 10px 10px 0 !default;
36
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
36
37
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
37
38
  $ddl-chip-close-square: 26px !default;
39
+ $ddl-chip-close-width: auto !default;
38
40
  $ddl-chip-hooker-square: 30px !default;
41
+ $ddl-chip-hooker-width: auto !default;
39
42
  $ddl-chip-close-font: 10px !default;
40
43
  $ddl-chip-close-mobile-top: 0 !default;
41
44
  $ddl-chip-height: 26px !default;
@@ -76,7 +79,7 @@ $ddl-rtl-hooker-left: -4px !default;
76
79
  $ddl-chip-close-mob-top: 0 !default;
77
80
  $ddl-control-placholder-padding: 0 32px 0 2px !default;
78
81
  $ddl-overall-close-top: 10px !default;
79
- $ddl-overall-close-left: 10px !default;
82
+ $ddl-overall-close-left: 0 !default;
80
83
  $ddl-sel-chip-close-mobile-top: 0 !default;
81
84
  $ddl-sel-chip-close-mobile-left: 12px !default;
82
85
  $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -135,12 +138,14 @@ $ddl-select-all-height-small: 26px !default;
135
138
  $ddl-small-chip-height: 20px !default;
136
139
  $ddl-chip-small-font-size: 12px !default;
137
140
  $ddl-small-chip-close-square: 22px !default;
141
+ $ddl-small-chip-close-width: auto !default;
138
142
  $ddl-small-chip-close-font: 8px !default;
139
143
  $ddl-control-small-height: 24px !default;
140
144
  $ddl-small-input-height: 24px !default;
141
145
  $ddl-delim-small-font-size: 13px !default;
142
- $ddl-small-closer-margin-top: -2.9em !default;
146
+ $ddl-small-closer-margin-top: -3.2em !default;
143
147
  $ddl-chip-close-hooker-small-left: 7px !default;
148
+ $ddl-chip-close-hooker-small-bigger-left: -35px !default;
144
149
  $ddl-delimviewheight-small: 24px !default;
145
150
 
146
151
  // Touch Small size
@@ -148,12 +153,13 @@ $ddl-select-all-height-bigger-small: 40px !default;
148
153
  $ddl-bigger-small-chip-height: 26px !default;
149
154
  $ddl-chip-bigger-small-font-size: 12px !default;
150
155
  $ddl-bigger-small-chip-close-square: 26px !default;
156
+ $ddl-bigger-small-chip-close-width: auto !default;
151
157
  $ddl-bigger-small-chip-close-font: 10px !default;
152
158
  $ddl-control-bigger-small-height: 26px !default;
153
159
  $ddl-bigger-small-input-height: 34px !default;
154
160
  $ddl-delim-bigger-small-font-size: 14px !default;
155
161
  $ddl-delimviewheight-bigger-small: 34px !default;
156
- $ddl-closer-margin-top-bigger-small: -3.2em !default;
162
+ $ddl-closer-margin-top-bigger-small: -3.4em !default;
157
163
 
158
164
  @include export-module('multiselect-highcontrast') {
159
165
  .e-multi-select-wrapper {
package/styles/multi-select/_highcontrast-light-definition.scss CHANGED
@@ -33,9 +33,12 @@ $ddl-chip-padding: 0 0 0 8px !default;
33
33
  $ddl-chip-close-top: 8px !default;
34
34
  $ddl-chip-close-left: 8px !default;
35
35
  $ddl-chip-close-margin: 0 !default;
36
+ $ddl-chip-close-rtl-margin: 0 !default;
36
37
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
37
38
  $ddl-chip-close-square: 26px !default;
39
+ $ddl-chip-close-width: 26px !default;
38
40
  $ddl-chip-hooker-square: 30px !default;
41
+ $ddl-chip-hooker-width: 30px !default;
39
42
  $ddl-chip-close-font: 10px !default;
40
43
  $ddl-chip-close-mobile-top: 0 !default;
41
44
  $ddl-chip-height: 26px !default;
@@ -135,12 +138,14 @@ $ddl-select-all-height-small: 26px !default;
135
138
  $ddl-small-chip-height: 20px !default;
136
139
  $ddl-chip-small-font-size: 12px !default;
137
140
  $ddl-small-chip-close-square: 22px !default;
141
+ $ddl-small-chip-close-width: 22px !default;
138
142
  $ddl-small-chip-close-font: 8px !default;
139
143
  $ddl-control-small-height: 24px !default;
140
144
  $ddl-small-input-height: 24px !default;
141
145
  $ddl-delim-small-font-size: 13px !default;
142
146
  $ddl-small-closer-margin-top: -2.9em !default;
143
147
  $ddl-chip-close-hooker-small-left: 7px !default;
148
+ $ddl-chip-close-hooker-small-bigger-left: 7px !default;
144
149
  $ddl-delimviewheight-small: 24px !default;
145
150
 
146
151
  // Touch Small size
@@ -148,6 +153,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
148
153
  $ddl-bigger-small-chip-height: 26px !default;
149
154
  $ddl-chip-bigger-small-font-size: 12px !default;
150
155
  $ddl-bigger-small-chip-close-square: 26px !default;
156
+ $ddl-bigger-small-chip-close-width: 26px !default;
151
157
  $ddl-bigger-small-chip-close-font: 10px !default;
152
158
  $ddl-control-bigger-small-height: 26px !default;
153
159
  $ddl-bigger-small-input-height: 34px !default;
package/styles/multi-select/_layout.scss CHANGED
@@ -263,7 +263,11 @@
263
263
  font-family: 'e-icons';
264
264
  height: $ddl-chip-close-square;
265
265
  margin: $ddl-chip-close-margin;
266
- width: $ddl-chip-close-square;
266
+ width: $ddl-chip-close-width;
267
+ }
268
+
269
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
270
+ margin: $ddl-chip-close-rtl-margin;
267
271
  }
268
272
 
269
273
  .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -278,7 +282,7 @@
278
282
  position: absolute;
279
283
  right: $ddl-chip-hooker-right;
280
284
  top: $ddl-closer-hooker-top;
281
- width: $ddl-chip-hooker-square;
285
+ width: $ddl-chip-hooker-width;
282
286
  }
283
287
 
284
288
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -994,7 +998,7 @@ ejs-multiselect {
994
998
  .e-bigger .e-multi-select-wrapper .e-chips-close {
995
999
  @if $ddl-multiselect-skin-name == 'tailwind' {
996
1000
  height: $ddl-bigger-chip-close-square;
997
- width: $ddl-bigger-chip-close-square;
1001
+ width: $ddl-bigger-chip-close-width;
998
1002
  }
999
1003
  }
1000
1004
 
@@ -1016,7 +1020,7 @@ ejs-multiselect {
1016
1020
 
1017
1021
  .e-small .e-multi-select-wrapper .e-chips-close {
1018
1022
  height: $ddl-small-chip-close-square;
1019
- width: $ddl-small-chip-close-square;
1023
+ width: $ddl-small-chip-close-width;
1020
1024
  }
1021
1025
 
1022
1026
  .e-small .e-multi-select-wrapper {
@@ -1085,7 +1089,10 @@ ejs-multiselect {
1085
1089
 
1086
1090
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1087
1091
  height: $ddl-bigger-small-chip-close-square;
1088
- width: $ddl-bigger-small-chip-close-square;
1092
+ width: $ddl-bigger-small-chip-close-width;
1093
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1094
+ margin: 3px 10px 10px 0;
1095
+ }
1089
1096
  }
1090
1097
 
1091
1098
  .e-bigger.e-small .e-multi-select-wrapper {
package/styles/multi-select/_material-dark-definition.scss CHANGED
@@ -35,8 +35,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
35
35
  $ddl-chip-close-top: 0 !default;
36
36
  $ddl-chip-close-left: 0 !default;
37
37
  $ddl-chip-close-margin: 0 0 0 !default;
38
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
38
39
  $ddl-chip-close-square: 16px !default;
40
+ $ddl-chip-close-width: 16px !default;
39
41
  $ddl-chip-hooker-square: 24px !default;
42
+ $ddl-chip-hooker-width: 24px !default;
40
43
  $ddl-chip-close-font: 16px !default;
41
44
  $ddl-chip-height: 24px !default;
42
45
  $ddl-chip-mobile-height: 28px !default;
@@ -135,12 +138,14 @@ $ddl-select-all-height-bigger-small: 40px !default;
135
138
  $ddl-small-chip-height: 20px !default;
136
139
  $ddl-chip-small-font-size: 12px !default;
137
140
  $ddl-small-chip-close-square: 14px !default;
141
+ $ddl-small-chip-close-width: 14px !default;
138
142
  $ddl-small-chip-close-font: 14px !default;
139
143
  $ddl-control-small-height: 24px !default;
140
144
  $ddl-small-input-height: 26px !default;
141
145
  $ddl-delim-small-font-size: 12px !default;
142
146
  $ddl-small-closer-margin-top: -2.5em !default;
143
147
  $ddl-chip-close-hooker-small-left: 6px !default;
148
+ $ddl-chip-close-hooker-small-bigger-left: 6px !default;
144
149
  $ddl-delimviewheight-small: 26px !default;
145
150
 
146
151
  // Touch Small size
@@ -148,6 +153,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
148
153
  $ddl-bigger-small-chip-height: 24px !default;
149
154
  $ddl-chip-bigger-small-font-size: 13px !default;
150
155
  $ddl-bigger-small-chip-close-square: 16px !default;
156
+ $ddl-bigger-small-chip-close-width: 16px !default;
151
157
  $ddl-bigger-small-chip-close-font: 16px !default;
152
158
  $ddl-control-bigger-small-height: 28px !default;
153
159
  $ddl-bigger-small-input-height: 34px !default;
package/styles/multi-select/_material-definition.scss CHANGED
@@ -34,8 +34,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
34
34
  $ddl-chip-close-top: 0 !default;
35
35
  $ddl-chip-close-left: 0 !default;
36
36
  $ddl-chip-close-margin: 0 0 0 !default;
37
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
37
38
  $ddl-chip-close-square: 16px !default;
39
+ $ddl-chip-close-width: 16px !default;
38
40
  $ddl-chip-hooker-square: 24px !default;
41
+ $ddl-chip-hooker-width: 24px !default;
39
42
  $ddl-chip-close-font: 16px !default;
40
43
  $ddl-chip-height: 24px !default;
41
44
  $ddl-chip-mobile-height: 28px !default;
@@ -138,12 +141,14 @@ $ddl-select-all-height-small: 26px !default;
138
141
  $ddl-small-chip-height: 20px !default;
139
142
  $ddl-chip-small-font-size: 12px !default;
140
143
  $ddl-small-chip-close-square: 14px !default;
144
+ $ddl-small-chip-close-width: 14px !default;
141
145
  $ddl-small-chip-close-font: 14px !default;
142
146
  $ddl-control-small-height: 24px !default;
143
147
  $ddl-small-input-height: 26px !default;
144
148
  $ddl-delim-small-font-size: 12px !default;
145
149
  $ddl-small-closer-margin-top: -2.5em !default;
146
150
  $ddl-chip-close-hooker-small-left: 6px !default;
151
+ $ddl-chip-close-hooker-small-bigger-left: 6px !default;
147
152
  $ddl-delimviewheight-small: 26px !default;
148
153
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
149
154
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -160,6 +165,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
160
165
  $ddl-bigger-small-chip-height: 22px !default;
161
166
  $ddl-chip-bigger-small-font-size: 13px !default;
162
167
  $ddl-bigger-small-chip-close-square: 16px !default;
168
+ $ddl-bigger-small-chip-close-width: 16px !default;
163
169
  $ddl-bigger-small-chip-close-font: 16px !default;
164
170
  $ddl-control-bigger-small-height: 28px !default;
165
171
  $ddl-bigger-small-input-height: 28px !default;
package/styles/multi-select/_material3-definition.scss CHANGED
@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 6px 0 8px !default;
20
20
  $ddl-chip-close-top: 0 !default;
21
21
  $ddl-chip-close-left: 0 !default;
22
22
  $ddl-chip-close-margin: 0 0 0 !default;
23
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
23
24
  $ddl-chip-close-square: 14px !default;
25
+ $ddl-chip-close-width: 14px !default;
24
26
  $ddl-chip-hooker-square: 24px !default;
27
+ $ddl-chip-hooker-width: 24px !default;
25
28
  $ddl-chip-close-font: 14px !default;
26
29
  $ddl-chip-height: 24px !default;
27
30
  $ddl-chip-mobile-height: 30px !default;
@@ -122,12 +125,14 @@ $ddl-select-all-height-small: 26px !default;
122
125
  $ddl-small-chip-height: 20px !default;
123
126
  $ddl-chip-small-font-size: 12px !default;
124
127
  $ddl-small-chip-close-square: 12px !default;
128
+ $ddl-small-chip-close-width: 12px !default;
125
129
  $ddl-small-chip-close-font: 12px !default;
126
130
  $ddl-control-small-height: 24px !default;
127
131
  $ddl-small-input-height: 24px !default;
128
132
  $ddl-delim-small-font-size: 12px !default;
129
133
  $ddl-small-closer-margin-top: -2em !default;
130
134
  $ddl-chip-close-hooker-small-left: 0 !default;
135
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
131
136
  $ddl-delimviewheight-small: 24px !default;
132
137
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
133
138
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -140,12 +145,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
140
145
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
141
146
  $ddl-bigger-chip-close-font: 14px !default;
142
147
  $ddl-bigger-chip-close-square: 14px !default;
148
+ $ddl-bigger-chip-close-width: 14px !default;
143
149
 
144
150
  // Touch Small size
145
151
  $ddl-select-all-height-bigger-small: 40px !default;
146
152
  $ddl-bigger-small-chip-height: 26px !default;
147
153
  $ddl-chip-bigger-small-font-size: 13px !default;
148
154
  $ddl-bigger-small-chip-close-square: 14px !default;
155
+ $ddl-bigger-small-chip-close-width: 14px !default;
149
156
  $ddl-bigger-small-chip-close-font: 14px !default;
150
157
  $ddl-control-bigger-small-height: 28px !default;
151
158
  $ddl-bigger-small-input-height: 32px !default;