@syncfusion/ej2-dropdowns 24.2.8 → 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 (110) hide show
  1. package/CHANGELOG.md +23 -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 +2049 -528
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +2072 -533
  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 +11 -2
  17. package/src/combo-box/combo-box.d.ts +10 -2
  18. package/src/combo-box/combo-box.js +75 -16
  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 +65 -5
  24. package/src/drop-down-base/drop-down-base.js +242 -25
  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 -51
  27. package/src/drop-down-list/drop-down-list.js +180 -217
  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 +21 -9
  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 +8 -2
  45. package/styles/bootstrap.css +8 -2
  46. package/styles/bootstrap4.css +3 -2
  47. package/styles/bootstrap5-dark.css +3 -2
  48. package/styles/bootstrap5.css +3 -2
  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/_layout.scss +1 -1
  53. package/styles/drop-down-list/bootstrap-dark.css +1 -1
  54. package/styles/drop-down-list/bootstrap.css +1 -1
  55. package/styles/drop-down-list/bootstrap4.css +1 -1
  56. package/styles/drop-down-list/bootstrap5-dark.css +1 -1
  57. package/styles/drop-down-list/bootstrap5.css +1 -1
  58. package/styles/drop-down-list/fabric-dark.css +1 -1
  59. package/styles/drop-down-list/fabric.css +1 -1
  60. package/styles/drop-down-list/fluent-dark.css +1 -1
  61. package/styles/drop-down-list/fluent.css +1 -1
  62. package/styles/drop-down-list/highcontrast-light.css +1 -1
  63. package/styles/drop-down-list/highcontrast.css +1 -1
  64. package/styles/drop-down-list/icons/_bds.scss +14 -0
  65. package/styles/drop-down-list/material-dark.css +1 -1
  66. package/styles/drop-down-list/material.css +1 -1
  67. package/styles/drop-down-list/material3-dark.css +1 -1
  68. package/styles/drop-down-list/material3.css +1 -1
  69. package/styles/drop-down-list/tailwind-dark.css +1 -1
  70. package/styles/drop-down-list/tailwind.css +1 -1
  71. package/styles/drop-down-tree/_bds-definition.scss +61 -0
  72. package/styles/drop-down-tree/icons/_bds.scss +11 -0
  73. package/styles/fabric-dark.css +4 -2
  74. package/styles/fabric.css +4 -2
  75. package/styles/fluent-dark.css +8 -2
  76. package/styles/fluent.css +8 -2
  77. package/styles/highcontrast-light.css +4 -2
  78. package/styles/highcontrast.css +4 -2
  79. package/styles/list-box/_bds-definition.scss +136 -0
  80. package/styles/list-box/icons/_bds.scss +25 -0
  81. package/styles/material-dark.css +3 -2
  82. package/styles/material.css +3 -2
  83. package/styles/material3-dark.css +3 -2
  84. package/styles/material3.css +3 -2
  85. package/styles/mention/_bds-definition.scss +1 -0
  86. package/styles/multi-select/_bds-definition.scss +235 -0
  87. package/styles/multi-select/_bootstrap-dark-definition.scss +4 -0
  88. package/styles/multi-select/_bootstrap-definition.scss +4 -0
  89. package/styles/multi-select/_fluent-definition.scss +5 -0
  90. package/styles/multi-select/_layout.scss +8 -1
  91. package/styles/multi-select/bootstrap-dark.css +7 -1
  92. package/styles/multi-select/bootstrap.css +7 -1
  93. package/styles/multi-select/bootstrap4.css +2 -1
  94. package/styles/multi-select/bootstrap5-dark.css +2 -1
  95. package/styles/multi-select/bootstrap5.css +2 -1
  96. package/styles/multi-select/fabric-dark.css +3 -1
  97. package/styles/multi-select/fabric.css +3 -1
  98. package/styles/multi-select/fluent-dark.css +7 -1
  99. package/styles/multi-select/fluent.css +7 -1
  100. package/styles/multi-select/highcontrast-light.css +3 -1
  101. package/styles/multi-select/highcontrast.css +3 -1
  102. package/styles/multi-select/icons/_bds.scss +26 -0
  103. package/styles/multi-select/material-dark.css +2 -1
  104. package/styles/multi-select/material.css +2 -1
  105. package/styles/multi-select/material3-dark.css +2 -1
  106. package/styles/multi-select/material3.css +2 -1
  107. package/styles/multi-select/tailwind-dark.css +2 -1
  108. package/styles/multi-select/tailwind.css +2 -1
  109. package/styles/tailwind-dark.css +3 -2
  110. package/styles/tailwind.css +3 -2
@@ -507,7 +507,7 @@
507
507
  padding: 4px 0;
