@syncfusion/ej2-dropdowns 18.1.57 → 18.2.44-4569

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 (183) hide show
  1. package/.eslintrc.json +244 -0
  2. package/CHANGELOG.md +1524 -1514
  3. package/README.md +118 -118
  4. package/dist/ej2-dropdowns.umd.min.js +1 -10
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +198 -126
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +290 -217
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +1 -10
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/global/index.d.ts +0 -9
  13. package/dist/ts/auto-complete/auto-complete.ts +527 -0
  14. package/dist/ts/combo-box/combo-box.ts +957 -0
  15. package/dist/ts/common/highlight-search.ts +47 -0
  16. package/dist/ts/common/incremental-search.ts +81 -0
  17. package/dist/ts/drop-down-base/drop-down-base.ts +1572 -0
  18. package/dist/ts/drop-down-list/drop-down-list.ts +2993 -0
  19. package/dist/ts/drop-down-tree/drop-down-tree.ts +3066 -0
  20. package/dist/ts/list-box/list-box.ts +2317 -0
  21. package/dist/ts/multi-select/checkbox-selection.ts +528 -0
  22. package/dist/ts/multi-select/float-label.ts +155 -0
  23. package/dist/ts/multi-select/interface.ts +66 -0
  24. package/dist/ts/multi-select/multi-select.ts +4216 -0
  25. package/helpers/e2e/index.js +3 -3
  26. package/license +2 -2
  27. package/package.json +77 -77
  28. package/src/auto-complete/auto-complete-model.d.ts +179 -179
  29. package/src/auto-complete/auto-complete.d.ts +12 -12
  30. package/src/auto-complete/auto-complete.js +21 -21
  31. package/src/combo-box/combo-box-model.d.ts +212 -212
  32. package/src/combo-box/combo-box.d.ts +27 -27
  33. package/src/combo-box/combo-box.js +29 -29
  34. package/src/common/incremental-search.d.ts +1 -1
  35. package/src/common/incremental-search.js +4 -2
  36. package/src/drop-down-base/drop-down-base-model.d.ts +191 -191
  37. package/src/drop-down-base/drop-down-base.d.ts +17 -17
  38. package/src/drop-down-base/drop-down-base.js +20 -20
  39. package/src/drop-down-list/drop-down-list-model.d.ts +222 -222
  40. package/src/drop-down-list/drop-down-list.d.ts +3 -2
  41. package/src/drop-down-list/drop-down-list.js +43 -30
  42. package/src/drop-down-tree/drop-down-tree-model.d.ts +344 -344
  43. package/src/drop-down-tree/drop-down-tree.js +32 -26
  44. package/src/list-box/index.d.ts +1 -0
  45. package/src/list-box/index.js +1 -0
  46. package/src/list-box/list-box-model.d.ts +156 -156
  47. package/src/list-box/list-box.d.ts +2 -2
  48. package/src/list-box/list-box.js +57 -59
  49. package/src/multi-select/index.d.ts +1 -0
  50. package/src/multi-select/index.js +1 -0
  51. package/src/multi-select/multi-select-model.d.ts +452 -452
  52. package/src/multi-select/multi-select.d.ts +2 -0
  53. package/src/multi-select/multi-select.js +98 -43
  54. package/styles/_all.scss +3 -3
  55. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  56. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  57. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  58. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  59. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  60. package/styles/bootstrap-dark.css +67 -61
  61. package/styles/bootstrap.css +69 -63
  62. package/styles/bootstrap4.css +81 -61
  63. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  64. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  65. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  66. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  67. package/styles/combo-box/_material-dark-definition.scss +2 -2
  68. package/styles/drop-down-base/_all.scss +2 -2
  69. package/styles/drop-down-base/_bootstrap-dark-definition.scss +64 -64
  70. package/styles/drop-down-base/_bootstrap-definition.scss +64 -64
  71. package/styles/drop-down-base/_bootstrap4-definition.scss +78 -78
  72. package/styles/drop-down-base/_definition.scss +23 -23
  73. package/styles/drop-down-base/_fabric-dark-definition.scss +68 -68
  74. package/styles/drop-down-base/_fabric-definition.scss +66 -66
  75. package/styles/drop-down-base/_highcontrast-definition.scss +82 -82
  76. package/styles/drop-down-base/_highcontrast-light-definition.scss +81 -81
  77. package/styles/drop-down-base/_layout.scss +108 -108
  78. package/styles/drop-down-base/_material-dark-definition.scss +67 -67
  79. package/styles/drop-down-base/_material-definition.scss +65 -65
  80. package/styles/drop-down-base/_theme.scss +242 -242
  81. package/styles/drop-down-list/_all.scss +2 -2
  82. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  83. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  84. package/styles/drop-down-list/_bootstrap4-definition.scss +184 -184
  85. package/styles/drop-down-list/_fabric-dark-definition.scss +127 -127
  86. package/styles/drop-down-list/_fabric-definition.scss +122 -122
  87. package/styles/drop-down-list/_highcontrast-definition.scss +131 -131
  88. package/styles/drop-down-list/_highcontrast-light-definition.scss +133 -133
  89. package/styles/drop-down-list/_layout.scss +218 -218
  90. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  91. package/styles/drop-down-list/_material-definition.scss +166 -166
  92. package/styles/drop-down-list/_theme.scss +10 -10
  93. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  94. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  95. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  96. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  97. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  98. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  99. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  100. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  101. package/styles/drop-down-list/icons/_material.scss +14 -14
  102. package/styles/drop-down-list/material.css +9 -0
  103. package/styles/drop-down-tree/_all.scss +2 -2
  104. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +62 -49
  105. package/styles/drop-down-tree/_bootstrap-definition.scss +62 -49
  106. package/styles/drop-down-tree/_bootstrap4-definition.scss +63 -50
  107. package/styles/drop-down-tree/_fabric-dark-definition.scss +63 -49
  108. package/styles/drop-down-tree/_fabric-definition.scss +63 -49
  109. package/styles/drop-down-tree/_highcontrast-definition.scss +63 -49
  110. package/styles/drop-down-tree/_highcontrast-light-definition.scss +63 -49
  111. package/styles/drop-down-tree/_layout.scss +437 -398
  112. package/styles/drop-down-tree/_material-dark-definition.scss +61 -54
  113. package/styles/drop-down-tree/_material-definition.scss +61 -54
  114. package/styles/drop-down-tree/_theme.scss +68 -63
  115. package/styles/drop-down-tree/bootstrap-dark.css +67 -61
  116. package/styles/drop-down-tree/bootstrap.css +69 -63
  117. package/styles/drop-down-tree/bootstrap4.css +81 -61
  118. package/styles/drop-down-tree/fabric-dark.css +71 -63
  119. package/styles/drop-down-tree/fabric.css +71 -63
  120. package/styles/drop-down-tree/highcontrast-light.css +71 -63
  121. package/styles/drop-down-tree/highcontrast.css +75 -63
  122. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  123. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  124. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  125. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  126. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  127. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  128. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  129. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  130. package/styles/drop-down-tree/icons/_material.scss +11 -11
  131. package/styles/drop-down-tree/material-dark.css +76 -85
  132. package/styles/drop-down-tree/material.css +93 -85
  133. package/styles/fabric-dark.css +71 -63
  134. package/styles/fabric.css +71 -63
  135. package/styles/highcontrast-light.css +71 -63
  136. package/styles/highcontrast.css +75 -63
  137. package/styles/list-box/_all.scss +2 -2
  138. package/styles/list-box/_bootstrap-dark-definition.scss +118 -118
  139. package/styles/list-box/_bootstrap-definition.scss +112 -112
  140. package/styles/list-box/_bootstrap4-definition.scss +118 -118
  141. package/styles/list-box/_fabric-dark-definition.scss +118 -118
  142. package/styles/list-box/_fabric-definition.scss +112 -112
  143. package/styles/list-box/_highcontrast-definition.scss +112 -112
  144. package/styles/list-box/_highcontrast-light-definition.scss +118 -118
  145. package/styles/list-box/_layout.scss +458 -458
  146. package/styles/list-box/_material-dark-definition.scss +118 -118
  147. package/styles/list-box/_material-definition.scss +112 -112
  148. package/styles/list-box/_theme.scss +273 -273
  149. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  150. package/styles/list-box/icons/_bootstrap.scss +25 -25
  151. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  152. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  153. package/styles/list-box/icons/_fabric.scss +25 -25
  154. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  155. package/styles/list-box/icons/_highcontrast.scss +25 -25
  156. package/styles/list-box/icons/_material-dark.scss +25 -25
  157. package/styles/list-box/icons/_material.scss +25 -25
  158. package/styles/list-box/material-dark.css +4 -4
  159. package/styles/list-box/material.css +4 -4
  160. package/styles/material-dark.css +80 -89
  161. package/styles/material.css +115 -89
  162. package/styles/multi-select/_all.scss +2 -2
  163. package/styles/multi-select/_bootstrap-dark-definition.scss +171 -171
  164. package/styles/multi-select/_bootstrap-definition.scss +166 -166
  165. package/styles/multi-select/_bootstrap4-definition.scss +233 -233
  166. package/styles/multi-select/_fabric-dark-definition.scss +170 -170
  167. package/styles/multi-select/_fabric-definition.scss +167 -167
  168. package/styles/multi-select/_highcontrast-definition.scss +257 -257
  169. package/styles/multi-select/_highcontrast-light-definition.scss +258 -258
  170. package/styles/multi-select/_layout.scss +1153 -1153
  171. package/styles/multi-select/_material-dark-definition.scss +186 -186
  172. package/styles/multi-select/_material-definition.scss +191 -191
  173. package/styles/multi-select/_theme.scss +384 -384
  174. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  175. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  176. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  177. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  178. package/styles/multi-select/icons/_fabric.scss +26 -26
  179. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  180. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  181. package/styles/multi-select/icons/_material-dark.scss +26 -26
  182. package/styles/multi-select/icons/_material.scss +324 -324
  183. package/styles/multi-select/material.css +9 -0
