@syncfusion/ej2-dropdowns 20.1.60 → 20.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/CHANGELOG.md +2 -62
  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 +110 -104
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +73 -67
  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/helpers/e2e/autocomplete.js +59 -43
  12. package/helpers/e2e/combobox.js +62 -46
  13. package/helpers/e2e/dropdownlist.js +71 -55
  14. package/helpers/e2e/index.js +11 -9
  15. package/helpers/e2e/listboxHelper.js +55 -38
  16. package/helpers/e2e/multiselect.js +104 -88
  17. package/package.json +11 -11
  18. package/src/common/incremental-search.js +1 -1
  19. package/src/drop-down-base/drop-down-base-model.d.ts +1 -1
  20. package/src/drop-down-base/drop-down-base.d.ts +5 -1
  21. package/src/drop-down-base/drop-down-base.js +3 -5
  22. package/src/drop-down-list/drop-down-list.js +13 -15
  23. package/src/drop-down-tree/drop-down-tree-model.d.ts +2 -2
  24. package/src/drop-down-tree/drop-down-tree.js +5 -5
  25. package/src/list-box/list-box.d.ts +1 -0
  26. package/src/list-box/list-box.js +22 -13
  27. package/src/multi-select/multi-select-model.d.ts +1 -1
  28. package/src/multi-select/multi-select.d.ts +2 -1
  29. package/src/multi-select/multi-select.js +29 -28
  30. package/styles/auto-complete/_fusionnew-definition.scss +2 -0
  31. package/styles/auto-complete/_material3-definition.scss +2 -0
  32. package/styles/bootstrap-dark.css +59 -11
  33. package/styles/bootstrap.css +59 -11
  34. package/styles/bootstrap4.css +59 -11
  35. package/styles/bootstrap5-dark.css +60 -12
  36. package/styles/bootstrap5.css +60 -12
  37. package/styles/combo-box/_fusionnew-definition.scss +2 -0
  38. package/styles/combo-box/_material3-definition.scss +2 -0
  39. package/styles/drop-down-base/_fusionnew-definition.scss +111 -0
  40. package/styles/drop-down-base/_material3-definition.scss +111 -0
  41. package/styles/drop-down-list/_fusionnew-definition.scss +201 -0
  42. package/styles/drop-down-list/_material3-definition.scss +201 -0
  43. package/styles/drop-down-list/icons/_fusionnew.scss +14 -0
  44. package/styles/drop-down-list/icons/_material3.scss +14 -0
  45. package/styles/drop-down-tree/_fusionnew-definition.scss +60 -0
  46. package/styles/drop-down-tree/_material3-definition.scss +60 -0
  47. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -0
  48. package/styles/drop-down-tree/icons/_material3.scss +11 -0
  49. package/styles/fabric-dark.css +59 -11
  50. package/styles/fabric.css +59 -11
  51. package/styles/fluent-dark.css +63 -15
  52. package/styles/fluent.css +60 -12
  53. package/styles/highcontrast-light.css +59 -11
  54. package/styles/highcontrast.css +59 -11
  55. package/styles/list-box/_bootstrap-dark-definition.scss +5 -1
  56. package/styles/list-box/_bootstrap-definition.scss +5 -1
  57. package/styles/list-box/_bootstrap4-definition.scss +5 -1
  58. package/styles/list-box/_bootstrap5-definition.scss +7 -2
  59. package/styles/list-box/_fabric-dark-definition.scss +5 -1
  60. package/styles/list-box/_fabric-definition.scss +5 -1
  61. package/styles/list-box/_fluent-definition.scss +7 -2
  62. package/styles/list-box/_fusionnew-definition.scss +113 -0
  63. package/styles/list-box/_highcontrast-definition.scss +5 -1
  64. package/styles/list-box/_highcontrast-light-definition.scss +5 -1
  65. package/styles/list-box/_layout.scss +36 -1
  66. package/styles/list-box/_material-dark-definition.scss +6 -2
  67. package/styles/list-box/_material-definition.scss +6 -2
  68. package/styles/list-box/_material3-definition.scss +119 -0
  69. package/styles/list-box/_tailwind-definition.scss +6 -2
  70. package/styles/list-box/_theme.scss +40 -8
  71. package/styles/list-box/bootstrap-dark.css +49 -11
  72. package/styles/list-box/bootstrap.css +59 -11
  73. package/styles/list-box/bootstrap4.css +59 -11
  74. package/styles/list-box/bootstrap5-dark.css +60 -12
  75. package/styles/list-box/bootstrap5.css +60 -12
  76. package/styles/list-box/fabric-dark.css +49 -11
  77. package/styles/list-box/fabric.css +59 -11
  78. package/styles/list-box/fluent-dark.css +63 -15
  79. package/styles/list-box/fluent.css +60 -12
  80. package/styles/list-box/highcontrast-light.css +49 -11
  81. package/styles/list-box/highcontrast.css +59 -11
  82. package/styles/list-box/icons/_fusionnew.scss +25 -0
  83. package/styles/list-box/icons/_material3.scss +25 -0
  84. package/styles/list-box/material-dark.css +50 -12
  85. package/styles/list-box/material.css +60 -12
  86. package/styles/list-box/tailwind-dark.css +60 -12
  87. package/styles/list-box/tailwind.css +60 -12
  88. package/styles/material-dark.css +60 -12
  89. package/styles/material.css +60 -12
  90. package/styles/multi-select/_fusionnew-definition.scss +219 -0
  91. package/styles/multi-select/_material3-definition.scss +219 -0
  92. package/styles/multi-select/icons/_fusionnew.scss +27 -0
  93. package/styles/multi-select/icons/_material3.scss +27 -0
  94. package/styles/tailwind-dark.css +60 -12
  95. package/styles/tailwind.css +60 -12
