@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
@@ -1802,6 +1802,87 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1802
1802
  this.fiteredGroupHeaderItems = clonedHeaders;
1803
1803
  }
1804
1804
  };
1805
+ DropDownBase.prototype.setCustomListData = function (dataSource, fields, query, event) {
1806
+ var _this = this;
1807
+ fields = fields ? fields : this.fields;
1808
+ var ulElement;
1809
+ this.isActive = true;
1810
+ this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
1811
+ if (!this.isRequesting) {
1812
+ this.isRequesting = true;
1813
+ this.showSpinner();
1814
+ this.isRequesting = false;
1815
+ var isReOrder = true;
1816
+ var listItems = void 0;
1817
+ if (this.isVirtualizationEnabled && !this.virtualGroupDataSource && this.fields.groupBy) {
1818
+ var data = new DataManager(this.dataSource).executeLocal(new Query().group(this.fields.groupBy));
1819
+ this.virtualGroupDataSource = data.records;
1820
+ }
1821
+ var dataManager = this.isVirtualizationEnabled &&
1822
+ this.virtualGroupDataSource
1823
+ && !this.isCustomDataUpdated ? new DataManager(this.virtualGroupDataSource) :
1824
+ new DataManager(dataSource);
1825
+ listItems = (this.getQuery(query)).executeLocal(dataManager);
1826
+ if (!this.virtualSelectAll) {
1827
+ var newQuery = this.getQuery(query);
1828
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1829
+ if (this.isVirtualizationEnabled && (listItems.count !== 0 &&
1830
+ listItems.count < (this.itemCount * 2)) && !this.appendUncheckList) {
1831
+ if (newQuery) {
1832
+ for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
1833
+ if (newQuery.queries[queryElements].fn === 'onTake') {
1834
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1835
+ newQuery.queries[queryElements].e.nos = listItems.count;
1836
+ listItems = (newQuery).executeLocal(dataManager);
1837
+ }
1838
+ if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !this.isCustomFiltering) {
1839
+ isReOrder = false;
1840
+ }
1841
+ }
1842
+ if (isReOrder) {
1843
+ listItems = (newQuery).executeLocal(dataManager);
1844
+ this.isVirtualTrackHeight = (!(this.dataSource instanceof DataManager) &&
1845
+ !this.isCustomDataUpdated) ? true : false;
1846
+ }
1847
+ }
1848
+ }
1849
+ else {
1850
+ this.isVirtualTrackHeight = false;
1851
+ if (newQuery) {
1852
+ for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
1853
+ if (this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
1854
+ isReOrder = false;
1855
+ }
1856
+ }
1857
+ }
1858
+ }
1859
+ }
1860
+ if (isReOrder && (!(this.dataSource instanceof DataManager) && !this.isCustomDataUpdated) &&
1861
+ !this.virtualSelectAll) {
1862
+ // eslint-disable @typescript-eslint/no-explicit-any
1863
+ this.dataCount = this.totalItemCount = this.virtualSelectAll ? listItems.length :
1864
+ listItems.count;
1865
+ }
1866
+ listItems = this.isVirtualizationEnabled ? listItems.result : listItems;
1867
+ this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
1868
+ this.isCustomFiltering = false;
1869
+ if (this.isIncrementalRequest) {
1870
+ ulElement = this.renderItems(listItems, fields);
1871
+ return;
1872
+ }
1873
+ ulElement = this.renderItems(listItems, fields);
1874
+ this.onActionComplete(ulElement, listItems, event);
1875
+ if (this.groupTemplate) {
1876
+ this.renderGroupTemplate(ulElement);
1877
+ }
1878
+ this.bindChildItems(listItems, ulElement, fields);
1879
+ setTimeout(function () {
1880
+ 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)))) {
1881
+ _this.updateDataList();
1882
+ }
1883
+ });
1884
+ }
1885
+ };
1805
1886
  DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
1806
1887
  // Used this method in component side.
1807
1888
  };
@@ -2523,7 +2604,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
2523
2604
  }
2524
2605
  dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