package/styles/fabric.css CHANGED
@@ -697,13 +697,13 @@ ejs-dropdownlist {
697
697
  outline: none;
698
698
  }
699
699
 
700
- .e-ddt.e-icon-anim .e-ddt-icon::before {
701
- transform: rotate(180deg);
700
+ .e-ddt .e-ddt-icon::before {
701
+ transform: rotate(0deg);
702
702
  transition: transform 300ms ease;
703
703
  }
704
704
 
705
- .e-ddt .e-ddt-icon::before {
706
- transform: rotate(0deg);
705
+ .e-ddt.e-icon-anim .e-ddt-icon::before {
706
+ transform: rotate(180deg);
707
707
  transition: transform 300ms ease;
708
708
  }
709
709
 
@@ -726,10 +726,6 @@ ejs-dropdownlist {
726
726
  display: none;
727
727
  }
728
728
 
729
- .e-ddt.e-input-group.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-ddt.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
730
- top: 15px;
731
- }
732
-
733
729
  .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
734
730
  bottom: 0;
735
731
  position: absolute;
@@ -758,27 +754,30 @@ ejs-dropdownlist {
758
754
  }
759
755
 
760
756
  .e-ddt .e-chips-wrapper .e-chips-close {
761
- line-height: 26px;
757
+ line-height: 21px;
762
758
  min-height: 26px;
763
- min-width: 26px;
759
+ min-width: 18px;
764
760
  text-align: center;
765
761
  }
766
762
 
767
763
  .e-ddt .e-chips-wrapper .e-chips-close::before {
768
764
  font-size: 10px;
765
+ vertical-align: middle;
769
766
  }
770
767
 
771
768
  .e-ddt .e-chips-wrapper .e-chips {
772
769
  -ms-flex-align: center;
773
770
  align-items: center;
771
+ border-radius: 0;
772
+ box-sizing: border-box;
774
773
  display: -ms-inline-flexbox;
775
774
  display: inline-flex;
776
775
  float: left;
777
776
  height: 26px;
778
777
  margin: 2px 1px;
779
- max-width: 100%;
778
+ max-width: calc(100% - 2px);
780
779
  overflow: hidden;
781
- padding: 0 0 0 8px;
780
+ padding: 0 4px 0 4px;
782
781
  text-overflow: ellipsis;
783
782
  white-space: nowrap;
784
783
  }
@@ -786,22 +785,26 @@ ejs-dropdownlist {
786
785
  .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
787
786
  max-width: 100%;
788
787
  overflow: hidden;
789
- padding: 0;
788
+ padding: 0 4px 0 4px;
790
789
  text-indent: 0;
791
790
  text-overflow: ellipsis;
792
791
  white-space: nowrap;
792
+ line-height: 26px;
793
793
  }
794
794
 
795
- .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
796
- margin-right: 60px;
795
+ .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
796
+ margin-right: 30px;
797
+ max-width: calc(100% - 31px);
797
798
  }
