@syncfusion/ej2-dropdowns 26.1.40 → 26.1.42

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 (57) hide show
  1. package/dist/ej2-dropdowns.min.js +2 -2
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +169 -72
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +170 -75
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +10 -10
  12. package/src/drop-down-list/drop-down-list.js +20 -9
  13. package/src/drop-down-tree/drop-down-tree.js +5 -3
  14. package/src/list-box/list-box.js +73 -31
  15. package/src/mention/mention.js +2 -2
  16. package/src/multi-select/multi-select.d.ts +1 -0
  17. package/src/multi-select/multi-select.js +70 -30
  18. package/styles/bootstrap-dark.css +1 -1
  19. package/styles/bootstrap.css +1 -1
  20. package/styles/bootstrap4.css +1 -1
  21. package/styles/bootstrap5-dark.css +1 -1
  22. package/styles/bootstrap5.css +1 -1
  23. package/styles/drop-down-tree/_layout.scss +1 -1
  24. package/styles/drop-down-tree/bootstrap-dark.css +1 -1
  25. package/styles/drop-down-tree/bootstrap.css +1 -1
  26. package/styles/drop-down-tree/bootstrap4.css +1 -1
  27. package/styles/drop-down-tree/bootstrap5-dark.css +1 -1
  28. package/styles/drop-down-tree/bootstrap5.css +1 -1
  29. package/styles/drop-down-tree/fabric-dark.css +1 -1
  30. package/styles/drop-down-tree/fabric.css +1 -1
  31. package/styles/drop-down-tree/fluent-dark.css +1 -1
  32. package/styles/drop-down-tree/fluent.css +1 -1
  33. package/styles/drop-down-tree/fluent2.css +1 -1
  34. package/styles/drop-down-tree/highcontrast-light.css +1 -1
  35. package/styles/drop-down-tree/highcontrast.css +1 -1
  36. package/styles/drop-down-tree/material-dark.css +1 -1
  37. package/styles/drop-down-tree/material.css +1 -1
  38. package/styles/drop-down-tree/material3-dark.css +1 -1
  39. package/styles/drop-down-tree/material3.css +1 -1
  40. package/styles/drop-down-tree/tailwind-dark.css +1 -1
  41. package/styles/drop-down-tree/tailwind.css +1 -1
  42. package/styles/fabric-dark.css +1 -1
  43. package/styles/fabric.css +1 -1
  44. package/styles/fluent-dark.css +1 -1
  45. package/styles/fluent.css +1 -1
  46. package/styles/fluent2.css +3 -2
  47. package/styles/highcontrast-light.css +1 -1
  48. package/styles/highcontrast.css +1 -1
  49. package/styles/material-dark.css +1 -1
  50. package/styles/material.css +1 -1
  51. package/styles/material3-dark.css +1 -1
  52. package/styles/material3.css +1 -1
  53. package/styles/multi-select/_fluent2-definition.scss +2 -1
  54. package/styles/multi-select/_theme.scss +3 -0
  55. package/styles/multi-select/fluent2.css +2 -1
  56. package/styles/tailwind-dark.css +1 -1
  57. package/styles/tailwind.css +1 -1
@@ -241,7 +241,7 @@
241
241
  .e-ddt .e-dropdowntree.e-chip-input,
242
242
  .e-ddt input[readonly].e-input.e-chip-input {
243
243
  width: 0;
244
- display: none;
244
+ visibility: hidden;
245
245
  }
