@syncfusion/ej2-dropdowns 22.2.12 → 23.1.36

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 (254) hide show
  1. package/.eslintrc.json +260 -0
  2. package/CHANGELOG.md +2 -215
  3. package/dist/ej2-dropdowns.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js +2 -2
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +1118 -66
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +1172 -62
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +2 -2
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +13 -12
  14. package/src/auto-complete/auto-complete.js +40 -2
  15. package/src/combo-box/combo-box.js +9 -3
  16. package/src/common/index.d.ts +2 -0
  17. package/src/common/index.js +1 -0
  18. package/src/common/interface.d.ts +76 -0
  19. package/src/common/interface.js +1 -0
  20. package/src/common/virtual-scroll.d.ts +61 -0
  21. package/src/common/virtual-scroll.js +376 -0
  22. package/src/drop-down-base/drop-down-base.d.ts +10 -4
  23. package/src/drop-down-base/drop-down-base.js +72 -8
  24. package/src/drop-down-list/drop-down-list-model.d.ts +8 -1
  25. package/src/drop-down-list/drop-down-list.d.ts +55 -1
  26. package/src/drop-down-list/drop-down-list.js +635 -37
  27. package/src/drop-down-list/index.d.ts +1 -0
  28. package/src/drop-down-list/index.js +1 -0
  29. package/src/drop-down-tree/drop-down-tree.d.ts +1 -1
  30. package/src/global.js +3 -0
  31. package/src/mention/mention.js +8 -1
  32. package/src/multi-select/checkbox-selection.js +1 -1
  33. package/src/multi-select/multi-select.d.ts +1 -0
  34. package/src/multi-select/multi-select.js +34 -8
  35. package/styles/auto-complete/bootstrap-dark.scss +1 -1
  36. package/styles/auto-complete/bootstrap.scss +1 -1
  37. package/styles/auto-complete/bootstrap4.scss +1 -1
  38. package/styles/auto-complete/bootstrap5-dark.scss +1 -1
  39. package/styles/auto-complete/bootstrap5.scss +1 -1
  40. package/styles/auto-complete/fabric-dark.scss +1 -1
  41. package/styles/auto-complete/fabric.scss +1 -1
  42. package/styles/auto-complete/fluent-dark.scss +1 -1
  43. package/styles/auto-complete/fluent.scss +1 -1
  44. package/styles/auto-complete/highcontrast-light.scss +1 -1
  45. package/styles/auto-complete/highcontrast.scss +1 -1
  46. package/styles/auto-complete/material-dark.css +0 -1
  47. package/styles/auto-complete/material-dark.scss +1 -1
  48. package/styles/auto-complete/material.css +0 -1
  49. package/styles/auto-complete/material.scss +1 -1
  50. package/styles/auto-complete/material3-dark.css +0 -1
  51. package/styles/auto-complete/material3-dark.scss +1 -1
  52. package/styles/auto-complete/material3.css +0 -1
  53. package/styles/auto-complete/material3.scss +1 -1
  54. package/styles/auto-complete/tailwind-dark.css +0 -1
  55. package/styles/auto-complete/tailwind-dark.scss +1 -1
  56. package/styles/auto-complete/tailwind.css +0 -1
  57. package/styles/auto-complete/tailwind.scss +1 -1
  58. package/styles/bootstrap-dark.css +0 -8
  59. package/styles/bootstrap.css +0 -8
  60. package/styles/bootstrap4.css +4 -12
  61. package/styles/bootstrap5-dark.css +0 -8
  62. package/styles/bootstrap5.css +0 -8
  63. package/styles/combo-box/bootstrap-dark.scss +1 -1
  64. package/styles/combo-box/bootstrap.scss +1 -1
  65. package/styles/combo-box/bootstrap4.scss +1 -1
  66. package/styles/combo-box/bootstrap5-dark.scss +1 -1
  67. package/styles/combo-box/bootstrap5.scss +1 -1
  68. package/styles/combo-box/fabric-dark.scss +1 -1
  69. package/styles/combo-box/fabric.scss +1 -1
  70. package/styles/combo-box/fluent-dark.scss +1 -1
  71. package/styles/combo-box/fluent.scss +1 -1
  72. package/styles/combo-box/highcontrast-light.scss +1 -1
  73. package/styles/combo-box/highcontrast.scss +1 -1
  74. package/styles/combo-box/material-dark.css +0 -1
  75. package/styles/combo-box/material-dark.scss +1 -1
  76. package/styles/combo-box/material.css +0 -1
  77. package/styles/combo-box/material.scss +1 -1
  78. package/styles/combo-box/material3-dark.css +0 -1
  79. package/styles/combo-box/material3-dark.scss +1 -1
  80. package/styles/combo-box/material3.css +0 -1
  81. package/styles/combo-box/material3.scss +1 -1
  82. package/styles/combo-box/tailwind-dark.css +0 -1
  83. package/styles/combo-box/tailwind-dark.scss +1 -1
  84. package/styles/combo-box/tailwind.css +0 -1
  85. package/styles/combo-box/tailwind.scss +1 -1
  86. package/styles/drop-down-base/bootstrap-dark.scss +1 -1
  87. package/styles/drop-down-base/bootstrap.scss +1 -1
  88. package/styles/drop-down-base/bootstrap4.scss +1 -1
  89. package/styles/drop-down-base/bootstrap5-dark.scss +1 -1
  90. package/styles/drop-down-base/bootstrap5.scss +1 -1
  91. package/styles/drop-down-base/fabric-dark.scss +1 -1
  92. package/styles/drop-down-base/fabric.scss +1 -1
  93. package/styles/drop-down-base/fluent-dark.scss +1 -1
  94. package/styles/drop-down-base/fluent.scss +1 -1
  95. package/styles/drop-down-base/highcontrast-light.scss +1 -1
  96. package/styles/drop-down-base/highcontrast.scss +1 -1
  97. package/styles/drop-down-base/material-dark.css +0 -1
  98. package/styles/drop-down-base/material-dark.scss +1 -1
  99. package/styles/drop-down-base/material.css +0 -1
  100. package/styles/drop-down-base/material.scss +1 -1
  101. package/styles/drop-down-base/material3-dark.css +0 -1
  102. package/styles/drop-down-base/material3-dark.scss +1 -1
  103. package/styles/drop-down-base/material3.css +0 -1
  104. package/styles/drop-down-base/material3.scss +1 -1
  105. package/styles/drop-down-base/tailwind-dark.css +0 -1
  106. package/styles/drop-down-base/tailwind-dark.scss +1 -1
  107. package/styles/drop-down-base/tailwind.css +0 -1
  108. package/styles/drop-down-base/tailwind.scss +1 -1
  109. package/styles/drop-down-list/bootstrap-dark.scss +2 -1
  110. package/styles/drop-down-list/bootstrap.scss +2 -1
  111. package/styles/drop-down-list/bootstrap4.scss +2 -1
  112. package/styles/drop-down-list/bootstrap5-dark.scss +2 -1
  113. package/styles/drop-down-list/bootstrap5.scss +2 -1
  114. package/styles/drop-down-list/fabric-dark.scss +2 -1
  115. package/styles/drop-down-list/fabric.scss +2 -1
  116. package/styles/drop-down-list/fluent-dark.scss +2 -1
  117. package/styles/drop-down-list/fluent.scss +2 -1
  118. package/styles/drop-down-list/highcontrast-light.scss +2 -1
  119. package/styles/drop-down-list/highcontrast.scss +2 -1
  120. package/styles/drop-down-list/material-dark.css +0 -1
  121. package/styles/drop-down-list/material-dark.scss +2 -1
  122. package/styles/drop-down-list/material.css +0 -1
  123. package/styles/drop-down-list/material.scss +2 -1
  124. package/styles/drop-down-list/material3-dark.css +0 -1
  125. package/styles/drop-down-list/material3-dark.scss +2 -1
  126. package/styles/drop-down-list/material3.css +0 -1
  127. package/styles/drop-down-list/material3.scss +2 -1
  128. package/styles/drop-down-list/tailwind-dark.css +0 -1
  129. package/styles/drop-down-list/tailwind-dark.scss +2 -1
  130. package/styles/drop-down-list/tailwind.css +0 -1
  131. package/styles/drop-down-list/tailwind.scss +2 -1
  132. package/styles/drop-down-tree/bootstrap-dark.scss +1 -1
  133. package/styles/drop-down-tree/bootstrap.scss +1 -1
  134. package/styles/drop-down-tree/bootstrap4.scss +1 -1
  135. package/styles/drop-down-tree/bootstrap5-dark.scss +1 -1
  136. package/styles/drop-down-tree/bootstrap5.scss +1 -1
  137. package/styles/drop-down-tree/fabric-dark.scss +1 -1
  138. package/styles/drop-down-tree/fabric.scss +1 -1
  139. package/styles/drop-down-tree/fluent-dark.scss +1 -1
  140. package/styles/drop-down-tree/fluent.scss +1 -1
  141. package/styles/drop-down-tree/highcontrast-light.scss +1 -1
  142. package/styles/drop-down-tree/highcontrast.scss +1 -1
  143. package/styles/drop-down-tree/material-dark.css +0 -1
  144. package/styles/drop-down-tree/material-dark.scss +1 -1
  145. package/styles/drop-down-tree/material.css +0 -1
  146. package/styles/drop-down-tree/material.scss +1 -1
  147. package/styles/drop-down-tree/material3-dark.css +0 -1
  148. package/styles/drop-down-tree/material3-dark.scss +1 -1
  149. package/styles/drop-down-tree/material3.css +0 -1
  150. package/styles/drop-down-tree/material3.scss +1 -1
  151. package/styles/drop-down-tree/tailwind-dark.css +0 -1
  152. package/styles/drop-down-tree/tailwind-dark.scss +1 -1
  153. package/styles/drop-down-tree/tailwind.css +0 -1
  154. package/styles/drop-down-tree/tailwind.scss +1 -1
  155. package/styles/fabric-dark.css +0 -8
  156. package/styles/fabric.css +0 -8
  157. package/styles/fluent-dark.css +4 -12
  158. package/styles/fluent.css +4 -12
  159. package/styles/highcontrast-light.css +0 -8
  160. package/styles/highcontrast.css +0 -8
  161. package/styles/list-box/_bootstrap4-definition.scss +4 -4
  162. package/styles/list-box/_fluent-definition.scss +4 -4
  163. package/styles/list-box/_layout.scss +0 -6
  164. package/styles/list-box/_material3-definition.scss +4 -4
  165. package/styles/list-box/_tailwind-definition.scss +3 -3
  166. package/styles/list-box/bootstrap-dark.css +0 -8
  167. package/styles/list-box/bootstrap-dark.scss +1 -1
  168. package/styles/list-box/bootstrap.css +0 -8
  169. package/styles/list-box/bootstrap.scss +1 -1
  170. package/styles/list-box/bootstrap4.css +4 -12
  171. package/styles/list-box/bootstrap4.scss +1 -1
  172. package/styles/list-box/bootstrap5-dark.css +0 -8
  173. package/styles/list-box/bootstrap5-dark.scss +1 -1
  174. package/styles/list-box/bootstrap5.css +0 -8
  175. package/styles/list-box/bootstrap5.scss +1 -1
  176. package/styles/list-box/fabric-dark.css +0 -8
  177. package/styles/list-box/fabric-dark.scss +1 -1
  178. package/styles/list-box/fabric.css +0 -8
  179. package/styles/list-box/fabric.scss +1 -1
  180. package/styles/list-box/fluent-dark.css +4 -12
  181. package/styles/list-box/fluent-dark.scss +1 -1
  182. package/styles/list-box/fluent.css +4 -12
  183. package/styles/list-box/fluent.scss +1 -1
  184. package/styles/list-box/highcontrast-light.css +0 -8
  185. package/styles/list-box/highcontrast-light.scss +1 -1
  186. package/styles/list-box/highcontrast.css +0 -8
  187. package/styles/list-box/highcontrast.scss +1 -1
  188. package/styles/list-box/material-dark.css +0 -9
  189. package/styles/list-box/material-dark.scss +1 -1
  190. package/styles/list-box/material.css +0 -9
  191. package/styles/list-box/material.scss +1 -1
  192. package/styles/list-box/material3-dark.css +4 -13
  193. package/styles/list-box/material3-dark.scss +1 -1
  194. package/styles/list-box/material3.css +4 -13
  195. package/styles/list-box/material3.scss +1 -1
  196. package/styles/list-box/tailwind-dark.css +3 -12
  197. package/styles/list-box/tailwind-dark.scss +1 -1
  198. package/styles/list-box/tailwind.css +3 -12
  199. package/styles/list-box/tailwind.scss +1 -1
  200. package/styles/material-dark.css +0 -9
  201. package/styles/material.css +0 -9
  202. package/styles/material3-dark.css +4 -13
  203. package/styles/material3-dark.scss +1 -1
  204. package/styles/material3.css +4 -13
  205. package/styles/material3.scss +1 -1
  206. package/styles/mention/bootstrap-dark.scss +1 -1
  207. package/styles/mention/bootstrap.scss +1 -1
  208. package/styles/mention/bootstrap4.scss +1 -1
  209. package/styles/mention/bootstrap5-dark.scss +1 -1
  210. package/styles/mention/bootstrap5.scss +1 -1
  211. package/styles/mention/fabric-dark.scss +1 -1
  212. package/styles/mention/fabric.scss +1 -1
  213. package/styles/mention/fluent-dark.scss +1 -1
  214. package/styles/mention/fluent.scss +1 -1
  215. package/styles/mention/highcontrast-light.scss +1 -1
  216. package/styles/mention/highcontrast.scss +1 -1
  217. package/styles/mention/material-dark.css +0 -1
  218. package/styles/mention/material-dark.scss +1 -1
  219. package/styles/mention/material.css +0 -1
  220. package/styles/mention/material.scss +1 -1
  221. package/styles/mention/material3-dark.css +0 -1
  222. package/styles/mention/material3-dark.scss +1 -1
  223. package/styles/mention/material3.css +0 -1
  224. package/styles/mention/material3.scss +1 -1
  225. package/styles/mention/tailwind-dark.css +0 -1
  226. package/styles/mention/tailwind-dark.scss +1 -1
  227. package/styles/mention/tailwind.css +0 -1
  228. package/styles/mention/tailwind.scss +1 -1
  229. package/styles/multi-select/bootstrap-dark.scss +1 -1
  230. package/styles/multi-select/bootstrap.scss +1 -1
  231. package/styles/multi-select/bootstrap4.scss +1 -1
  232. package/styles/multi-select/bootstrap5-dark.scss +1 -1
  233. package/styles/multi-select/bootstrap5.scss +1 -1
  234. package/styles/multi-select/fabric-dark.scss +1 -1
  235. package/styles/multi-select/fabric.scss +1 -1
  236. package/styles/multi-select/fluent-dark.scss +1 -1
  237. package/styles/multi-select/fluent.scss +1 -1
  238. package/styles/multi-select/highcontrast-light.scss +1 -1
  239. package/styles/multi-select/highcontrast.scss +1 -1
  240. package/styles/multi-select/material-dark.css +0 -1
  241. package/styles/multi-select/material-dark.scss +1 -1
  242. package/styles/multi-select/material.css +0 -1
  243. package/styles/multi-select/material.scss +1 -1
  244. package/styles/multi-select/material3-dark.css +0 -1
  245. package/styles/multi-select/material3-dark.scss +1 -1
  246. package/styles/multi-select/material3.css +0 -1
  247. package/styles/multi-select/material3.scss +1 -1
  248. package/styles/multi-select/tailwind-dark.css +0 -1
  249. package/styles/multi-select/tailwind-dark.scss +1 -1
  250. package/styles/multi-select/tailwind.css +0 -1
  251. package/styles/multi-select/tailwind.scss +1 -1
  252. package/styles/tailwind-dark.css +3 -19
  253. package/styles/tailwind.css +3 -19
  254. package/tslint.json +111 -0