798
799
 
799
- .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
800
+ .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
800
801
  margin-right: 30px;
802
+ max-width: calc(100% - 31px);
801
803
  }
802
804
 
803
- .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
804
- margin-right: 30px;
805
+ .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
806
+ margin-right: 60px;
807
+ max-width: calc(100% - 61px);
805
808
  }
806
809
 
807
810
  .e-ddt input[readonly],
@@ -817,9 +820,8 @@ ejs-dropdownlist {
817
820
  }
818
821
 
819
822
  .e-ddt.e-popup {
820
- border: 1px solid;
823
+ border: 1px solid #eaeaea;
821
824
  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);
822
- margin-top: 2px;
823
825
  position: absolute;
824
826
  }
825
827
 
@@ -830,7 +832,7 @@ ejs-dropdownlist {
830
832
  line-height: 36px;
831
833
  overflow: hidden;
832
834
  position: relative;
833
- text-indent: 39px;
835
+ text-indent: 38px;
834
836
  white-space: nowrap;
835
837
  width: 100%;
836
838
  }
@@ -840,7 +842,6 @@ ejs-dropdownlist {
840
842
  }
841
843
 
842
844
  .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
843
- margin-right: 10px;
844
845
  position: relative;
845
846
  text-indent: 0;
846
847
  }