508
508
  }
509
509
 
510
- .e-popup.e-ddl-device.e-popup-close {
510
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
511
511
  display: block;
512
512
  visibility: hidden;
513
513
  }
@@ -1495,8 +1495,10 @@ ejs-dropdownlist {
1495
1495
  margin-top: -3.5em;
1496
1496
  }
1497
1497
 
1498
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1498
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1499
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1499
1500
  margin-top: -3.5em;
1501
+ margin-top: -3.2em;
1500
1502
  }
1501
1503
 
1502
1504
  .e-multi-select-wrapper input[type=text] {
package/styles/fabric.css CHANGED
@@ -500,7 +500,7 @@
500
500
  padding: 4px 0;
501
501
  }
502
502
 
503
- .e-popup.e-ddl-device.e-popup-close {
503
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
504
504
  display: block;
505
505
  visibility: hidden;
506
506
  }
@@ -1484,8 +1484,10 @@ ejs-dropdownlist {
1484
1484
  margin-top: -3.5em;
1485
1485
  }
1486
1486
 
1487
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1487
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1488
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1488
1489
  margin-top: -3.5em;
1490
+ margin-top: -3.2em;
1489
1491
  }
1490
1492
 
1491
1493
  .e-multi-select-wrapper input[type=text] {
@@ -593,7 +593,7 @@
593
593
  .e-bigger.e-ddl.e-popup .e-list-group-item {
594
594
  font-size: 16px;
595
595
  }
596
- .e-popup.e-ddl-device.e-popup-close {
596
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
597
597
  display: block;
598
598
  visibility: hidden;
599
599
  }
@@ -1344,6 +1344,11 @@ ejs-dropdownlist {
1344
1344
  border-left-width: 0;
1345
1345
  }
1346
1346
 
1347
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
1348
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1349
+ margin-top: -1.5em;
1350
+ }
1351
+
1347
1352
  .e-multiselect.e-input-group .e-ddl-icon::before {
1348
1353
  content: "\e729";
1349
1354
  font-family: "e-icons";
@@ -1709,7 +1714,8 @@ ejs-dropdownlist {
1709
1714
  font-size: 14px;
1710
1715
  }
1711
1716
 
1712
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1717
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1718
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1713
1719
  margin-top: -2.7em;
1714
1720
  margin-top: -2.25em;
1715
1721
  }
package/styles/fluent.css CHANGED
@@ -593,7 +593,7 @@
593
593
  .e-bigger.e-ddl.e-popup .e-list-group-item {
594
594
  font-size: 16px;
595
595
  }
596
- .e-popup.e-ddl-device.e-popup-close {
596
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
597
597
  display: block;
598
598
  visibility: hidden;
599
599
  }
@@ -1344,6 +1344,11 @@ ejs-dropdownlist {
1344
1344
  border-left-width: 0;
1345
1345
  }
1346
1346
 
1347
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
1348
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1349
+ margin-top: -1.5em;
1350
+ }
1351
+
1347
1352
  .e-multiselect.e-input-group .e-ddl-icon::before {
1348
1353
  content: "\e729";
1349
1354
  font-family: "e-icons";
@@ -1709,7 +1714,8 @@ ejs-dropdownlist {
1709
1714
  font-size: 14px;
1710
1715
  }
1711
1716
 
1712
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1717
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1718
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1713
1719
  margin-top: -2.7em;
1714
1720
  margin-top: -2.25em;
1715
1721
  }
@@ -518,7 +518,7 @@
518
518
  padding: 4px 0;
519
519
  }
520
520
 
521
- .e-popup.e-ddl-device.e-popup-close {
521
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
522
522
  display: block;
523
523
  visibility: hidden;
524
524
  }
@@ -1600,8 +1600,10 @@ ejs-dropdownlist {
1600
1600
  margin-top: -3.5em;
1601
1601
  }
1602
1602
 
1603
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1603
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1604
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1604
1605
  margin-top: -3.5em;
1606
+ margin-top: -3.2em;
1605
1607
  }
1606
1608
 
1607
1609
  .e-multi-select-wrapper input[type=text] {
@@ -518,7 +518,7 @@
518
518
  padding: 4px 0;
519
519
  }
520
520
 
521
- .e-popup.e-ddl-device.e-popup-close {
521
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
522
522
  display: block;
523
523
  visibility: hidden;
524
524
  }
@@ -1611,8 +1611,10 @@ ejs-dropdownlist {
1611
1611
  margin-top: -3.5em;
1612
1612
  }
1613
1613
 
1614
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1614
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
1615
+ .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1615
1616
  margin-top: -3.5em;
1617
+ margin-top: -3.2em;
1616
1618
  }
1617
1619
 
