@syncfusion/ej2-dropdowns 28.1.37 → 28.1.39

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 (85) hide show
  1. package/README.md +1 -1
  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 +63 -8
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +64 -8
  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 +11 -7
  13. package/src/combo-box/combo-box.js +2 -2
  14. package/src/drop-down-base/drop-down-base.js +14 -2
  15. package/src/drop-down-list/drop-down-list.d.ts +1 -0
  16. package/src/drop-down-list/drop-down-list.js +12 -2
  17. package/src/drop-down-tree/drop-down-tree.js +3 -0
  18. package/src/list-box/list-box.js +1 -1
  19. package/src/mention/mention.js +3 -1
  20. package/src/multi-select/multi-select.d.ts +2 -0
  21. package/src/multi-select/multi-select.js +29 -0
  22. package/styles/bds-lite.css +8 -0
  23. package/styles/bds.css +8 -0
  24. package/styles/bootstrap-dark-lite.css +8 -0
  25. package/styles/bootstrap-dark.css +8 -0
  26. package/styles/bootstrap-lite.css +8 -0
  27. package/styles/bootstrap.css +8 -0
  28. package/styles/bootstrap4-lite.css +8 -0
  29. package/styles/bootstrap4.css +8 -0
  30. package/styles/bootstrap5-dark-lite.css +8 -0
  31. package/styles/bootstrap5-dark.css +8 -0
  32. package/styles/bootstrap5-lite.css +8 -0
  33. package/styles/bootstrap5.3-lite.css +8 -0
  34. package/styles/bootstrap5.3.css +8 -0
  35. package/styles/bootstrap5.css +8 -0
  36. package/styles/drop-down-list/_layout.scss +8 -0
  37. package/styles/drop-down-list/bds.css +8 -0
  38. package/styles/drop-down-list/bootstrap-dark.css +8 -0
  39. package/styles/drop-down-list/bootstrap.css +8 -0
  40. package/styles/drop-down-list/bootstrap4.css +8 -0
  41. package/styles/drop-down-list/bootstrap5-dark.css +8 -0
  42. package/styles/drop-down-list/bootstrap5.3.css +8 -0
  43. package/styles/drop-down-list/bootstrap5.css +8 -0
  44. package/styles/drop-down-list/fabric-dark.css +8 -0
  45. package/styles/drop-down-list/fabric.css +8 -0
  46. package/styles/drop-down-list/fluent-dark.css +8 -0
  47. package/styles/drop-down-list/fluent.css +8 -0
  48. package/styles/drop-down-list/fluent2.css +8 -0
  49. package/styles/drop-down-list/highcontrast-light.css +8 -0
  50. package/styles/drop-down-list/highcontrast.css +8 -0
  51. package/styles/drop-down-list/material-dark.css +8 -0
  52. package/styles/drop-down-list/material.css +8 -0
  53. package/styles/drop-down-list/material3-dark.css +8 -0
  54. package/styles/drop-down-list/material3.css +8 -0
  55. package/styles/drop-down-list/tailwind-dark.css +8 -0
  56. package/styles/drop-down-list/tailwind.css +8 -0
  57. package/styles/drop-down-list/tailwind3.css +8 -0
  58. package/styles/fabric-dark-lite.css +8 -0
  59. package/styles/fabric-dark.css +8 -0
  60. package/styles/fabric-lite.css +8 -0
  61. package/styles/fabric.css +8 -0
  62. package/styles/fluent-dark-lite.css +8 -0
  63. package/styles/fluent-dark.css +8 -0
  64. package/styles/fluent-lite.css +8 -0
  65. package/styles/fluent.css +8 -0
  66. package/styles/fluent2-lite.css +8 -0
  67. package/styles/fluent2.css +8 -0
  68. package/styles/highcontrast-light-lite.css +8 -0
  69. package/styles/highcontrast-light.css +8 -0
  70. package/styles/highcontrast-lite.css +8 -0
  71. package/styles/highcontrast.css +8 -0
  72. package/styles/material-dark-lite.css +8 -0
  73. package/styles/material-dark.css +8 -0
  74. package/styles/material-lite.css +8 -0
  75. package/styles/material.css +8 -0
  76. package/styles/material3-dark-lite.css +8 -0
  77. package/styles/material3-dark.css +8 -0
  78. package/styles/material3-lite.css +8 -0
  79. package/styles/material3.css +8 -0
  80. package/styles/tailwind-dark-lite.css +8 -0
  81. package/styles/tailwind-dark.css +8 -0
  82. package/styles/tailwind-lite.css +8 -0
  83. package/styles/tailwind.css +8 -0
  84. package/styles/tailwind3-lite.css +8 -0
  85. package/styles/tailwind3.css +8 -0