@@ -3,3 +3,4 @@
3
3
  */
4
4
  export * from './drop-down-list';
5
5
  export * from './drop-down-list-model';
6
+ export * from '../common/virtual-scroll';
@@ -2,3 +2,4 @@
2
2
  * export all modules from current location
3
3
  */
4
4
  export * from './drop-down-list';
5
+ export * from '../common/virtual-scroll';
@@ -6,7 +6,7 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
6
6
  import { Popup } from '@syncfusion/ej2-popups';
7
7
  import { DropDownTreeModel, FieldsModel, TreeSettingsModel } from './drop-down-tree-model';
8
8
  /**
9
- * Specifies the different ways to filter values
9
+ * Specifies the different ways to filter values.
10
10
  * ```props
11
11
  * StartsWith :- Checks whether a value begins with the specified value.
12
12
  * EndsWith :- Checks whether a value ends with the specified value.
package/src/global.js CHANGED
@@ -1,4 +1,7 @@
1
1
  import * as index from './index';
2
+ index.DropDownList.Inject(index.VirtualScroll);
3
+ index.ComboBox.Inject(index.VirtualScroll);
4
+ index.AutoComplete.Inject(index.VirtualScroll);
2
5
  index.MultiSelect.Inject(index.CheckBoxSelection);
3
6
  index.ListBox.Inject(index.CheckBoxSelection);
4
7
  export * from './index';
@@ -710,7 +710,9 @@ var Mention = /** @class */ (function (_super) {
710
710
  _this.trigger('opened', eventArgs, function (eventArgs) {
711
711
  if (!eventArgs.cancel) {
712
712
  _this.renderReactTemplates();
713
- _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
713
+ if (_this.popupObj) {
714
+ _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
715
+ }
714
716
  if (isNullOrUndefined(_this.getTriggerCharPosition())) {
715
717
  return;
716
718
  }
@@ -1423,6 +1425,11 @@ var Mention = /** @class */ (function (_super) {
1423
1425
  if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {
1424
1426
  return;
1425
1427
  }
1428
+ this.previousSelectedLI = null;
1429
+ this.item = null;
1430
+ this.selectedLI = null;
1431
+ this.inputElement.innerText = null;
1432
+ this.popupObj = null;
1426
1433
  _super.prototype.destroy.call(this);
1427
1434
  };
1428
1435
  Mention.prototype.getLocaleName = function () {
@@ -203,7 +203,7 @@ var CheckBoxSelection = /** @class */ (function () {
203
203
  };
204
204
  CheckBoxSelection.prototype.clickHandler = function (e) {
205
205
  var target;
206
- if (e.currentTarget.classList.contains(this.checkAllParent.className)) {
206
+ if (e.currentTarget.classList.contains(this.checkAllParent.className) || (e.currentTarget.classList.value === this.checkAllParent.className)) {
207
207
  target = e.currentTarget.firstElementChild.lastElementChild;
208
208
  }
209
209
  else {
@@ -676,6 +676,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
676
676
  private refreshListItems;
677
677
  private removeSelectedChip;
678
678
  private moveByTop;
679
+ private clickHandler;
679
680
  private moveByList;
680
681
  private updateCheck;
681
682
  private moveBy;
@@ -264,6 +264,9 @@ var MultiSelect = /** @class */ (function (_super) {
264
264
  if (_this.isFirstClick) {
265
265
  _this.loadTemplate();
266
266
  }
267
+ if (_this.mode === 'CheckBox' && _this.showSelectAll) {
268
+ EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);
269
+ }
267
270
  }
268
271
  });
269
272
  };
@@ -1270,11 +1273,19 @@ var MultiSelect = /** @class */ (function (_super) {
1270
1273
  };
1271
1274
  MultiSelect.prototype.spaceKeySelection = function (e) {
1272
1275
  if (this.mode === 'CheckBox') {
1273
- if (!document.activeElement.classList.contains(FILTERINPUT)) {
1276
+ var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);
1277
+ var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
1278
+ if (!isNullOrUndefined(li) || (selectAllParent && selectAllParent.classList.contains('e-item-focus'))) {
1274
1279
  e.preventDefault();
1275
1280
  this.keyAction = true;
1276
1281
  }
1277
1282
  this.selectByKey(e);
1283
+ if (this.keyAction) {
1284
+ var li_1 = this.list.querySelector('li.' + dropDownBaseClasses.focus);
1285
+ if (!isNullOrUndefined(li_1) && selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
1286
+ li_1.classList.remove('e-item-focus');
1287
+ }
1288
+ }
1278
1289
  }
1279
1290
  this.checkPlaceholderSize();
1280
1291
  };
@@ -1430,9 +1441,6 @@ var MultiSelect = /** @class */ (function (_super) {
1430
1441
  }
1431
1442
  }
1432
1443
  var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
1433
- if (selectAllParent && !selectAllParent.classList.contains('e-item-focus')) {
1434
- e.preventDefault();
1435
- }
1436
1444
  if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
1437
1445
  var selectAllCheckBox = selectAllParent.childNodes[0];
1438
1446
  if (!selectAllCheckBox.classList.contains('e-check')) {
@@ -1505,6 +1513,14 @@ var MultiSelect = /** @class */ (function (_super) {
1505
1513
  }
1506
1514
  this.updateAriaAttribute();
1507
1515
  };
1516
+ MultiSelect.prototype.clickHandler = function (e) {
1517
+ var targetElement = e.target;
1518
+ var filterInputClassName = targetElement.className;
1519
+ var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
1520
+ if ((filterInputClassName === 'e-input-filter e-input' || filterInputClassName === 'e-input-group e-control-wrapper e-input-focus') && selectAllParent.classList.contains('e-item-focus')) {
1521
+ selectAllParent.classList.remove('e-item-focus');
1522
+ }
1523
+ };
1508
1524
  MultiSelect.prototype.moveByList = function (position) {
1509
1525
  if (this.list) {
1510
1526
  var elements = this.list.querySelectorAll('li.'
@@ -1519,12 +1535,19 @@ var MultiSelect = /** @class */ (function (_super) {
1519
1535
  var temp = -1;
1520
1536
  var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
1521
1537
  if (this.mode === 'CheckBox' && this.showSelectAll && position == 1 && !isNullOrUndefined(selectAllParent) && !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length == 0 && this.liCollections.length > 1) {
1522
- selectAllParent.classList.add('e-item-focus');
1538
+ if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
1539
+ selectAllParent.classList.remove('e-item-focus');
1540
+ }
1541
+ else if (!selectAllParent.classList.contains('e-item-focus')) {
1542
+ selectAllParent.classList.add('e-item-focus');
1543
+ }
1523
1544
  }
1524
1545
  else if (elements.length) {
1525
- if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent)) {
1526
- selectAllParent.classList.remove('e-item-focus');
1527
- if (this.showSelectAll && position == -1 && !isNullOrUndefined(selectAllParent) && this.liCollections.length > 1 && (this.focusFirstListItem || this.list.getElementsByClassName('e-item-focus').length == 0)) {
1546
+ if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position == -1)) {
1547
+ if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
1548
+ selectAllParent.classList.remove('e-item-focus');
1549
+ }
1550
+ else if (this.focusFirstListItem && !selectAllParent.classList.contains('e-item-focus')) {
1528
1551
  selectAllParent.classList.add('e-item-focus');
1529
1552
  }
1530
1553
  }
@@ -3797,6 +3820,9 @@ var MultiSelect = /** @class */ (function (_super) {
3797
3820
  _this.popupObj.hide();
3798
3821
  removeClass([document.body, _this.popupObj.element], 'e-popup-full-page');
3799
3822
  EventHandler.remove(_this.list, 'keydown', _this.onKeyDown);
3823
+ if (_this.mode === 'CheckBox' && _this.showSelectAll) {
3824
+ EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
3825
+ }
3800
3826
  }
3801
3827
  });
3802
3828
  }
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap-dark.scss';
2
2
  @import '../drop-down-list/bootstrap-dark-definition.scss';
3
3
  @import 'bootstrap-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap.scss';
2
2
  @import '../drop-down-list/bootstrap-definition.scss';
3
3
  @import 'bootstrap-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap4-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap4.scss';
2
2
  @import '../drop-down-list/bootstrap4-definition.scss';
3
3
  @import 'bootstrap4-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5-dark.scss';
2
2
  @import '../drop-down-list/bootstrap5-dark-definition.scss';
3
3
  @import 'bootstrap5-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5.scss';
2
2
  @import '../drop-down-list/bootstrap5-definition.scss';
3
3
  @import 'bootstrap5-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric-dark.scss';
2
2
  @import '../drop-down-list/fabric-dark-definition.scss';
3
3
  @import 'fabric-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric.scss';
2
2
  @import '../drop-down-list/fabric-definition.scss';
3
3
  @import 'fabric-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent-dark.scss';
2
2
  @import '../drop-down-list/fluent-dark-definition.scss';
3
3
  @import 'fluent-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent.scss';
2
2
  @import '../drop-down-list/fluent-definition.scss';
3
3
  @import 'fluent-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-light-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast-light.scss';
2
2
  @import '../drop-down-list/highcontrast-light-definition.scss';
3
3
  @import 'highcontrast-light-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast.scss';
2
2
  @import '../drop-down-list/highcontrast-definition.scss';
3
3
  @import 'highcontrast-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/material-dark.scss';
2
2
  @import '../drop-down-list/material-dark-definition.scss';
3
3
  @import 'material-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-definition.scss';
1
+ @import 'ej2-base/styles/definition/material.scss';
2
2
  @import '../drop-down-list/material-definition.scss';
3
3
  @import 'material-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-dark-definition.scss';
1
+
2
2
 
3
3
  @import '../drop-down-list/material3-dark-definition.scss';
4
4
  @import 'material3-dark-definition.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-definition.scss';
1
+
2
2
 
3
3
  @import '../drop-down-list/material3-definition.scss';
4
4
  @import 'material3-definition.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind-dark.scss';
2
2
  @import '../drop-down-list/tailwind-dark-definition.scss';
3
3
  @import 'tailwind-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind.scss';
2
2
  @import '../drop-down-list/tailwind-definition.scss';
3
3
  @import 'tailwind-definition.scss';
4
4
  @import 'all.scss';
@@ -2490,11 +2490,6 @@ ejs-multiselect {
2490
2490
  padding: 13px 16px;
2491
2491
  position: relative;
2492
2492
  }
2493
- .e-listbox-wrapper.e-filter-list,
2494
- .e-listbox-container.e-filter-list,
2495
- .e-listboxtool-wrapper.e-filter-list {
2496
- overflow: inherit;
2497
- }
2498
2493
  .e-listbox-wrapper .e-list-parent,
2499
2494
  .e-listbox-container .e-list-parent,
2500
2495
  .e-listboxtool-wrapper .e-list-parent {
@@ -2778,9 +2773,6 @@ ejs-listbox {
2778
2773
  overflow: auto;
2779
2774
  }
2780
2775
 
2781
- .e-listbox-wrapper.e-filter-list {
2782
- overflow: inherit;
2783
- }
2784
2776
  .e-listbox-wrapper.e-filter-list .e-list-parent {
2785
2777
  overflow: auto;
2786
2778
  }
@@ -2494,11 +2494,6 @@ ejs-multiselect {
2494
2494
  padding: 13px 16px;
2495
2495
  position: relative;
2496
2496
  }
2497
- .e-listbox-wrapper.e-filter-list,
2498
- .e-listbox-container.e-filter-list,
2499
- .e-listboxtool-wrapper.e-filter-list {
2500
- overflow: inherit;
2501
- }
2502
2497
  .e-listbox-wrapper .e-list-parent,
2503
2498
  .e-listbox-container .e-list-parent,
2504
2499
  .e-listboxtool-wrapper .e-list-parent {
@@ -2782,9 +2777,6 @@ ejs-listbox {
2782
2777
  overflow: auto;
2783
2778
  }
2784
2779
 
2785
- .e-listbox-wrapper.e-filter-list {
2786
- overflow: inherit;
2787
- }
2788
2780
  .e-listbox-wrapper.e-filter-list .e-list-parent {
2789
2781
  overflow: auto;
2790
2782
  }
@@ -2671,11 +2671,6 @@ ejs-multiselect {
2671
2671
  padding: 10px 16px 10px 16px;
2672
2672
  position: relative;
2673
2673
  }
2674
- .e-listbox-wrapper.e-filter-list,
2675
- .e-listbox-container.e-filter-list,
2676
- .e-listboxtool-wrapper.e-filter-list {
2677
- overflow: inherit;
2678
- }
2679
2674
  .e-listbox-wrapper .e-list-parent,
2680
2675
  .e-listbox-container .e-list-parent,
2681
2676
  .e-listboxtool-wrapper .e-list-parent {
@@ -2959,9 +2954,6 @@ ejs-listbox {
2959
2954
  overflow: auto;
2960
2955
  }
2961
2956
 
2962
- .e-listbox-wrapper.e-filter-list {
2963
- overflow: inherit;
2964
- }
2965
2957
  .e-listbox-wrapper.e-filter-list .e-list-parent {
2966
2958
  overflow: auto;
2967
2959
  }
@@ -3207,12 +3199,12 @@ ejs-listbox {
3207
3199
 
3208
3200
  .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3209
3201
  .e-small .e-listbox-container.e-filter-list .e-list-parent {
3210
- height: calc(100% - 32px);
3202
+ height: calc(100% - 43px);
3211
3203
  }
3212
3204
 
3213
3205
  .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3214
3206
  .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3215
- height: calc(100% - 46px);
3207
+ height: calc(100% - 56px);
3216
3208
  }
3217
3209
 
3218
3210
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -3227,7 +3219,7 @@ ejs-listbox {
3227
3219
 
3228
3220
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3229
3221
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3230
- height: calc(100% - 44px);
3222
+ height: calc(100% - 56px);
3231
3223
  }
3232
3224
 
3233
3225
  .e-listbox-wrapper,
@@ -3254,7 +3246,7 @@ ejs-listbox {
3254
3246
  .e-listbox-wrapper.e-filter-list .e-list-parent,
3255
3247
  .e-listbox-container.e-filter-list .e-list-parent,
3256
3248
  .e-listboxtool-wrapper.e-filter-list .e-list-parent {
3257
- height: calc(100% - 39px);
3249
+ height: calc(100% - 48px);
3258
3250
  }
3259
3251
 
3260
3252
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -2663,11 +2663,6 @@ ejs-multiselect {
2663
2663
  padding: 10px 12px;
2664
2664
  position: relative;
2665
2665
  }
2666
- .e-listbox-wrapper.e-filter-list,
2667
- .e-listbox-container.e-filter-list,
2668
- .e-listboxtool-wrapper.e-filter-list {
2669
- overflow: inherit;
2670
- }
2671
2666
  .e-listbox-wrapper .e-list-parent,
2672
2667
  .e-listbox-container .e-list-parent,
2673
2668
  .e-listboxtool-wrapper .e-list-parent {
@@ -2951,9 +2946,6 @@ ejs-listbox {
2951
2946
  overflow: auto;
2952
2947
  }
2953
2948
 
2954
- .e-listbox-wrapper.e-filter-list {
2955
- overflow: inherit;
2956
- }
2957
2949
  .e-listbox-wrapper.e-filter-list .e-list-parent {
2958
2950
  overflow: auto;
2959
2951
  }
@@ -2663,11 +2663,6 @@ ejs-multiselect {
2663
2663
  padding: 10px 12px;
2664
2664
  position: relative;
2665
2665
  }
2666
- .e-listbox-wrapper.e-filter-list,
2667
- .e-listbox-container.e-filter-list,
2668
- .e-listboxtool-wrapper.e-filter-list {
2669
- overflow: inherit;
2670
- }
2671
2666
  .e-listbox-wrapper .e-list-parent,
2672
2667
  .e-listbox-container .e-list-parent,
2673
2668
  .e-listboxtool-wrapper .e-list-parent {
@@ -2951,9 +2946,6 @@ ejs-listbox {
2951
2946
  overflow: auto;
2952
2947
  }
2953
2948
 
2954
- .e-listbox-wrapper.e-filter-list {
2955
- overflow: inherit;
2956
- }
2957
2949
  .e-listbox-wrapper.e-filter-list .e-list-parent {
2958
2950
  overflow: auto;
2959
2951
  }
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap-dark.scss';
2
2
  @import '../drop-down-list/bootstrap-dark-definition.scss';
3
3
  @import 'bootstrap-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap.scss';
2
2
  @import '../drop-down-list/bootstrap-definition.scss';
3
3
  @import 'bootstrap-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap4-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap4.scss';
2
2
  @import '../drop-down-list/bootstrap4-definition.scss';
3
3
  @import 'bootstrap4-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5-dark.scss';
2
2
  @import '../drop-down-list/bootstrap5-dark-definition.scss';
3
3
  @import 'bootstrap5-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5.scss';
2
2
  @import '../drop-down-list/bootstrap5-definition.scss';
3
3
  @import 'bootstrap5-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric-dark.scss';
2
2
  @import '../drop-down-list/fabric-dark-definition.scss';
3
3
  @import 'fabric-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric.scss';
2
2
  @import '../drop-down-list/fabric-definition.scss';
3
3
  @import 'fabric-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent-dark.scss';
2
2
  @import '../drop-down-list/fluent-dark-definition.scss';
3
3
  @import 'fluent-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent.scss';
2
2
  @import '../drop-down-list/fluent-definition.scss';
3
3
  @import 'fluent-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-light-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast-light.scss';
2
2
  @import '../drop-down-list/highcontrast-light-definition.scss';
3
3
  @import 'highcontrast-light-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast.scss';
2
2
  @import '../drop-down-list/highcontrast-definition.scss';
3
3
  @import 'highcontrast-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/material-dark.scss';
2
2
  @import '../drop-down-list/material-dark-definition.scss';
3
3
  @import 'material-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-definition.scss';
1
+ @import 'ej2-base/styles/definition/material.scss';
2
2
  @import '../drop-down-list/material-definition.scss';
3
3
  @import 'material-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-dark-definition.scss';
1
+
2
2
 
3
3
  @import '../drop-down-list/material3-dark-definition.scss';
4
4
  @import 'material3-dark-definition.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-definition.scss';
1
+
2
2
 
3
3
  @import '../drop-down-list/material3-definition.scss';
4
4
  @import 'material3-definition.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind-dark.scss';
2
2
  @import '../drop-down-list/tailwind-dark-definition.scss';
3
3
  @import 'tailwind-dark-definition.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
3
2
  transform: rotate(0deg);
4
3
  transition: transform 300ms ease;