246
246
  .e-ddt.e-popup {
247
247
  border: 1px solid #444c54;
@@ -241,7 +241,7 @@
241
241
  .e-ddt .e-dropdowntree.e-chip-input,
242
242
  .e-ddt input[readonly].e-input.e-chip-input {
243
243
  width: 0;
244
- display: none;
244
+ visibility: hidden;
245
245
  }
246
246
  .e-ddt.e-popup {
247
247
  border: 1px solid #dee2e6;
@@ -220,7 +220,7 @@
220
220
  .e-ddt .e-dropdowntree.e-chip-input,
221
221
  .e-ddt input[readonly].e-input.e-chip-input {
222
222
  width: 0;
223
- display: none;
223
+ visibility: hidden;
224
224
  }
225
225
  .e-ddt.e-popup {
226
226
  border: 1px solid #414040;
@@ -221,7 +221,7 @@
221
221
  .e-ddt .e-dropdowntree.e-chip-input,
222
222
  .e-ddt input[readonly].e-input.e-chip-input {
223
223
  width: 0;
224
- display: none;
224
+ visibility: hidden;
225
225
  }
226
226
  .e-ddt.e-popup {
227
227
  border: 1px solid #eaeaea;
@@ -254,7 +254,7 @@
254
254
  .e-ddt .e-dropdowntree.e-chip-input,
255
255
  .e-ddt input[readonly].e-input.e-chip-input {
256
256
  width: 0;
257
- display: none;
257
+ visibility: hidden;
258
258
  }
259
259
  .e-ddt.e-popup {
260
260
  border-radius: 2px;
@@ -254,7 +254,7 @@
254
254
  .e-ddt .e-dropdowntree.e-chip-input,
255
255
  .e-ddt input[readonly].e-input.e-chip-input {
256
256
  width: 0;
257
- display: none;
257
+ visibility: hidden;
258
258
  }
259
259
  .e-ddt.e-popup {
260
260
  border-radius: 2px;
@@ -1493,7 +1493,7 @@
1493
1493
  .e-ddt .e-dropdowntree.e-chip-input,
1494
1494
  .e-ddt input[readonly].e-input.e-chip-input {
1495
1495
  width: 0;
1496
- display: none;
1496
+ visibility: hidden;
1497
1497
  }
1498
1498
  .e-ddt.e-popup {
1499
1499
  border: 1px solid var(--color-sf-border-light);
@@ -234,7 +234,7 @@
234
234
  .e-ddt .e-dropdowntree.e-chip-input,
235
235
  .e-ddt input[readonly].e-input.e-chip-input {
236
236
  width: 0;
237
- display: none;
237
+ visibility: hidden;
238
238
  }
239
239
  .e-ddt.e-popup {
240
240
  border: 1px solid #757575;
@@ -235,7 +235,7 @@
235
235
  .e-ddt .e-dropdowntree.e-chip-input,
236
236
  .e-ddt input[readonly].e-input.e-chip-input {
237
237
  width: 0;
238
- display: none;
238
+ visibility: hidden;
239
239
  }
240
240
  .e-ddt.e-popup {
241
241
  border: 1px solid #969696;
@@ -328,7 +328,7 @@
328
328
  .e-ddt .e-dropdowntree.e-chip-input,
329
329
  .e-ddt input[readonly].e-input.e-chip-input {
330
330
  width: 0;
331
- display: none;
331
+ visibility: hidden;
332
332
  }
333
333
  .e-ddt.e-popup {
334
334
  border: 1px solid transparent;
@@ -349,7 +349,7 @@
349
349
  .e-ddt .e-dropdowntree.e-chip-input,
350
350
  .e-ddt input[readonly].e-input.e-chip-input {
351
351
  width: 0;
352
- display: none;
352
+ visibility: hidden;
353
353
  }
354
354
  .e-ddt.e-popup {
355
355
  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
@@ -310,7 +310,7 @@
310
310
  .e-ddt .e-dropdowntree.e-chip-input,
311
311
  .e-ddt input[readonly].e-input.e-chip-input {
312
312
  width: 0;
313
- display: none;
313
+ visibility: hidden;
314
314
  }
315
315
  .e-ddt.e-popup {
316
316
  margin-top: 2px;
@@ -366,7 +366,7 @@
366
366
  .e-ddt .e-dropdowntree.e-chip-input,
367
367
  .e-ddt input[readonly].e-input.e-chip-input {
368
368
  width: 0;
369
- display: none;
369
+ visibility: hidden;
370
370
  }
371
371
  .e-ddt.e-popup {
372
372
  margin-top: 2px;
@@ -259,7 +259,7 @@
259
259
  .e-ddt .e-dropdowntree.e-chip-input,
260
260
  .e-ddt input[readonly].e-input.e-chip-input {
261
261
  width: 0;
262
- display: none;
262
+ visibility: hidden;
263
263
  }
264
264
  .e-ddt.e-popup {
265
265
  border: 1px solid #4b5563;
@@ -259,7 +259,7 @@
259
259
  .e-ddt .e-dropdowntree.e-chip-input,
260
260
  .e-ddt input[readonly].e-input.e-chip-input {
261
261
  width: 0;
262
- display: none;
262
+ visibility: hidden;
263
263
  }
264
264
  .e-ddt.e-popup {
265
265
  border: 1px solid #e5e7eb;
@@ -935,7 +935,7 @@ ejs-dropdownlist {
935
935
  .e-ddt .e-dropdowntree.e-chip-input,
936
936
  .e-ddt input[readonly].e-input.e-chip-input {
937
937
  width: 0;
938
- display: none;
938
+ visibility: hidden;
939
939
  }
940
940
  .e-ddt.e-popup {
941
941
  border: 1px solid #414040;
package/styles/fabric.css CHANGED
@@ -929,7 +929,7 @@ ejs-dropdownlist {
929
929
  .e-ddt .e-dropdowntree.e-chip-input,
930
930
  .e-ddt input[readonly].e-input.e-chip-input {
931
931
  width: 0;
932
- display: none;
932
+ visibility: hidden;
933
933
  }
934
934
  .e-ddt.e-popup {
935
935
  border: 1px solid #eaeaea;
@@ -1027,7 +1027,7 @@ ejs-dropdownlist {
1027
1027
  .e-ddt .e-dropdowntree.e-chip-input,
1028
1028
  .e-ddt input[readonly].e-input.e-chip-input {
1029
1029
  width: 0;
1030
- display: none;
1030
+ visibility: hidden;
1031
1031
  }
1032
1032
  .e-ddt.e-popup {
1033
1033
  border-radius: 2px;
package/styles/fluent.css CHANGED
@@ -1027,7 +1027,7 @@ ejs-dropdownlist {
1027
1027
  .e-ddt .e-dropdowntree.e-chip-input,
1028
1028
  .e-ddt input[readonly].e-input.e-chip-input {
1029
1029
  width: 0;
1030
- display: none;
1030
+ visibility: hidden;
1031
1031
  }
1032
1032
  .e-ddt.e-popup {
1033
1033
  border-radius: 2px;
@@ -2230,7 +2230,7 @@ ejs-dropdownlist {
2230
2230
  .e-ddt .e-dropdowntree.e-chip-input,
2231
2231
  .e-ddt input[readonly].e-input.e-chip-input {
2232
2232
  width: 0;
2233
- display: none;
2233
+ visibility: hidden;
2234
2234
  }
2235
2235
  .e-ddt.e-popup {
2236
2236
  border: 1px solid var(--color-sf-border-light);
@@ -3640,7 +3640,8 @@ ejs-multiselect {
3640
3640
  }
3641
3641
 
3642
3642
  .e-multi-select-wrapper .e-chips {
3643
- background-color: var(--color-sf-content-bg-color-alt3);
3643
+ background-color: var(--color-sf-chip-bg-color);
3644
+ border: 1px solid var(--color-sf-chip-border-color);
3644
3645
  border-radius: 6px;
3645
3646
  height: 22px;
3646
3647
  }
@@ -946,7 +946,7 @@ ejs-dropdownlist {
946
946
  .e-ddt .e-dropdowntree.e-chip-input,
947
947
  .e-ddt input[readonly].e-input.e-chip-input {
948
948
  width: 0;
949
- display: none;
949
+ visibility: hidden;
950
950
  }
951
951
  .e-ddt.e-popup {
952
952
  border: 1px solid #757575;
@@ -947,7 +947,7 @@ ejs-dropdownlist {
947
947
  .e-ddt .e-dropdowntree.e-chip-input,
948
948
  .e-ddt input[readonly].e-input.e-chip-input {
949
949
  width: 0;
950
- display: none;
950
+ visibility: hidden;
951
951
  }
952
952
  .e-ddt.e-popup {
953
953
  border: 1px solid #969696;
@@ -1077,7 +1077,7 @@ ejs-dropdownlist {
1077
1077
  .e-ddt .e-dropdowntree.e-chip-input,
1078
1078
  .e-ddt input[readonly].e-input.e-chip-input {
1079
1079
  width: 0;
1080
- display: none;
1080
+ visibility: hidden;
1081
1081
  }
1082
1082
  .e-ddt.e-popup {
1083
1083
  border: 1px solid transparent;
@@ -1122,7 +1122,7 @@ ejs-dropdownlist {
1122
1122
  .e-ddt .e-dropdowntree.e-chip-input,
1123
1123
  .e-ddt input[readonly].e-input.e-chip-input {
1124
1124
  width: 0;
1125
- display: none;
1125
+ visibility: hidden;
1126
1126
  }
1127
1127
  .e-ddt.e-popup {
1128
1128
  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
@@ -1109,7 +1109,7 @@ ejs-dropdownlist {
1109
1109
  .e-ddt .e-dropdowntree.e-chip-input,
1110
1110
  .e-ddt input[readonly].e-input.e-chip-input {
1111
1111
  width: 0;
1112
- display: none;
1112
+ visibility: hidden;
1113
1113
  }
1114
1114
  .e-ddt.e-popup {
1115
1115
  margin-top: 2px;
@@ -1165,7 +1165,7 @@ ejs-dropdownlist {
1165
1165
  .e-ddt .e-dropdowntree.e-chip-input,
1166
1166
  .e-ddt input[readonly].e-input.e-chip-input {
1167
1167
  width: 0;
1168
- display: none;
1168
+ visibility: hidden;
1169
1169
  }
1170
1170
  .e-ddt.e-popup {
1171
1171
  margin-top: 2px;
@@ -178,7 +178,8 @@ $ddl-closer-margin-top-bigger-small: -1.64em !default;
178
178
  $ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
179
179
  $ddl-chip-selected-shadow-value: 0 2px 3px 1px $ddl-list-box-shadow-color !default;
180
180
  $ddl-chip-mobile-font: $content-text-color !default;
181
- $ddl-chip-bg-color: $content-bg-color-alt3 !default;
181
+ $ddl-chip-bg-color: $chip-bg-color !default;
182
+ $dd-chip-border: 1px solid $chip-border-color !default;
182
183
  $ddl-chip-hover-bg-color: $content-bg-color-alt4 !default;
183
184
  $ddl-chip-hover-font-color: $content-text-color-hover !default;
184
185
  $ddl-sel-hover-chip-bg-color: $content-bg-color-alt5 !default;
@@ -48,6 +48,9 @@
48
48
  @if $ddl-multiselect-skin-name != 'Material3' {
49
49
  background-color: $ddl-chip-bg-color;
50
50
  }
51
+ @if $ddl-multiselect-skin-name == 'fluent2' {
52
+ border: $dd-chip-border;
53
+ }
51
54
  border-radius: $ddl-chip-radius;
52
55
  height: $ddl-chip-height;
53
56
  }
@@ -2476,7 +2476,8 @@ ejs-multiselect {
2476
2476
  }
2477
2477
 
2478
2478
  .e-multi-select-wrapper .e-chips {
2479
- background-color: var(--color-sf-content-bg-color-alt3);
2479
+ background-color: var(--color-sf-chip-bg-color);
2480
+ border: 1px solid var(--color-sf-chip-border-color);
2480
2481
  border-radius: 6px;
2481
2482
  height: 22px;
2482
2483
  }
@@ -1031,7 +1031,7 @@ ejs-dropdownlist {
1031
1031
  .e-ddt .e-dropdowntree.e-chip-input,
1032
1032
  .e-ddt input[readonly].e-input.e-chip-input {
1033
1033
  width: 0;
1034
- display: none;
1034
+ visibility: hidden;
1035
1035
  }
1036
1036
  .e-ddt.e-popup {
1037
1037
  border: 1px solid #4b5563;
@@ -1031,7 +1031,7 @@ ejs-dropdownlist {
1031
1031
  .e-ddt .e-dropdowntree.e-chip-input,
1032
1032
  .e-ddt input[readonly].e-input.e-chip-input {
1033
1033
  width: 0;
1034
- display: none;
1034
+ visibility: hidden;
1035
1035
  }
1036
1036
  .e-ddt.e-popup {
1037
1037
  border: 1px solid #e5e7eb;