@syncfusion/ej2-dropdowns 30.1.42 → 30.2.4

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 (122) hide show
  1. package/aceconfig.js +17 -0
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +142 -5
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +143 -5
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +8 -8
  13. package/src/drop-down-base/drop-down-base.d.ts +2 -0
  14. package/src/drop-down-base/drop-down-base.js +87 -1
  15. package/src/drop-down-list/drop-down-list.js +3 -0
  16. package/src/list-box/list-box.d.ts +1 -0
  17. package/src/list-box/list-box.js +21 -3
  18. package/src/multi-select/multi-select.js +32 -1
  19. package/styles/bds-lite.css +12 -0
  20. package/styles/bds.css +12 -0
  21. package/styles/bootstrap-dark-lite.css +12 -0
  22. package/styles/bootstrap-dark.css +12 -0
  23. package/styles/bootstrap-lite.css +12 -0
  24. package/styles/bootstrap.css +12 -0
  25. package/styles/bootstrap4-lite.css +12 -0
  26. package/styles/bootstrap4.css +12 -0
  27. package/styles/bootstrap5-dark-lite.css +12 -0
  28. package/styles/bootstrap5-dark.css +12 -0
  29. package/styles/bootstrap5-lite.css +12 -0
  30. package/styles/bootstrap5.3-lite.css +12 -0
  31. package/styles/bootstrap5.3.css +12 -0
  32. package/styles/bootstrap5.css +12 -0
  33. package/styles/drop-down-tree/_layout.scss +5 -0
  34. package/styles/drop-down-tree/bds.css +3 -0
  35. package/styles/drop-down-tree/bootstrap-dark.css +3 -0
  36. package/styles/drop-down-tree/bootstrap.css +3 -0
  37. package/styles/drop-down-tree/bootstrap4.css +3 -0
  38. package/styles/drop-down-tree/bootstrap5-dark.css +3 -0
  39. package/styles/drop-down-tree/bootstrap5.3.css +3 -0
  40. package/styles/drop-down-tree/bootstrap5.css +3 -0
  41. package/styles/drop-down-tree/fabric-dark.css +3 -0
  42. package/styles/drop-down-tree/fabric.css +3 -0
  43. package/styles/drop-down-tree/fluent-dark.css +3 -0
  44. package/styles/drop-down-tree/fluent.css +3 -0
  45. package/styles/drop-down-tree/fluent2.css +3 -0
  46. package/styles/drop-down-tree/highcontrast-light.css +3 -0
  47. package/styles/drop-down-tree/highcontrast.css +3 -0
  48. package/styles/drop-down-tree/material-dark.css +3 -0
  49. package/styles/drop-down-tree/material.css +3 -0
  50. package/styles/drop-down-tree/material3-dark.css +3 -0
  51. package/styles/drop-down-tree/material3.css +3 -0
  52. package/styles/drop-down-tree/tailwind-dark.css +3 -0
  53. package/styles/drop-down-tree/tailwind.css +3 -0
  54. package/styles/drop-down-tree/tailwind3.css +3 -0
  55. package/styles/fabric-dark-lite.css +12 -0
  56. package/styles/fabric-dark.css +12 -0
  57. package/styles/fabric-lite.css +12 -0
  58. package/styles/fabric.css +12 -0
  59. package/styles/fluent-dark-lite.css +12 -0
  60. package/styles/fluent-dark.css +12 -0
  61. package/styles/fluent-lite.css +12 -0
  62. package/styles/fluent.css +12 -0
  63. package/styles/fluent2-lite.css +12 -0
  64. package/styles/fluent2.css +12 -0
  65. package/styles/highcontrast-light-lite.css +12 -0
  66. package/styles/highcontrast-light.css +12 -0
  67. package/styles/highcontrast-lite.css +12 -0
  68. package/styles/highcontrast.css +12 -0
  69. package/styles/list-box/_bds-definition.scss +1 -0
  70. package/styles/list-box/_bootstrap-dark-definition.scss +1 -0
  71. package/styles/list-box/_bootstrap-definition.scss +1 -0
  72. package/styles/list-box/_bootstrap4-definition.scss +1 -0
  73. package/styles/list-box/_bootstrap5-definition.scss +1 -0
  74. package/styles/list-box/_bootstrap5.3-definition.scss +1 -0
  75. package/styles/list-box/_fabric-dark-definition.scss +1 -0
  76. package/styles/list-box/_fabric-definition.scss +1 -0
  77. package/styles/list-box/_fluent-definition.scss +1 -0
  78. package/styles/list-box/_fluent2-definition.scss +1 -0
  79. package/styles/list-box/_fusionnew-definition.scss +1 -0
  80. package/styles/list-box/_highcontrast-definition.scss +1 -0
  81. package/styles/list-box/_highcontrast-light-definition.scss +1 -0
  82. package/styles/list-box/_layout.scss +8 -0
  83. package/styles/list-box/_material-dark-definition.scss +1 -0
  84. package/styles/list-box/_material-definition.scss +1 -0
  85. package/styles/list-box/_material3-definition.scss +1 -0
  86. package/styles/list-box/_tailwind-definition.scss +1 -0
  87. package/styles/list-box/_tailwind3-definition.scss +1 -0
  88. package/styles/list-box/bds.css +9 -0
  89. package/styles/list-box/bootstrap-dark.css +9 -0
  90. package/styles/list-box/bootstrap.css +9 -0
  91. package/styles/list-box/bootstrap4.css +9 -0
  92. package/styles/list-box/bootstrap5-dark.css +9 -0
  93. package/styles/list-box/bootstrap5.3.css +9 -0
  94. package/styles/list-box/bootstrap5.css +9 -0
  95. package/styles/list-box/fabric-dark.css +9 -0
  96. package/styles/list-box/fabric.css +9 -0
  97. package/styles/list-box/fluent-dark.css +9 -0
  98. package/styles/list-box/fluent.css +9 -0
  99. package/styles/list-box/fluent2.css +9 -0
  100. package/styles/list-box/highcontrast-light.css +9 -0
  101. package/styles/list-box/highcontrast.css +9 -0
  102. package/styles/list-box/material-dark.css +9 -0
  103. package/styles/list-box/material.css +9 -0
  104. package/styles/list-box/material3-dark.css +9 -0
  105. package/styles/list-box/material3.css +9 -0
  106. package/styles/list-box/tailwind-dark.css +9 -0
  107. package/styles/list-box/tailwind.css +9 -0
  108. package/styles/list-box/tailwind3.css +9 -0
  109. package/styles/material-dark-lite.css +12 -0
  110. package/styles/material-dark.css +12 -0
  111. package/styles/material-lite.css +12 -0
  112. package/styles/material.css +12 -0
  113. package/styles/material3-dark-lite.css +12 -0
  114. package/styles/material3-dark.css +12 -0
  115. package/styles/material3-lite.css +12 -0
  116. package/styles/material3.css +12 -0
  117. package/styles/tailwind-dark-lite.css +12 -0
  118. package/styles/tailwind-dark.css +12 -0
  119. package/styles/tailwind-lite.css +12 -0
  120. package/styles/tailwind.css +12 -0
  121. package/styles/tailwind3-lite.css +12 -0
  122. package/styles/tailwind3.css +12 -0