@@ -1861,7 +1861,17 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1861
1861
  var liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);
1862
1862
  for (var index = 0; index < liCollections.length; index++) {
1863
1863
  if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.disabled]) {
1864
- this.disableListItem(liCollections[index]);
1864
+ if (!isNullOrUndefined(this.fields.groupBy)) {
1865
+ var item = this.listData[index];
1866
+ var value = getValue((this.fields.value ? this.fields.value : 'value'), item);
1867
+ var li = listElement.querySelector('li[data-value="' + value + '"]');
1868
+ if (!isNullOrUndefined(li)) {
1869
+ this.disableListItem(li);
1870
+ }
1871
+ }
1872
+ else {
1873
+ this.disableListItem(liCollections[index]);
1874
+ }
1865
1875
  }
1866
1876
  }
1867
1877
  }
@@ -2002,8 +2012,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
2002
2012
  DropDownBase.prototype.scrollStop = function (e, isDownkey) {
2003
2013
  var target = !isNullOrUndefined(e) ? e.target : this.list;
2004
2014
  var computedHeight = getComputedStyle(this.getValidLi(), null).getPropertyValue('height');
2015
+ var computedMarginValue = getComputedStyle(this.getValidLi(), null).getPropertyValue('margin-bottom');
2016
+ var marginValue = parseInt(computedMarginValue, 10);
2005
2017
  var liHeight = this.getModuleName() === 'multiselect' ? parseFloat(computedHeight) : parseInt(computedHeight, 10);
2006
- var topIndex = Math.round(target.scrollTop / liHeight);
2018
+ var topIndex = Math.round(target.scrollTop / (liHeight + marginValue));
2007
2019
  var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
2008
2020
  var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
2009
2021
  for (var i = topIndex; i > -1; i--) {
@@ -2923,6 +2935,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2923
2935
  _this.autoFill = false;
2924
2936
  _this.isUpdateHeaderHeight = false;
2925
2937
  _this.isUpdateFooterHeight = false;
2938
+ _this.isReactTemplateUpdate = false;
2926
2939
  return _this;
2927
2940
  }
2928
2941
  /**
@@ -4293,6 +4306,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4293
4306
  setTimeout(function () {
4294
4307
  proxy_1.cloneElements();
4295
4308
  proxy_1.isSecondClick = true;
4309
+ proxy_1.isSecondClick = proxy_1.isReact && proxy_1.isFiltering() && proxy_1.dataSource instanceof DataManager && !proxy_1.list.querySelector('ul') ? false : true;
4296
4310
  }, duration);
4297
4311
  }
4298
4312
  }
@@ -5132,6 +5146,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5132
5146
  if (this.getInitialData) {
5133
5147
  this.updateActionCompleteDataValues(ulElement, list);
5134
5148
  this.getInitialData = false;
5149
+ this.isReactTemplateUpdate = true;
5135
5150
  this.searchLists(this.filterArgs);
5136
5151
  return;
5137
5152
  }
@@ -5567,6 +5582,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5567
5582
  addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
5568
5583
  }
5569
5584
  _this.renderReactTemplates();
5585
+ if (_this.isReact && _this.isFiltering() && _this.dataSource instanceof DataManager && _this.list.querySelector('ul') && !_this.isSecondClick) {
5586
+ _this.executeCloneElements();
5587
+ }
5570
5588
  if (!isNullOrUndefined(_this.popupObj)) {
5571
5589
  _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
5572
5590
  }
@@ -5593,7 +5611,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5593
5611
  _this.destroyPopup();
5594
5612
  }
5595
5613
  });
5596
- if (_this.allowResize) {
5614
+ if (_this.allowResize && (_this.getModuleName() !== 'dropdownlist' || !(Browser.isDevice && _this.isDeviceFullScreen && _this.allowFiltering))) {
5597
5615
  var resizePaddingBottom = 16;
5598
5616
  // Create the resizer div
5599
5617
  _this.resizer = _this.createElement('div', {
@@ -5664,6 +5682,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5664
5682
  _this.destroyPopup();
5665
5683
  if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list.length > 0) {
5666
5684
  _this.isActive = true;
5685
+ if (_this.isReactTemplateUpdate && _this.isReact && _this.itemTemplate && !_this.enableVirtualization) {
5686
+ _this.actionCompleteData.ulElement = _this.renderItems(_this.actionCompleteData.list, _this.fields);
5687
+ _this.isReactTemplateUpdate = false;
5688
+ }
5667
5689
  if (_this.enableVirtualization) {
5668
5690
  _this.onActionComplete(_this.ulElement, _this.listData, null, true);
5669
5691
  }
@@ -6974,7 +6996,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
6974
6996
  if (isSelectVal && this.enableVirtualization && this.selectedLI.classList) {
6975
6997
  isSelectVal = this.selectedLI.classList.contains('e-active');
6976
6998
  }
6977
- if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
6999
+ if (this.inputElement && this.inputElement.value === '' && !this.isInteracted && (this.isSelectCustom ||
6978
7000
  isSelectVal && this.inputElement.value !== dataItem.text)) {
6979
7001
  this.isSelectCustom = false;
6980
7002
  this.clearAll(e);
@@ -7802,6 +7824,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
7802
7824
  }
7803
7825
  _this.treeObj.fields = _this.getTreeFields(fields);
7804
7826
  _this.treeObj.dataBind();
7827
+ if (_this.popupObj) {
7828
+ _this.popupObj.refreshPosition();
7829
+ }
7805
7830
  if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
7806
7831
  for (var i = 0; i < _this.treeObj.portals.length; i++) {
7807
7832
  if (_this.portals.indexOf(_this.treeObj.portals[i]) === -1) {
@@ -11495,7 +11520,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
11495
11520
  this.onChangeEvent(e);
11496
11521
  }
11497
11522
  }
11498
- if (e.action === 'enter' && this.inputElement.value.trim() === '') {
11523
+ if (e.action === 'enter' && this.inputElement.value === '') {
11499
11524
  this.clearAll(e);
11500
11525
  }
11501
11526
  else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {
@@ -11541,7 +11566,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
11541
11566
  this.onChangeEvent(null);
11542
11567
  }
11543
11568
  }
11544
- else if (this.inputElement.value.trim() !== '') {
11569
+ else if (this.inputElement.value !== '') {
11545
11570
  var previousValue_1 = this.value;
11546
11571
  if (isNullOrUndefined(value)) {
11547
11572
  var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;
@@ -12722,6 +12747,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12722
12747
  _this.storedSelectAllHeight = 0;
12723
12748
  _this.isUpdateHeaderHeight = false;
12724
12749
  _this.isUpdateFooterHeight = false;
12750
+ _this.isBlurDispatching = false;
12751
+ _this.isFilterPrevented = false;
12725
12752
  _this.isValidKey = false;
12726
12753
  _this.selectAllEventData = [];
12727
12754
  _this.selectAllEventEle = [];
@@ -13180,10 +13207,24 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13180
13207
  };
13181
13208
  /* eslint-disable @typescript-eslint/no-unused-vars */
13182
13209
  MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
13210
+ var _this = this;
13183
13211
  if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
13184
13212
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
13185
13213
  this.totalItemCount = e.count;
13186
13214
  }