2525
2606
  this.addedNewItem = false;
2526
- this.setListData(dataSource, fields, query, e);
2607
+ if (this.isCustomReset && this.getModuleName() === 'multiselect') {
2608
+ this.setCustomListData(dataSource, fields, query, e);
2609
+ }
2610
+ else {
2611
+ this.setListData(dataSource, fields, query, e);
2612
+ }
2527
2613
  }
2528
2614
  };
2529
2615
  DropDownBase.prototype.updateSelectElementData = function (isFiltering) {
@@ -4613,6 +4699,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4613
4699
  }
4614
4700
  if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
4615
4701
  this.activeIndex = this.getIndexByValueFilter(dataItem.value, this.actionCompleteData.ulElement);
4702
+ if (isNullOrUndefined(this.activeIndex)) {
4703
+ this.activeIndex = this.getIndexByValue(dataItem.value);
4704
+ }
4616
4705
  }
4617
4706
  var clearIcon = dropDownListClasses.clearIcon;
4618
4707
  var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
@@ -14079,6 +14168,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14079
14168
  MultiSelect.prototype.checkForCustomValue = function (query, fields) {
14080
14169
  var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
14081
14170
  var field = fields ? fields : this.fields;
14171
+ this.isCustomReset = true;
14082
14172
  if (this.allowCustomValue && dataChecks) {
14083
14173
  var value = this.inputElement.value;
14084
14174
  var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
@@ -14132,6 +14222,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14132
14222
  var tempData = JSON.parse(JSON.stringify(this.listData));
14133
14223
  tempData.splice(0, 0, dataItem_1);
14134
14224
  this.resetList(tempData, field, query);
14225
+ this.focusAtLastListItem(value);
14135
14226
  }
14136
14227
  }
14137
14228
  else if (this.listData) {
@@ -14160,6 +14251,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14160
14251
  }
14161
14252
  }
14162
14253
  }
14254
+ this.isCustomReset = false;
14163
14255
  if (this.value && this.value.length) {
14164
14256
  this.refreshSelection();
14165
14257
  }
@@ -15431,11 +15523,20 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15431
15523
  };
15432
15524
  MultiSelect.prototype.removeChipSelection = function () {
15433
15525
  if (this.chipCollectionWrapper) {
15526
+ var selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);
15527
+ if (selectedChips && selectedChips.length > 0) {
15528
+ for (var i = 0; i < selectedChips.length; i++) {
15529
+ selectedChips[i].removeAttribute('aria-live');
15530
+ }
15531
+ }
15434
15532
  this.removeChipFocus();
15435
15533
  }
15436
15534
  };
15437
15535
  MultiSelect.prototype.addChipSelection = function (element, e) {
15438
15536
  addClass([element], CHIP_SELECTED);
15537
+ if (element) {
15538
+ element.setAttribute('aria-live', 'polite');
15539
+ }
15439
15540
  this.trigger('chipSelection', e);
15440
15541
  };
15441
15542
  MultiSelect.prototype.getVirtualDataByValue = function (value) {
@@ -15636,6 +15737,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15636
15737
  var collection = _this.list.querySelectorAll('li.'
15637
15738
  + dropDownBaseClasses.li + ':not(.e-active)');
15638
15739
  removeClass(collection, 'e-disable');
15740
+ var mainListCollection = _this.mainList.querySelectorAll('li.'
15741
+ + dropDownBaseClasses.li + ':not(.e-active)');
15742
+ removeClass(mainListCollection, 'e-disable');
15639
15743
  }
15640
15744
  _this.trigger('removed', eventArgs);
15641
15745
  var targetEle_1 = eve && eve.currentTarget;
@@ -15937,7 +16041,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15937
16041
  var itemData = { text: value, value: value };
15938
16042
  var chip = this.createElement('span', {
15939
16043
  className: CHIP$1,
15940
- attrs: { 'data-value': value, 'title': data }
16044
+ attrs: { 'data-value': value, 'title': data, 'role': 'option', 'aria-selected': 'true' }
15941
16045
  });