@@ -1718,6 +1718,86 @@ let DropDownBase = class DropDownBase extends Component {
1718
1718
  this.fiteredGroupHeaderItems = clonedHeaders;
1719
1719
  }
1720
1720
  }
1721
+ setCustomListData(dataSource, fields, query, event) {
1722
+ fields = fields ? fields : this.fields;
1723
+ let ulElement;
1724
+ this.isActive = true;
1725
+ this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
1726
+ if (!this.isRequesting) {
1727
+ this.isRequesting = true;
1728
+ this.showSpinner();
1729
+ this.isRequesting = false;
1730
+ let isReOrder = true;
1731
+ let listItems;
1732
+ if (this.isVirtualizationEnabled && !this.virtualGroupDataSource && this.fields.groupBy) {
1733
+ const data = new DataManager(this.dataSource).executeLocal(new Query().group(this.fields.groupBy));
1734
+ this.virtualGroupDataSource = data.records;
1735
+ }
1736
+ const dataManager = this.isVirtualizationEnabled &&
1737
+ this.virtualGroupDataSource
1738
+ && !this.isCustomDataUpdated ? new DataManager(this.virtualGroupDataSource) :
1739
+ new DataManager(dataSource);
1740
+ listItems = (this.getQuery(query)).executeLocal(dataManager);
1741
+ if (!this.virtualSelectAll) {
1742
+ const newQuery = this.getQuery(query);
1743
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1744
+ if (this.isVirtualizationEnabled && (listItems.count !== 0 &&
1745
+ listItems.count < (this.itemCount * 2)) && !this.appendUncheckList) {
1746
+ if (newQuery) {
1747
+ for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
1748
+ if (newQuery.queries[queryElements].fn === 'onTake') {
1749
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1750
+ newQuery.queries[queryElements].e.nos = listItems.count;
1751
+ listItems = (newQuery).executeLocal(dataManager);
1752
+ }
1753
+ if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !this.isCustomFiltering) {
1754
+ isReOrder = false;
1755
+ }
1756
+ }
1757
+ if (isReOrder) {
1758
+ listItems = (newQuery).executeLocal(dataManager);
1759
+ this.isVirtualTrackHeight = (!(this.dataSource instanceof DataManager) &&
1760
+ !this.isCustomDataUpdated) ? true : false;
1761
+ }
1762
+ }
1763
+ }
1764
+ else {
1765
+ this.isVirtualTrackHeight = false;
1766
+ if (newQuery) {
1767
+ for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
1768
+ if (this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
1769
+ isReOrder = false;
1770
+ }
1771
+ }
1772
+ }
1773
+ }
1774
+ }
1775
+ if (isReOrder && (!(this.dataSource instanceof DataManager) && !this.isCustomDataUpdated) &&
1776
+ !this.virtualSelectAll) {
1777
+ // eslint-disable @typescript-eslint/no-explicit-any
1778
+ this.dataCount = this.totalItemCount = this.virtualSelectAll ? listItems.length :
1779
+ listItems.count;
1780
+ }
1781
+ listItems = this.isVirtualizationEnabled ? listItems.result : listItems;
1782
+ this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
1783
+ this.isCustomFiltering = false;
1784
+ if (this.isIncrementalRequest) {
1785
+ ulElement = this.renderItems(listItems, fields);
1786
+ return;
1787
+ }
1788
+ ulElement = this.renderItems(listItems, fields);
1789
+ this.onActionComplete(ulElement, listItems, event);
1790
+ if (this.groupTemplate) {
1791
+ this.renderGroupTemplate(ulElement);
1792
+ }
1793
+ this.bindChildItems(listItems, ulElement, fields);
1794
+ setTimeout(() => {
1795
+ if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
1796
+ this.updateDataList();
1797
+ }
1798
+ });
1799
+ }
1800
+ }
1721
1801
  handleVirtualKeyboardActions(e, pageCount) {
1722
1802
  // Used this method in component side.
1723
1803
  }