1618
1620
  .e-multi-select-wrapper input[type=text] {
@@ -0,0 +1,136 @@
1
+ //layout variables
2
+ $listbox-font-family: $font-family !default;
3
+ $listbox-icon-margin-right: 16px !default;
4
+ $listbox-icon-line-height: 34px !default;
5
+ $listbox-icon-back-margin: 2px !default;
6
+ $listbox-rtl-icon-back-margin: -2px !default;
7
+ $listbox-item-height: 38px !default;
8
+ $listbox-item-line-height: 1 !default;
9
+ $listbox-item-padding: 12px 12px !default;
10
+ $listbox-bigger-item-padding: 12px 16px !default;
11
+ $listbox-header-text-padding: 12px !default;
12
+ $listbox-header-font-size: $text-xs !default;
13
+ $listbox-header-height: 18px !default;
14
+ $listbox-header-font-weight: $font-weight-medium !default;
15
+ $listbox-header-line-height: 18px !default;
16
+ $listbox-header-padding-bottom: 0 !default;
17
+ $listbox-touch-back-icon-padding: 0 !default;
18
+ $listbox-border-bottom: 0 !default;
19
+ $listbox-border-top: 0 !default;
20
+ $listbox-border-left: 0 !default;
21
+ $listbox-border-right: 0 !default;
22
+ $listbox-group-first-border-bottom: 0 !default;
23
+ $listbox-group-border-top: 1px !default;
24
+ $listbox-group-border-bottom: 0 !default;
25
+ $listbox-groupheader-item-height: 30px !default;
26
+ $listbox-groupheader-item-line-height: 7px !default;
27
+ $listbox-groupheader-font-size: $text-xs !default;
28
+ $listbox-border-size: 0 !default;
29
+ $listbox-font-size: $text-sm !default;
30
+ $listbox-back-padding-right: 8px !default;
31
+ $listbox-touch-item-height: 48px !default;
32
+ $listbox-touch-item-line-height: 1.6 !default;
33
+ $listbox-touch-item-font-size: $text-base !default;
34
+ $listbox-touch-groupheader-height: 38px !default;
35
+ $listbox-touch-groupheader-line-height: 15px !default;
36
+ $listbox-touch-header-height: 22px !default;
37
+ $listbox-touch-header-font-weight: $font-weight-medium !default;
38
+ $listbox-touch-header-font-size: $text-sm !default;
39
+ $listbox-touch-header-line-height: 22px !default;
40
+ $listbox-touch-header-icon-margin-top: 2px !default;
41
+ $listbox-checkbox-right-margin: -2px 0 0 8px !default;
42
+ $listbox-checkbox-left-margin: -2px 8px 0 0 !default;
43
+ $listbox-rtl-checkbox-left-margin: -2px 0 0 8px !default;
44
+ $listbox-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
45
+
46
+ //ListView In-built template variables
47
+ $listbox-template-padding: 8px 16px !default;
48
+ $listbox-template-avatar-padding-right: 16px !default;
49
+ $listbox-template-avatar-padding-left: 68px !default;
50
+ $listbox-template-avatar-rightposition-padding-right: 68px !default;
51
+ $listbox-template-avatar-rightposition-padding-left: 16px !default;
52
+ $listbox-template-avatar-size: 40px !default;
53
+ $listbox-template-avatar-top: 0 !default;
54
+ $listbox-template-avatar-left: 0 !default;
55
+ $listbox-template-avatar-rightposition-right: 0 !default;
56
+ $listbox-template-badge-height: 18px !default;
57
+ $listbox-template-badge-width: 32px !default;
58
+ $listbox-template-badge-line-height: 16px !default;
59
+ $listbox-template-badge-font-size: $text-xxs !default;
60
+ $listbox-template-badge-right: 12px !default;
61
+ $listbox-template-avatar-badge-padding-right: 10px !default;
62
+ $listbox-template-avatar-badge-padding-left: 68px !default;
63
+ $listbox-template-badgewithoutavatar-padding-right: 10px !default;
64
+ $listbox-template-badgewithoutavatar-padding-left: 16px !default;
65
+ $listbox-template-item-padding: 8px 0 !default;
66
+ $listbox-template-multiline-header-padding: 0 !default;
67
+ $listbox-template-multiline-content-padding: 2px 0 0 0 !default;
68
+ $listbox-template-multiline-header-font-size: $text-sm !default;
69
+ $listbox-template-multiline-padding: 4px !default;
70
+ $listbox-template-multiline-content-font-size: $text-sm !default;
71
+ $listbox-template-multiline-avatar-top: 0 !default;
72
+ $listbox-filter-height: calc(100% - 47px) !default;
73
+ $listbox-filter-small-height: calc(100% - 45px) !default;
74
+ $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
75
+ $listbox-filter-bigger-height: calc(100% - 55px) !default;
76
+
77
+ $listbox-border-color: $border-light;
78
+ $badge-color: $primary-text-color !default;
79
+ $badge-bgcolor: $primary !default;
80
+
81
+ $select-all-border-color: $border-light !default;
82
+ $listbox-text-color: $content-text-color !default;
83
+ $listbox-text-disabled: $content-text-color-disabled !default;
84
+ $listbox-icon-color: $icon-color !default;
85
+ $listbox-icon-disabled: $icon-color-disabled !default;
86
+ $listbox-item-hover-bg: $content-bg-color-alt2 !default;
87
+ $listbox-background: $transparent !default;
88
+ $listbox-line-color: $border-light !default;
89
+ $listbox-hover-border-color: transparent !default;
90
+ $listbox-border-bottom-color: transparent !default;
91
+ $listbox-border-top-color: transparent !default;
92
+ $listbox-border-right-color: transparent !default;
93
+ $listbox-border-left-color: transparent !default;
94
+ $listbox-text-hover-color: $content-text-color-hover !default;
95
+ $listbox-item-active-bg: $content-bg-color-alt2 !default;
96
+ $listbox-text-active-color: $content-text-color-selected !default;
97
+ $listbox-header-text-color: $content-text-color-alt2 !default;
98
+ $listbox-header-text-disabled: $content-text-color-disabled !default;
99
+ $listbox-header-bg: $content-bg-color-alt2 !default;
100
+ $listbox-header-icon-color: $icon-color !default;
101
+ $listbox-header-icon-disabled: $icon-color-disabled !default;
102
+ $listbox-header-border: $border-light !default;
103
+ $checkmark-bgcolor: $primary !default;
104
+ $checkmark-border-color: transparent !default;
105
+ $checkmark-color: $primary-text-color !default;
106
+ $listbox-groupheader-text-color: $content-text-color-alt2 !default;
107
+ $listbox-groupheader-bg: $content-bg-color-alt2 !default;
108
+ $listbox-groupheader-border: $black !default;
109
+ $listbox-groupheader-icon: $icon-color !default;
110
+ $listbox-template-multiline-header-color: $content-text-color !default;
111
+ $listbox-template-multiline-content-color: $content-text-color-alt2 !default;
112
+ $listbox-select-height: calc(100% - 38px) !default;
113
+ $listbox-select-bigger-height: calc(100% - 48px) !default;
114
+ $listbox-filterselect-height: calc(100% - 38px) !default;
115
+ $listbox-filterselect-bigger-height: calc(100% - 47px) !default;
116
+ $listbox-mat-filter-height: calc(100% - 50px) !default;
117
+ $listbox-mat-filter-bigger-height: calc(100% - 58px) !default;
118
+ $listbox-filter-height: calc(100% - 50px) !default;
119
+ $listbox-filter-bigger-height: calc(100% - 58px) !default;
120
+ $listbox-ej2-filterselect-height: calc(100% - 87.5px) !default;
121
+ $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
122
+
123
+ /* stylelint-disable */
124
+ .e-listbox-wrapper{
125
+ padding: 0 12px !important;
126
+ }
127
+
128
+ .e-listbox-wrapper,
129
+ .e-listbox-container,
130
+ .e-listboxtool-wrapper {
131
+ &:not(.e-list-template) .e-list-item,
132
+ .e-list-nrt,
133
+ .e-selectall-parent {
134
+ border-radius: 6px !important;
135
+ }
136
+ }
@@ -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
+ }
@@ -537,7 +537,7 @@
537
537
  padding: 4px 0;
538
538
  }
539
539
 
540
- .e-popup.e-ddl-device.e-popup-close {
540
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
541
541
  display: block;
542
542
  visibility: hidden;
543
543
  }
@@ -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
 
@@ -570,7 +570,7 @@
570
570
  padding: 4px 0;
571
571
  }
572
572
 
573
- .e-popup.e-ddl-device.e-popup-close {
573
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
574
574
  display: block;
575
575
  visibility: hidden;
576
576
  }
@@ -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
 
@@ -644,7 +644,7 @@
644
644
  padding: 4px 0;
645
645
  }
646
646
 
647
- .e-popup.e-ddl-device.e-popup-close {
647
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
648
648
  display: block;
649
649
  visibility: hidden;
650
650
  }
@@ -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
 
@@ -700,7 +700,7 @@
700
700
  padding: 4px 0;
701
701
  }
702
702
 
703
- .e-popup.e-ddl-device.e-popup-close {
703
+ .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
704
704
  display: block;
705
705
  visibility: hidden;
706
706
  }
@@ -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;