13215
+ if (this.value && list && list.length > 0 && this.allowFiltering && this.mode !== 'CheckBox' && !this.enableVirtualization && !this.isFilterPrevented && !this.allowCustomValue) {
13216
+ var allItemsInValue = list.every(function (item) {
13217
+ var itemValue = getValue((_this.fields.value) ? _this.fields.value : '', item);
13218
+ return _this.value.some(function (val) {
13219
+ var value = _this.allowObjectBinding ? getValue((_this.fields.value) ? _this.fields.value : '', val) : val;
13220
+ return itemValue === value;
13221
+ });
13222
+ });
13223
+ if (allItemsInValue) {
13224
+ ulElement.innerHTML = '';
13225
+ list = [];
13226
+ }
13227
+ }
13187
13228
  /* eslint-enable @typescript-eslint/no-unused-vars */
13188
13229
  _super.prototype.onActionComplete.call(this, ulElement, list, e);
13189
13230
  this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&
@@ -13832,6 +13873,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13832
13873
  };
13833
13874
  MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {
13834
13875
  var target;
13876
+ if (this.isBlurDispatching && this.isAngular) {
13877
+ this.isBlurDispatching = false;
13878
+ return;
13879
+ }
13835
13880
  if (!isNullOrUndefined(eve)) {
13836
13881
  target = eve.relatedTarget;
13837
13882
  }
@@ -13914,6 +13959,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13914
13959
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
13915
13960
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
13916
13961
  }