@@ -848,10 +849,28 @@ ejs-dropdownlist {
848
849
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
849
850
  font-family: inherit;
850
851
  font-size: 14px;
852
+ margin: 10px;
853
+ }
854
+
855
+ .e-ddt.e-popup .e-filter-wrap .e-input,
856
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
857
+ padding: 0 12px;
858
+ }
859
+
860
+ .e-ddt.e-popup .e-filter-wrap {
861
+ border: 1px solid #c8c8c8;
862
+ border-top-width: 0;
863
+ display: block;
864
+ padding: 5px;
865
+ }
866
+
867
+ .e-ddt.e-popup .e-filter-wrap {
868
+ border-left-width: 0;
869
+ border-right-width: 0;
851
870
  }
852
871
 
853
872
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
854
- padding: 0 10px;
873
+ margin-bottom: 0;
855
874
  }
856
875
 
857
876
  .e-ddt.e-popup .e-popup-content {
@@ -914,29 +933,26 @@ ejs-dropdownlist {
914
933
 
915
934
  .e-ddt.e-rtl .e-chips-wrapper .e-chips {
916
935
  float: right;
917
- padding: 0 8px 0 0;
918
- }
919
-
920
- .e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
921
- padding: 0;
922
936
  }
923
937
 
924
- .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
925
- margin-left: 60px;
938
+ .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
939
+ margin-left: 30px;
926
940
  margin-right: 1px;
927
941
  }
928
942
 
929
- .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
943
+ .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
930
944
  margin-left: 30px;
931
945
  margin-right: 1px;
932
946
  }
933
947
 
934
- .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
935
- margin-left: 30px;
948
+ .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
949
+ margin-left: 60px;
936
950
  margin-right: 1px;
937
951
  }
938
952
 
939
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
953
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
954
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
955
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
940
956
  left: 0;
941
957
  right: auto;