@@ -2436,7 +2516,12 @@ let DropDownBase = class DropDownBase extends Component {
2436
2516
  }
2437
2517
  dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
2438
2518
  this.addedNewItem = false;
2439
- this.setListData(dataSource, fields, query, e);
2519
+ if (this.isCustomReset && this.getModuleName() === 'multiselect') {
2520
+ this.setCustomListData(dataSource, fields, query, e);
2521
+ }
2522
+ else {
2523
+ this.setListData(dataSource, fields, query, e);
2524
+ }
2440
2525
  }
2441
2526
  }
2442
2527
  updateSelectElementData(isFiltering) {
@@ -4504,6 +4589,9 @@ let DropDownList = class DropDownList extends DropDownBase {
4504
4589
  }
4505
4590
  if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
4506
4591
  this.activeIndex = this.getIndexByValueFilter(dataItem.value, this.actionCompleteData.ulElement);
4592
+ if (isNullOrUndefined(this.activeIndex)) {
4593
+ this.activeIndex = this.getIndexByValue(dataItem.value);
4594
+ }
4507
4595
  }
4508
4596
  const clearIcon = dropDownListClasses.clearIcon;
4509
4597
  const isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
@@ -13824,6 +13912,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13824
13912
  checkForCustomValue(query, fields) {
13825
13913
  const dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
13826
13914
  const field = fields ? fields : this.fields;
13915
+ this.isCustomReset = true;
13827
13916
  if (this.allowCustomValue && dataChecks) {
13828
13917
  const value = this.inputElement.value;
13829
13918
  const customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
@@ -13877,6 +13966,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13877
13966
  const tempData = JSON.parse(JSON.stringify(this.listData));
13878
13967
  tempData.splice(0, 0, dataItem);
13879
13968
  this.resetList(tempData, field, query);
13969
+ this.focusAtLastListItem(value);
13880
13970
  }
13881
13971
  }
13882
13972
  else if (this.listData) {
@@ -13905,6 +13995,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13905
13995
  }
13906
13996
  }
13907
13997
  }
13998
+ this.isCustomReset = false;
13908
13999
  if (this.value && this.value.length) {
13909
14000
  this.refreshSelection();
13910
14001
  }
@@ -15170,11 +15261,20 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15170
15261
  }
15171
15262
  removeChipSelection() {
15172
15263
  if (this.chipCollectionWrapper) {
15264
+ const selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);
15265
+ if (selectedChips && selectedChips.length > 0) {
15266
+ for (let i = 0; i < selectedChips.length; i++) {
15267
+ selectedChips[i].removeAttribute('aria-live');
15268
+ }
15269
+ }
15173
15270
  this.removeChipFocus();
15174
15271
  }
15175
15272
  }
15176
15273
  addChipSelection(element, e) {
15177
15274
  addClass([element], CHIP_SELECTED);
15275
+ if (element) {
15276
+ element.setAttribute('aria-live', 'polite');
15277
+ }
15178
15278
  this.trigger('chipSelection', e);
15179
15279
  }