15942
16046
  var compiledString;
15943
16047
  var chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });
@@ -18823,6 +18927,22 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
18823
18927
  else {
18824
18928
  this.setProperties({ value: null }, true);
18825
18929
  }
18930
+ this.checkAndResetCache();
18931
+ if (this.enableVirtualization) {
18932
+ this.updateInitialData();
18933
+ if (this.chipCollectionWrapper) {
18934
+ this.chipCollectionWrapper.innerHTML = '';
18935
+ }
18936
+ if (!this.isCustomDataUpdated) {
18937
+ this.notify('setGeneratedData', {
18938
+ module: 'VirtualScroll'
18939
+ });
18940
+ }
18941
+ this.list.scrollTop = 0;
18942
+ this.virtualListInfo = null;
18943
+ this.previousStartIndex = 0;
18944
+ this.previousEndIndex = this.itemCount;
18945
+ }
18826
18946
  };
18827
18947
  /**
18828
18948
  * To Initialize the control rendering
@@ -20415,6 +20535,22 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
20415
20535
  this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
20416
20536
  this.popupWrapper = this.list;
20417
20537
  this.checkBoxSelectionModule.checkAllParent = null;
20538
+ if (this.filterParent) {
20539
+ var parentNode = this.filterParent.parentNode;
20540
+ if (parentNode) {
20541
+ var firstChild = this.filterParent.querySelector('input.e-input-filter');
20542
+ if (!firstChild.classList.contains('e-input-focus') && !firstChild.classList.contains('e-valid-input')
20543
+ && this.selectedListItemCount === 0) {
20544
+ this.filterParent = null;
20545
+ }
20546
+ if (this.selectedListItemCount > 0 && this.showSelectAll) {
20547
+ this.filterParent = null;
20548
+ }
20549
+ }
20550
+ else {
20551
+ this.filterParent = null;
20552
+ }
20553
+ }
20418
20554
  this.notify('selectAll', {});
20419
20555
  }
20420
20556
  };
@@ -20524,7 +20660,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
20524
20660
  ListBox.prototype.setHeight = function () {
20525
20661
  var ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
20526
20662
  ele.style.height = formatUnit(this.height);
20527
- if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {
20663
+ if (this.allowFiltering && this.height.toString().indexOf('%') > 0) {
20528
20664
  addClass([this.list], 'e-filter-list');
20529
20665
  }
20530
20666
  else {
@@ -20613,6 +20749,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
20613
20749
  }
20614
20750
  }
20615
20751
  _super.prototype.onActionComplete.call(this, ulElement, list, e);
20752
+ this.initWrapper();
20616
20753
  if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
20617
20754
  this.list.insertBefore(searchEle, this.list.firstElementChild);
20618
20755
  this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
@@ -20631,7 +20768,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
20631
20768
  });
20632
20769
  }
20633
20770
  }
20634
- this.initWrapper();
20635
20771
  this.setSelection(this.value, true, false, !this.isRendered);
20636
20772
  this.initDraggable();
20637
20773
  this.mainList = this.ulElement;
@@ -21452,6 +21588,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
21452
21588
  }
21453
21589
  }
21454
21590
  var len = this.getSelectedItems().length;
21591
+ this.selectedListItemCount = len;
21455
21592
  if (this.showSelectAll && searchCount) {
21456
21593
  this.notify('checkSelectAll', { module: 'CheckBoxSelection',
21457
21594
  value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate' });
@@ -22270,7 +22407,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
22270
22407
  e.preventDefault();
22271
22408
  return;
22272
22409
  }
22273
- var char = String.fromCharCode(e.keyCode);
22410
+ var char = e.code && e.keyCode >= 96 && e.keyCode <= 105 ?
22411
+ String.fromCharCode(e.keyCode - 48) : String.fromCharCode(e.keyCode);
22274
22412
  var isWordCharacter = char.match(/\w/);
22275
22413
  var isWordAccentCharacter = char.match(/[A-Za-z0-9\u00C0-\u024F ]/);
22276
22414
  if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter)) {