942
958
  }
@@ -945,16 +961,6 @@ ejs-dropdownlist {
945
961
  left: 30px;
946
962
  }
947
963
 
948
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
949
- left: 0;
950
- right: auto;
951
- }
952
-
953
- .e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
954
- margin-left: 10px;
955
- margin-right: 0;
956
- }
957
-
958
964
  .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
959
965
  padding: 0 14px 0 0;
960
966
  }
@@ -982,24 +988,27 @@ ejs-dropdownlist {
982
988
  min-height: 38px;
983
989
  }
984
990
 
985
- .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
986
- .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
987
- margin-right: 76px;
991
+ .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
992
+ .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
993
+ margin-right: 38px;
994
+ max-width: calc(100% - 39px);
988
995
  }
989
996
 
990
- .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
991
- .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
997
+ .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
998
+ .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
992
999
  margin-right: 38px;
1000
+ max-width: calc(100% - 39px);
993
1001
  }
994
1002
 
995
- .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
996
- .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
997
- margin-right: 38px;
1003
+ .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1004
+ .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1005
+ margin-right: 76px;
1006
+ max-width: calc(100% - 77px);
998
1007
  }
999
1008
 
1000
1009
  .e-bigger .e-ddt.e-popup .e-selectall-parent,
1001
1010
  .e-ddt.e-bigger.e-popup .e-selectall-parent {
1002
- text-indent: 44px;
1011
+ text-indent: 43px;
1003
1012
  }
1004
1013
 
1005
1014
  .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -1007,21 +1016,21 @@ ejs-dropdownlist {
1007
1016
  height: 44px;
1008
1017
  }
1009
1018
 
1010
- .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1011
- .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1012
- margin-left: 76px;
1019
+ .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1020
+ .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1021
+ margin-left: 38px;
1013
1022
  margin-right: 1px;
1014
1023
  }
1015
1024
 
1016
- .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1017
- .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1025
+ .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
1026
+ .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
1018
1027
  margin-left: 38px;
1019
1028
  margin-right: 1px;
1020
1029
  }
1021
1030
 
1022
- .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1023
- .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1024
- margin-left: 38px;
1031
+ .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1032
+ .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1033
+ margin-left: 76px;
1025
1034
  margin-right: 1px;
1026
1035
  }
1027
1036
 