@@ -97,6 +97,7 @@ var MultiSelect = /** @class */ (function (_super) {
97
97
  function MultiSelect(option, element) {
98
98
  var _this = _super.call(this, option, element) || this;
99
99
  _this.clearIconWidth = 0;
100
+ _this.previousFilterText = '';
100
101
  _this.isValidKey = false;
101
102
  _this.selectAllEventData = [];
102
103
  _this.selectAllEventEle = [];
@@ -172,7 +173,7 @@ var MultiSelect = /** @class */ (function (_super) {
172
173
  else if (containerAttr.indexOf(htmlAttr) > -1) {
173
174
  this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
174
175
  }
175
- else {
176
+ else if (htmlAttr !== 'size') {
176
177
  this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
177
178
  }
178
179
  break;
@@ -594,7 +595,7 @@ var MultiSelect = /** @class */ (function (_super) {
594
595
  this.showPopup();
595
596
  }
596
597
  else {
597
- this.hidePopup();
598
+ this.hidePopup(e);
598
599
  }
599
600
  }
600
601
  else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {
@@ -663,7 +664,7 @@ var MultiSelect = /** @class */ (function (_super) {
663
664
  var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
664
665
  if (this.backCommand) {
665
666
  this.remoteCustomValue = false;
666
- if (this.allowCustomValue && list.querySelectorAll('li').length === 0 && this.mainData.length > 0) {
667
+ if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {
667
668
  this.mainData = [];
668
669
  }
669
670
  this.onActionComplete(list, this.mainData);
@@ -754,7 +755,7 @@ var MultiSelect = /** @class */ (function (_super) {
754
755
  this.showPopup();
755
756
  }
756
757
  else {
757
- this.hidePopup();
758
+ this.hidePopup(e);
758
759
  if (this.mode === 'CheckBox') {
759
760
  this.showOverAllClear();
760
761
  this.inputFocus = true;
@@ -832,6 +833,7 @@ var MultiSelect = /** @class */ (function (_super) {
832
833
  }
833
834
  }
834
835
  }
836
+ this.updateDataList();
835
837
  this.refreshListItems(null);
836
838
  if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
837
839
  this.updateDelimView();
@@ -842,7 +844,7 @@ var MultiSelect = /** @class */ (function (_super) {
842
844
  }
843
845
  this.overAllClear.style.display = 'none';
844
846
  if (this.isPopupOpen()) {
845
- this.hidePopup();
847
+ this.hidePopup(eve);
846
848
  }
847
849
  this.makeTextBoxEmpty();
848
850
  this.trigger('blur');
@@ -1036,7 +1038,7 @@ var MultiSelect = /** @class */ (function (_super) {
1036
1038
  MultiSelect.prototype.popupKeyActions = function (e) {
1037
1039
  switch (e.keyCode) {
1038
1040
  case 38:
1039
- this.hidePopup();
1041
+ this.hidePopup(e);
1040
1042
  if (this.mode === 'CheckBox') {
1041
1043
  this.inputElement.focus();
1042
1044
  }
@@ -1058,7 +1060,7 @@ var MultiSelect = /** @class */ (function (_super) {
1058
1060
  var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
1059
1061
  filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
1060
1062
  }
1061
- else if (this.mode === 'CheckBox') {
1063
+ else if (this.mode == "CheckBox") {
1062
1064
  this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
1063
1065
  }
1064
1066
  }
@@ -1118,7 +1120,7 @@ var MultiSelect = /** @class */ (function (_super) {
1118
1120
  break;
1119
1121
  case 27:
1120
1122
  e.preventDefault();
1121
- this.hidePopup();
1123
+ this.hidePopup(e);
1122
1124
  if (this.mode === 'CheckBox') {
1123
1125
  this.inputElement.focus();
1124
1126
  }
@@ -1135,7 +1137,7 @@ var MultiSelect = /** @class */ (function (_super) {
1135
1137
  return;
1136
1138
  case 9:
1137
1139
  e.preventDefault();
1138
- this.hidePopup();
1140
+ this.hidePopup(e);
1139
1141
  this.inputElement.focus();
1140
1142
  this.overAllWrapper.classList.add(FOCUS);
1141
1143
  }
@@ -1163,6 +1165,9 @@ var MultiSelect = /** @class */ (function (_super) {
1163
1165
  this.keyNavigation(e);
1164
1166
  }
1165
1167
  if (this.mode === 'CheckBox' && this.enableSelectionOrder) {
1168
+ if (this.allowFiltering) {
1169
+ this.previousFilterText = this.targetElement();
1170
+ }
1166
1171
  this.checkBackCommand(e);
1167
1172
  }
1168
1173
  this.expandTextbox();
@@ -1205,14 +1210,13 @@ var MultiSelect = /** @class */ (function (_super) {
1205
1210
  if (!document.activeElement.classList.contains(FILTERINPUT)) {
1206
1211
  e.preventDefault();
1207
1212
  this.keyAction = true;
1208
- this.list.focus();
1209
1213
  }
1210
1214
  this.selectByKey(e);
1211
1215
  }
1212
1216
  this.checkPlaceholderSize();
1213
1217
  };
1214
1218
  MultiSelect.prototype.checkBackCommand = function (e) {
1215
- if (e.keyCode === 8 && this.targetElement() === '') {
1219
+ if (e.keyCode === 8 && this.allowFiltering ? this.targetElement() !== this.previousFilterText : this.targetElement() === '') {
1216
1220
  this.backCommand = false;
1217
1221
  }
1218
1222
  else {
@@ -1358,7 +1362,7 @@ var MultiSelect = /** @class */ (function (_super) {
1358
1362
  }
1359
1363
  this.refreshSelection();
1360
1364
  if (this.closePopupOnSelect) {
1361
- this.hidePopup();
1365
+ this.hidePopup(e);
1362
1366
  }
1363
1367
  }
1364
1368
  this.refreshPlaceHolder();
@@ -1390,7 +1394,7 @@ var MultiSelect = /** @class */ (function (_super) {
1390
1394
  this.makeTextBoxEmpty();
1391
1395
  }
1392
1396
  if (this.closePopupOnSelect) {
1393
- this.hidePopup();
1397
+ this.hidePopup(e);
1394
1398
  }
1395
1399
  this.checkPlaceholderSize();
1396
1400
  };
@@ -1510,7 +1514,7 @@ var MultiSelect = /** @class */ (function (_super) {
1510
1514
  value = customVal;
1511
1515
  }
1512
1516
  if (this.isPopupOpen() && this.mode !== 'CheckBox') {
1513
- this.hidePopup();
1517
+ this.hidePopup(e);
1514
1518
  }
1515
1519
  if (!this.inputFocus) {
1516
1520
  this.inputElement.focus();
@@ -1624,7 +1628,7 @@ var MultiSelect = /** @class */ (function (_super) {
1624
1628
  });
1625
1629
  _this.invokeCheckboxSelection(element_1, eve, isClearAll);
1626
1630
  }
1627
- if (_this.hideSelectedItem && _this.fields.groupBy) {
1631
+ if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {
1628
1632
  _this.hideGroupItem(value);
1629
1633
  }
1630
1634
  if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&
@@ -2468,15 +2472,10 @@ var MultiSelect = /** @class */ (function (_super) {
2468
2472
  }
2469
2473
  };
2470
2474
  MultiSelect.prototype.updateDataList = function () {
2471
- if (this.mainList && this.ulElement) {
2475
+ if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
2472
2476
  var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
2473
- var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
2474
- this.ulElement.children[0].childElementCount > 0) &&
2475
- (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
2476
- var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0
2477
- && !(this.ulElement.childElementCount < this.mainList.childElementCount)
2478
- && (this.ulElement.children[0].childElementCount > 0
2479
- || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
2477
+ var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
2478
+ var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
2480
2479
  if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
2481
2480
  //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
2482
2481
  this.mainList = this.ulElement;
@@ -2695,7 +2694,7 @@ var MultiSelect = /** @class */ (function (_super) {
2695
2694
  this.focusAtFirstListItem();
2696
2695
  }
2697
2696
  if (this.closePopupOnSelect) {
2698
- this.hidePopup();
2697
+ this.hidePopup(e);
2699
2698
  }
2700
2699
  else {
2701
2700
  e.preventDefault();
@@ -3548,6 +3547,7 @@ var MultiSelect = /** @class */ (function (_super) {
3548
3547
  }
3549
3548
  return valuecheck;
3550
3549
  };
3550
+ ;
3551
3551
  MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
3552
3552
  var _this = this;
3553
3553
  this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
@@ -3555,6 +3555,7 @@ var MultiSelect = /** @class */ (function (_super) {
3555
3555
  _this.updateActionList(ulElement, list, event);
3556
3556
  });
3557
3557
  };
3558
+ ;
3558
3559
  MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
3559
3560
  if (!this.list) {
3560
3561
  this.onLoadSelect();
@@ -3567,7 +3568,7 @@ var MultiSelect = /** @class */ (function (_super) {
3567
3568
  if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
3568
3569
  valuecheck = this.presentItemValue(this.ulElement);
3569
3570
  }
3570
- if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
3571
+ if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
3571
3572
  && this.listData != null) {
3572
3573
  this.mainData = null;
3573
3574
  this.setDynValue = true;
@@ -3621,7 +3622,7 @@ var MultiSelect = /** @class */ (function (_super) {
3621
3622
  *
3622
3623
  * @returns {void}
3623
3624
  */
3624
- MultiSelect.prototype.hidePopup = function () {
3625
+ MultiSelect.prototype.hidePopup = function (e) {
3625
3626
  var _this = this;
3626
3627
  var delay = 100;
3627
3628
  if (this.isPopupOpen()) {
@@ -3630,7 +3631,7 @@ var MultiSelect = /** @class */ (function (_super) {
3630
3631
  duration: 100,
3631
3632
  delay: delay ? delay : 0
3632
3633
  };
3633
- var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
3634
+ var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };
3634
3635
  this.trigger('close', eventArgs, function (eventArgs) {
3635
3636
  if (!eventArgs.cancel) {
3636
3637
  if (_this.fields.groupBy && _this.mode !== 'CheckBox' && _this.fixedHeaderElement) {
@@ -3678,7 +3679,7 @@ var MultiSelect = /** @class */ (function (_super) {
3678
3679
  var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
3679
3680
  var liLength = _this.ulElement.querySelectorAll('li.'
3680
3681
  + dropDownBaseClasses.li + '.' + HIDE_LIST).length;
3681
- if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length)) {
3682
+ if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length) && !(_this.targetElement() !== '' && _this.allowCustomValue)) {
3682
3683
  _this.beforePopupOpen = false;
3683
3684
  return;
3684
3685
  }
@@ -0,0 +1,2 @@
1
+ //default
2
+ //enddefault
@@ -0,0 +1,2 @@
1
+ //default
2
+ //enddefault
@@ -2376,6 +2376,10 @@ ejs-multiselect {
2376
2376
  .e-listbox-container * {
2377
2377
  box-sizing: border-box;
2378
2378
  }
2379
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2380
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2381
+ width: 86% !important;
2382
+ }
2379
2383
  .e-listbox-wrapper:focus,
2380
2384
  .e-listbox-container:focus {
2381
2385
  outline: none;
@@ -2606,8 +2610,8 @@ ejs-multiselect {
2606
2610
  text-indent: 0;
2607
2611
  vertical-align: middle;
2608
2612
  }
2609
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2610
- .e-listbox-container.e-right .e-checkbox-wrapper {
2613
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2614
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2611
2615
  position: absolute;
2612
2616
  right: 0;
2613
2617
  top: 30%;
@@ -2726,6 +2730,12 @@ ejs-listbox {
2726
2730
  list-style-type: none;
2727
2731
  margin-bottom: 10px;
2728
2732
  }
2733
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2734
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2735
+ position: absolute;
2736
+ right: 0;
2737
+ top: 30%;
2738
+ }
2729
2739
 
2730
2740
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2731
2741
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2736,6 +2746,12 @@ ejs-listbox {
2736
2746
  margin-left: 15px;
2737
2747
  }
2738
2748
 
2749
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2750
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2751
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2752
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2753
+ width: 85% !important;
2754
+ }
2739
2755
  .e-bigger .e-listbox-wrapper .e-list-item,
2740
2756
  .e-listbox-wrapper.e-bigger .e-list-item,
2741
2757
  .e-bigger .e-listbox-container .e-list-item,
@@ -2823,21 +2839,48 @@ ejs-listbox {
2823
2839
  .e-listbox-container.e-bigger .e-list-header .e-text {
2824
2840
  font-size: 15px;
2825
2841
  }
2826
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2827
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
2842
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
2843
+ height: calc(100% - 52px);
2844
+ }
2845
+
2846
+ .e-listbox-container.e-filter-list .e-list-wrap {
2847
+ height: calc(100% - 52px) !important;
2848
+ }
2849
+
2850
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
2828
2851
  height: calc(100% - 46px);
2829
2852
  }
2830
2853
 
2831
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2832
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2854
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
2855
+ height: calc(100% - 46px) !important;
2856
+ }
2857
+
2858
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2833
2859
  height: calc(100% - 58px);
2834
2860
  }
2835
2861
 
2836
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2837
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2862
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2863
+ height: calc(100% - 58px) !important;
2864
+ }
2865
+
2866
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2867
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2868
+ height: calc(100% - 106px);
2869
+ }
2870
+
2871
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2872
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2873
+ height: calc(100% - 48px);
2874
+ }
2875
+
2876
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2838
2877
  height: calc(100% - 54px);
2839
2878
  }
2840
2879
 
2880
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2881
+ height: calc(100% - 54px) !important;
2882
+ }
2883
+
2841
2884
  .e-listbox-wrapper,
2842
2885
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2843
2886
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2857,9 +2900,14 @@ ejs-listbox {
2857
2900
  font-size: 14px;
2858
2901
  }
2859
2902
 
2860
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2861
- .e-listbox-container.e-filter-list .e-list-parent {
2862
- height: calc(100% - 52px);
2903
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2904
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2905
+ height: calc(100% - 92px);
2906
+ }
2907
+
2908
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2909
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
2910
+ height: calc(100% - 40px);
2863
2911
  }
2864
2912
 
2865
2913
  .e-listbox-wrapper .e-icons,
@@ -2375,6 +2375,10 @@ ejs-multiselect {
2375
2375
  .e-listbox-container * {
2376
2376
  box-sizing: border-box;
2377
2377
  }
2378
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2379
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2380
+ width: 86% !important;
2381
+ }
2378
2382
  .e-listbox-wrapper:focus,
2379
2383
  .e-listbox-container:focus {
2380
2384
  outline: none;
@@ -2605,8 +2609,8 @@ ejs-multiselect {
2605
2609
  text-indent: 0;
2606
2610
  vertical-align: middle;
2607
2611
  }
2608
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2609
- .e-listbox-container.e-right .e-checkbox-wrapper {
2612
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2613
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2610
2614
  position: absolute;
2611
2615
  right: 0;
2612
2616
  top: 30%;
@@ -2725,6 +2729,12 @@ ejs-listbox {
2725
2729
  list-style-type: none;
2726
2730
  margin-bottom: 10px;
2727
2731
  }
2732
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2733
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2734
+ position: absolute;
2735
+ right: 0;
2736
+ top: 30%;
2737
+ }
2728
2738
 
2729
2739
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2730
2740
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2735,6 +2745,12 @@ ejs-listbox {
2735
2745
  margin-left: 15px;
2736
2746
  }
2737
2747
 
2748
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2749
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2750
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2751
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2752
+ width: 85% !important;
2753
+ }
2738
2754
  .e-bigger .e-listbox-wrapper .e-list-item,
2739
2755
  .e-listbox-wrapper.e-bigger .e-list-item,
2740
2756
  .e-bigger .e-listbox-container .e-list-item,
@@ -2822,21 +2838,48 @@ ejs-listbox {
2822
2838
  .e-listbox-container.e-bigger .e-list-header .e-text {
2823
2839
  font-size: 15px;
2824
2840
  }
2825
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2826
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
2841
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
2842
+ height: calc(100% - 52px);
2843
+ }
2844
+
2845
+ .e-listbox-container.e-filter-list .e-list-wrap {
2846
+ height: calc(100% - 52px) !important;
2847
+ }
2848
+
2849
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
2827
2850
  height: calc(100% - 46px);
2828
2851
  }
2829
2852
 
2830
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2831
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2853
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
2854
+ height: calc(100% - 46px) !important;
2855
+ }
2856
+
2857
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2832
2858
  height: calc(100% - 58px);
2833
2859
  }
2834
2860
 
2835
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2836
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2861
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2862
+ height: calc(100% - 58px) !important;
2863
+ }
2864
+
2865
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2866
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2867
+ height: calc(100% - 106px);
2868
+ }
2869
+
2870
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2871
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2872
+ height: calc(100% - 48px);
2873
+ }
2874
+
2875
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2837
2876
  height: calc(100% - 54px);
2838
2877
  }
2839
2878
 
2879
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2880
+ height: calc(100% - 54px) !important;
2881
+ }
2882
+
2840
2883
  .e-listbox-wrapper,
2841
2884
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2842
2885
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2856,9 +2899,14 @@ ejs-listbox {
2856
2899
  font-size: 14px;
2857
2900
  }
2858
2901
 
2859
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2860
- .e-listbox-container.e-filter-list .e-list-parent {
2861
- height: calc(100% - 52px);
2902
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2903
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2904
+ height: calc(100% - 92px);
2905
+ }
2906
+
2907
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2908
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
2909
+ height: calc(100% - 40px);
2862
2910
  }
2863
2911
 
2864
2912
  .e-listbox-wrapper .e-icons,
@@ -2558,6 +2558,10 @@ ejs-multiselect {
2558
2558
  .e-listbox-container * {
2559
2559
  box-sizing: border-box;
2560
2560
  }
2561
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2562
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2563
+ width: 86% !important;
2564
+ }
2561
2565
  .e-listbox-wrapper:focus,
2562
2566
  .e-listbox-container:focus {
2563
2567
  outline: none;
@@ -2788,8 +2792,8 @@ ejs-multiselect {
2788
2792
  text-indent: 0;
2789
2793
  vertical-align: middle;
2790
2794
  }
2791
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2792
- .e-listbox-container.e-right .e-checkbox-wrapper {
2795
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2796
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2793
2797
  position: absolute;
2794
2798
  right: 0;
2795
2799
  top: 30%;
@@ -2908,6 +2912,12 @@ ejs-listbox {
2908
2912
  list-style-type: none;
2909
2913
  margin-bottom: 10px;
2910
2914
  }
2915
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2916
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2917
+ position: absolute;
2918
+ right: 0;
2919
+ top: 30%;
2920
+ }
2911
2921
 
2912
2922
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2913
2923
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2924,6 +2934,12 @@ ejs-listbox {
2924
2934
  .e-listbox-container.e-bigger {
2925
2935
  font-size: 16px;
2926
2936
  }
2937
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2938
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2939
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2940
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2941
+ width: 85% !important;
2942
+ }
2927
2943
  .e-bigger .e-listbox-wrapper .e-list-item,
2928
2944
  .e-listbox-wrapper.e-bigger .e-list-item,
2929
2945
  .e-bigger .e-listbox-container .e-list-item,
@@ -3049,21 +3065,48 @@ ejs-listbox {
3049
3065
  margin: 0 0 0 12px;
3050
3066
  }
3051
3067
 
3052
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3053
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
3068
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
3069
+ height: calc(100% - 39px);
3070
+ }
3071
+
3072
+ .e-listbox-container.e-filter-list .e-list-wrap {
3073
+ height: calc(100% - 39px) !important;
3074
+ }
3075
+
3076
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
3054
3077
  height: calc(100% - 32px);
3055
3078
  }
3056
3079
 
3057
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3058
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3080
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
3081
+ height: calc(100% - 32px) !important;
3082
+ }
3083
+
3084
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3059
3085
  height: calc(100% - 46px);
3060
3086
  }
3061
3087
 
3062
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3063
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3088
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3089
+ height: calc(100% - 46px) !important;
3090
+ }
3091
+
3092
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3093
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3094
+ height: calc(100% - 96px);
3095
+ }
3096
+
3097
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3098
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
3099
+ height: calc(100% - 50px);
3100
+ }
3101
+
3102
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3064
3103
  height: calc(100% - 44px);
3065
3104
  }
3066
3105
 
3106
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3107
+ height: calc(100% - 44px) !important;
3108
+ }
3109
+
3067
3110
  .e-listbox-wrapper,
3068
3111
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
3069
3112
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -3083,9 +3126,14 @@ ejs-listbox {
3083
3126
  font-size: 16px;
3084
3127
  }
3085
3128
 
3086
- .e-listbox-wrapper.e-filter-list .e-list-parent,
3087
- .e-listbox-container.e-filter-list .e-list-parent {
3088
- height: calc(100% - 39px);
3129
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3130
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3131
+ height: calc(100% - 79px);
3132
+ }
3133
+
3134
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3135
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3136
+ height: calc(100% - 40px);
3089
3137
  }
3090
3138
 
3091
3139
  .e-listbox-wrapper .e-icons,