15180
15280
  getVirtualDataByValue(value) {
@@ -15372,6 +15472,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15372
15472
  const collection = this.list.querySelectorAll('li.'
15373
15473
  + dropDownBaseClasses.li + ':not(.e-active)');
15374
15474
  removeClass(collection, 'e-disable');
15475
+ const mainListCollection = this.mainList.querySelectorAll('li.'
15476
+ + dropDownBaseClasses.li + ':not(.e-active)');
15477
+ removeClass(mainListCollection, 'e-disable');
15375
15478
  }
15376
15479
  this.trigger('removed', eventArgs);
15377
15480
  const targetEle = eve && eve.currentTarget;
@@ -15666,7 +15769,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15666
15769
  let itemData = { text: value, value: value };
15667
15770
  const chip = this.createElement('span', {
15668
15771
  className: CHIP$1,
15669
- attrs: { 'data-value': value, 'title': data }
15772
+ attrs: { 'data-value': value, 'title': data, 'role': 'option', 'aria-selected': 'true' }
15670
15773
  });
15671
15774
  let compiledString;
15672
15775
  const chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });
@@ -18528,6 +18631,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
18528
18631
  else {
18529
18632
  this.setProperties({ value: null }, true);
18530
18633
  }
18634
+ this.checkAndResetCache();
18635
+ if (this.enableVirtualization) {
18636
+ this.updateInitialData();
18637
+ if (this.chipCollectionWrapper) {
18638
+ this.chipCollectionWrapper.innerHTML = '';
18639
+ }
18640
+ if (!this.isCustomDataUpdated) {
18641
+ this.notify('setGeneratedData', {
18642
+ module: 'VirtualScroll'
18643
+ });
18644
+ }
18645
+ this.list.scrollTop = 0;
18646
+ this.virtualListInfo = null;
18647
+ this.previousStartIndex = 0;
18648
+ this.previousEndIndex = this.itemCount;
18649
+ }
18531
18650
  }
18532
18651
  /**
18533
18652
  * To Initialize the control rendering
@@ -20089,6 +20208,22 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
20089
20208
  this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
20090
20209
  this.popupWrapper = this.list;
20091
20210
  this.checkBoxSelectionModule.checkAllParent = null;
20211
+ if (this.filterParent) {
20212
+ const parentNode = this.filterParent.parentNode;
20213
+ if (parentNode) {
20214
+ const firstChild = this.filterParent.querySelector('input.e-input-filter');
20215
+ if (!firstChild.classList.contains('e-input-focus') && !firstChild.classList.contains('e-valid-input')
20216
+ && this.selectedListItemCount === 0) {
20217
+ this.filterParent = null;
20218
+ }
20219
+ if (this.selectedListItemCount > 0 && this.showSelectAll) {
20220
+ this.filterParent = null;
20221
+ }
20222
+ }
20223
+ else {
20224
+ this.filterParent = null;
20225
+ }
20226
+ }
20092
20227
  this.notify('selectAll', {});
20093
20228
  }
20094
20229
  }
@@ -20196,7 +20331,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
20196
20331
  setHeight() {
20197
20332
  const ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
20198
20333
  ele.style.height = formatUnit(this.height);
20199
- if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {
20334
+ if (this.allowFiltering && this.height.toString().indexOf('%') > 0) {
20200
20335
  addClass([this.list], 'e-filter-list');
20201
20336
  }
20202
20337
  else {
@@ -20284,6 +20419,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
20284
20419
  }
20285
20420
  }
20286
20421
  super.onActionComplete(ulElement, list, e);
20422
+ this.initWrapper();
20287
20423
  if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
20288
20424
  this.list.insertBefore(searchEle, this.list.firstElementChild);
20289
20425
  this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
@@ -20302,7 +20438,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
20302
20438
  });
20303
20439
  }
20304
20440
  }
20305
- this.initWrapper();
20306
20441
  this.setSelection(this.value, true, false, !this.isRendered);
20307
20442
  this.initDraggable();
20308
20443
  this.mainList = this.ulElement;
@@ -21106,6 +21241,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
21106
21241
  }
21107
21242
  }
21108
21243
  const len = this.getSelectedItems().length;
21244
+ this.selectedListItemCount = len;
21109
21245
  if (this.showSelectAll && searchCount) {
21110
21246
  this.notify('checkSelectAll', { module: 'CheckBoxSelection',
21111
21247
  value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate' });
@@ -21914,7 +22050,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
21914
22050
  e.preventDefault();
21915
22051
  return;
21916
22052
  }
21917
- const char = String.fromCharCode(e.keyCode);
22053
+ const char = e.code && e.keyCode >= 96 && e.keyCode <= 105 ?
22054
+ String.fromCharCode(e.keyCode - 48) : String.fromCharCode(e.keyCode);
21918
22055
  const isWordCharacter = char.match(/\w/);
21919
22056
  const isWordAccentCharacter = char.match(/[A-Za-z0-9\u00C0-\u024F ]/);
21920
22057
  if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter)) {