13962
+ this.isBlurDispatching = true;
13963
+ if (this.isAngular) {
13964
+ this.dispatchEvent(this.inputElement, 'blur');
13965
+ }
13917
13966
  };
13918
13967
  MultiSelect.prototype.calculateWidth = function () {
13919
13968
  var elementWidth;
@@ -15563,6 +15612,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15563
15612
  if (!this.list) {
15564
15613
  _super.prototype.render.call(this);
15565
15614
  }
15615
+ if (this.popupObj && document.body.contains(this.popupObj.element) && this.allowFiltering) {
15616
+ this.refreshPopup();
15617
+ return;
15618
+ }
15566
15619
  if (!this.popupObj) {
15567
15620
  if (!isNullOrUndefined(this.popupWrapper)) {
15568
15621
  document.body.appendChild(this.popupWrapper);
@@ -16056,6 +16109,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
16056
16109
  cancel: false
16057
16110
  };
16058
16111
  this.trigger('filtering', eventArgs_1, function (eventArgs) {
16112
+ _this.isFilterPrevented = eventArgs.cancel;
16059
16113
  if (!eventArgs.cancel) {
16060
16114
  if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
16061
16115
  _this.filterAction = true;
@@ -21662,7 +21716,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
21662
21716
  };
21663
21717
  ListBox.prototype.KeyUp = function (e) {
21664
21718
  var _this = this;
21665
- if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
21719
+ if (this.allowFiltering && ((e.ctrlKey && e.keyCode === 65) || (e.keyCode === 8 && !this.filterInput.value))) {
21666
21720
  e.preventDefault();
21667
21721
  return;
21668
21722
  }
@@ -22423,7 +22477,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22423
22477
  ? document.querySelector(this.target)
22424
22478
  : this.target) : this.element;
22425
22479
  if (this.isContentEditable(this.inputElement)) {
22426
- this.inputElement.setAttribute('contenteditable', 'true');
22480
+ if (!this.inputElement.hasAttribute('contenteditable')) {
22481
+ this.inputElement.setAttribute('contenteditable', 'true');
22482
+ }
22427
22483
  addClass([this.inputElement], ['e-mention']);
22428
22484
  if (isNullOrUndefined(this.target)) {
22429
22485
  addClass([this.inputElement], ['e-editable-element']);