@@ -1033,7 +1042,6 @@ ejs-dropdownlist {
1033
1042
 
1034
1043
  .e-ddt .e-chips {
1035
1044
  background-color: #f4f4f4;
1036
- border-radius: 0;
1037
1045
  }
1038
1046
 
1039
1047
  .e-ddt .e-chips .e-chips-close::before {
@@ -1066,7 +1074,7 @@ ejs-dropdownlist {
1066
1074
  }
1067
1075
 
1068
1076
  .e-ddt.e-popup .e-selectall-parent {
1069
- border-bottom: 1px solid #eaeaea;
1077
+ border-bottom-color: #eaeaea;
1070
1078
  }
1071
1079
 
1072
1080
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
@@ -732,13 +732,13 @@ ejs-dropdownlist {
732
732
  outline: none;
733
733
  }
734
734
 
735
- .e-ddt.e-icon-anim .e-ddt-icon::before {
736
- transform: rotate(180deg);
735
+ .e-ddt .e-ddt-icon::before {
736
+ transform: rotate(0deg);
737
737
  transition: transform 300ms ease;
738
738
  }
739
739
 
740
- .e-ddt .e-ddt-icon::before {
741
- transform: rotate(0deg);
740
+ .e-ddt.e-icon-anim .e-ddt-icon::before {
741
+ transform: rotate(180deg);
742
742
  transition: transform 300ms ease;
743
743
  }
744
744
 
@@ -761,10 +761,6 @@ ejs-dropdownlist {
761
761
  display: none;
762
762
  }
763
763
 
764
- .e-ddt.e-input-group.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-ddt.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
765
- top: 14px;
766
- }
767
-
768
764
  .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
769
765
  bottom: 0;
770
766
  position: absolute;
@@ -793,27 +789,30 @@ ejs-dropdownlist {
793
789
  }
794
790
 
795
791
  .e-ddt .e-chips-wrapper .e-chips-close {
796
- line-height: 26px;
792
+ line-height: 21px;
797
793
  min-height: 26px;
798
- min-width: 26px;
794
+ min-width: 18px;
799
795
  text-align: center;
800
796
  }
801
797
 
802
798
  .e-ddt .e-chips-wrapper .e-chips-close::before {
803
799
  font-size: 10px;
800
+ vertical-align: middle;
804
801
  }
805
802
 
806
803
  .e-ddt .e-chips-wrapper .e-chips {
807
804
  -ms-flex-align: center;
808
805
  align-items: center;
806
+ border-radius: 0;
807
+ box-sizing: border-box;
809
808
  display: -ms-inline-flexbox;
810
809
  display: inline-flex;
811
810
  float: left;
812
811
  height: 26px;
813
812
  margin: 2px 1px;
814
- max-width: 100%;
813
+ max-width: calc(100% - 2px);
815
814
  overflow: hidden;
816
- padding: 0 0 0 8px;
815
+ padding: 0 4px 0 4px;
817
816
  text-overflow: ellipsis;
818
817
  white-space: nowrap;
819
818
  }
@@ -821,22 +820,26 @@ ejs-dropdownlist {
821
820
  .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
822
821
  max-width: 100%;
823
822
  overflow: hidden;
824
- padding: 0 8px 0 0;
823
+ padding: 0 4px 0 4px;
825
824
  text-indent: 0;
826
825
  text-overflow: ellipsis;
827
826
  white-space: nowrap;
827
+ line-height: 26px;
828
828
  }
829
829
 
830
- .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
831
- margin-right: 60px;
830
+ .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
831
+ margin-right: 30px;
832
+ max-width: calc(100% - 31px);
832
833
  }
833
834
 
834
- .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
835
+ .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
835
836
  margin-right: 30px;
837
+ max-width: calc(100% - 31px);
836
838
  }
837
839
 
838
- .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
839
- margin-right: 30px;
840
+ .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
841
+ margin-right: 60px;
842
+ max-width: calc(100% - 61px);
840
843
  }
841
844
 
842
845
  .e-ddt input[readonly],
@@ -852,9 +855,8 @@ ejs-dropdownlist {
852
855
  }
853
856
 
854
857
  .e-ddt.e-popup {
855
- border: 1px solid;
858
+ border: 1px solid #757575;
856
859
  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);
857
- margin-top: 2px;
858
860
  position: absolute;
859
861
  }
860
862
 
@@ -865,7 +867,7 @@ ejs-dropdownlist {
865
867
  line-height: 36px;
866
868
  overflow: hidden;
867
869
  position: relative;
868
- text-indent: 39px;
870
+ text-indent: 38px;
869
871
  white-space: nowrap;
870
872
  width: 100%;
871
873
  }
@@ -875,7 +877,6 @@ ejs-dropdownlist {
875
877
  }
876
878
 
877
879
  .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
878
- margin-right: 10px;
879
880
  position: relative;
880
881
  text-indent: 0;
881
882
  }
@@ -883,10 +884,28 @@ ejs-dropdownlist {
883
884
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
884
885
  font-family: inherit;
885
886
  font-size: 14px;
887
+ margin: 10px;
888
+ }
889
+
890
+ .e-ddt.e-popup .e-filter-wrap .e-input,
891
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
892
+ padding: 0 12px;
893
+ }
894
+
895
+ .e-ddt.e-popup .e-filter-wrap {
896
+ border: 1px solid #000;
897
+ border-top-width: 0;
898
+ display: block;
899
+ padding: 5px;
900
+ }
901
+
902
+ .e-ddt.e-popup .e-filter-wrap {
903
+ border-left-width: 0;
904
+ border-right-width: 0;
886
905
  }
887
906
 
888
907
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
889
- padding: 0 10px;
908
+ margin-bottom: 0;
890
909
  }
891
910
 
892
911
  .e-ddt.e-popup .e-popup-content {
@@ -950,29 +969,26 @@ ejs-dropdownlist {
950
969
 
951
970
  .e-ddt.e-rtl .e-chips-wrapper .e-chips {
952
971
  float: right;
953
- padding: 0 8px 0 0;
954
972
  }
955
973
 
956
- .e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
957
- padding: 0 0 0 8px;
958
- }
959
-
960
- .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
961
- margin-left: 60px;
974
+ .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
975
+ margin-left: 30px;
962
976
  margin-right: 1px;
963
977
  }
964
978
 
965
- .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
979
+ .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
966
980
  margin-left: 30px;
967
981
  margin-right: 1px;
968
982
  }
969
983
 
970
- .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
971
- margin-left: 30px;
984
+ .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
985
+ margin-left: 60px;
972
986
  margin-right: 1px;
973
987
  }
974
988
 
975
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
989
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
990
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
991
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
976
992
  left: 0;
977
993
  right: auto;
978
994
  }
@@ -981,16 +997,6 @@ ejs-dropdownlist {
981
997
  left: 30px;
982
998
  }
983
999
 
984
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
985
- left: 0;
986
- right: auto;
987
- }
988
-
989
- .e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
990
- margin-left: 10px;
991
- margin-right: 0;
992
- }
993
-
994
1000
  .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
995
1001
  padding: 0 14px 0 0;
996
1002
  }
@@ -1018,24 +1024,27 @@ ejs-dropdownlist {
1018
1024
  min-height: 38px;
1019
1025
  }
1020
1026
 
1021
- .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1022
- .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1023
- margin-right: 76px;
1027
+ .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1028
+ .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1029
+ margin-right: 38px;
1030
+ max-width: calc(100% - 39px);
1024
1031
  }
1025
1032
 
1026
- .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1027
- .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1033
+ .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
1034
+ .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
1028
1035
  margin-right: 38px;
1036
+ max-width: calc(100% - 39px);
1029
1037
  }
1030
1038
 
1031
- .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1032
- .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1033
- margin-right: 38px;
1039
+ .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1040
+ .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1041
+ margin-right: 76px;
1042
+ max-width: calc(100% - 77px);
1034
1043
  }
1035
1044
 
1036
1045
  .e-bigger .e-ddt.e-popup .e-selectall-parent,
1037
1046
  .e-ddt.e-bigger.e-popup .e-selectall-parent {
1038
- text-indent: 44px;
1047
+ text-indent: 43px;
1039
1048
  }
1040
1049
 
1041
1050
  .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -1043,21 +1052,21 @@ ejs-dropdownlist {
1043
1052
  height: 48px;
1044
1053
  }
1045
1054
 
1046
- .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1047
- .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1048
- margin-left: 76px;
1055
+ .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1056
+ .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1057
+ margin-left: 38px;
1049
1058
  margin-right: 1px;
1050
1059
  }
1051
1060
 
1052
- .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1053
- .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1061
+ .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
1062
+ .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
1054
1063
  margin-left: 38px;
1055
1064
  margin-right: 1px;
1056
1065
  }
1057
1066
 
1058
- .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
1059
- .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
1060
- margin-left: 38px;
1067
+ .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
1068
+ .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
1069
+ margin-left: 76px;
1061
1070
  margin-right: 1px;
1062
1071
  }
1063
1072
 
@@ -1069,7 +1078,6 @@ ejs-dropdownlist {
1069
1078
 
1070
1079
  .e-ddt .e-chips {
1071
1080
  background-color: #3d3d3d;
1072
- border-radius: 0;
1073
1081
  }
1074
1082
 
1075
1083
  .e-ddt .e-chips .e-chips-close::before {
@@ -1102,7 +1110,7 @@ ejs-dropdownlist {
1102
1110
  }
1103
1111
 
1104
1112
  .e-ddt.e-popup .e-selectall-parent {
1105
- border-bottom: 1px solid #ecf;
1113
+ border-bottom-color: #757575;
1106
1114
  }
1107
1115
 
1108
1116
  .e-ddt.e-popup .e-selectall-parent .e-all-text {