@syncfusion/ej2-dropdowns 28.1.38 → 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 (83) hide show
  1. package/dist/ej2-dropdowns.min.js +2 -2
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +48 -6
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +49 -6
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +7 -7
  12. package/src/combo-box/combo-box.js +2 -2
  13. package/src/drop-down-base/drop-down-base.js +3 -1
  14. package/src/drop-down-list/drop-down-list.d.ts +1 -0
  15. package/src/drop-down-list/drop-down-list.js +11 -1
  16. package/src/list-box/list-box.js +1 -1
  17. package/src/mention/mention.js +3 -1
  18. package/src/multi-select/multi-select.d.ts +2 -0
  19. package/src/multi-select/multi-select.js +29 -0
  20. package/styles/bds-lite.css +8 -0
  21. package/styles/bds.css +8 -0
  22. package/styles/bootstrap-dark-lite.css +8 -0
  23. package/styles/bootstrap-dark.css +8 -0
  24. package/styles/bootstrap-lite.css +8 -0
  25. package/styles/bootstrap.css +8 -0
  26. package/styles/bootstrap4-lite.css +8 -0
  27. package/styles/bootstrap4.css +8 -0
  28. package/styles/bootstrap5-dark-lite.css +8 -0
  29. package/styles/bootstrap5-dark.css +8 -0
  30. package/styles/bootstrap5-lite.css +8 -0
  31. package/styles/bootstrap5.3-lite.css +8 -0
  32. package/styles/bootstrap5.3.css +8 -0
  33. package/styles/bootstrap5.css +8 -0
  34. package/styles/drop-down-list/_layout.scss +8 -0
  35. package/styles/drop-down-list/bds.css +8 -0
  36. package/styles/drop-down-list/bootstrap-dark.css +8 -0
  37. package/styles/drop-down-list/bootstrap.css +8 -0
  38. package/styles/drop-down-list/bootstrap4.css +8 -0
  39. package/styles/drop-down-list/bootstrap5-dark.css +8 -0
  40. package/styles/drop-down-list/bootstrap5.3.css +8 -0
  41. package/styles/drop-down-list/bootstrap5.css +8 -0
  42. package/styles/drop-down-list/fabric-dark.css +8 -0
  43. package/styles/drop-down-list/fabric.css +8 -0
  44. package/styles/drop-down-list/fluent-dark.css +8 -0
  45. package/styles/drop-down-list/fluent.css +8 -0
  46. package/styles/drop-down-list/fluent2.css +8 -0
  47. package/styles/drop-down-list/highcontrast-light.css +8 -0
  48. package/styles/drop-down-list/highcontrast.css +8 -0
  49. package/styles/drop-down-list/material-dark.css +8 -0
  50. package/styles/drop-down-list/material.css +8 -0
  51. package/styles/drop-down-list/material3-dark.css +8 -0
  52. package/styles/drop-down-list/material3.css +8 -0
  53. package/styles/drop-down-list/tailwind-dark.css +8 -0
  54. package/styles/drop-down-list/tailwind.css +8 -0
  55. package/styles/drop-down-list/tailwind3.css +8 -0
  56. package/styles/fabric-dark-lite.css +8 -0
  57. package/styles/fabric-dark.css +8 -0
  58. package/styles/fabric-lite.css +8 -0
  59. package/styles/fabric.css +8 -0
  60. package/styles/fluent-dark-lite.css +8 -0
  61. package/styles/fluent-dark.css +8 -0
  62. package/styles/fluent-lite.css +8 -0
  63. package/styles/fluent.css +8 -0
  64. package/styles/fluent2-lite.css +8 -0
  65. package/styles/fluent2.css +8 -0
  66. package/styles/highcontrast-light-lite.css +8 -0
  67. package/styles/highcontrast-light.css +8 -0
  68. package/styles/highcontrast-lite.css +8 -0
  69. package/styles/highcontrast.css +8 -0
  70. package/styles/material-dark-lite.css +8 -0
  71. package/styles/material-dark.css +8 -0
  72. package/styles/material-lite.css +8 -0
  73. package/styles/material.css +8 -0
  74. package/styles/material3-dark-lite.css +8 -0
  75. package/styles/material3-dark.css +8 -0
  76. package/styles/material3-lite.css +8 -0
  77. package/styles/material3.css +8 -0
  78. package/styles/tailwind-dark-lite.css +8 -0
  79. package/styles/tailwind-dark.css +8 -0
  80. package/styles/tailwind-lite.css +8 -0
  81. package/styles/tailwind.css +8 -0
  82. package/styles/tailwind3-lite.css +8 -0
  83. package/styles/tailwind3.css +8 -0
@@ -2012,8 +2012,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
2012
2012
  DropDownBase.prototype.scrollStop = function (e, isDownkey) {
2013
2013
  var target = !isNullOrUndefined(e) ? e.target : this.list;
2014
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);
2015
2017
  var liHeight = this.getModuleName() === 'multiselect' ? parseFloat(computedHeight) : parseInt(computedHeight, 10);
2016
- var topIndex = Math.round(target.scrollTop / liHeight);
2018
+ var topIndex = Math.round(target.scrollTop / (liHeight + marginValue));
2017
2019
  var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
2018
2020
  var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
2019
2021
  for (var i = topIndex; i > -1; i--) {
@@ -2933,6 +2935,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2933
2935
  _this.autoFill = false;
2934
2936
  _this.isUpdateHeaderHeight = false;
2935
2937
  _this.isUpdateFooterHeight = false;
2938
+ _this.isReactTemplateUpdate = false;
2936
2939
  return _this;
2937
2940
  }
2938
2941
  /**
@@ -4303,6 +4306,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4303
4306
  setTimeout(function () {
4304
4307
  proxy_1.cloneElements();
4305
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;
4306
4310
  }, duration);
4307
4311
  }
4308
4312
  }
@@ -5142,6 +5146,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5142
5146
  if (this.getInitialData) {
5143
5147
  this.updateActionCompleteDataValues(ulElement, list);
5144
5148
  this.getInitialData = false;
5149
+ this.isReactTemplateUpdate = true;
5145
5150
  this.searchLists(this.filterArgs);
5146
5151
  return;
5147
5152
  }
@@ -5577,6 +5582,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5577
5582
  addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
5578
5583
  }
5579
5584
  _this.renderReactTemplates();
5585
+ if (_this.isReact && _this.isFiltering() && _this.dataSource instanceof DataManager && _this.list.querySelector('ul') && !_this.isSecondClick) {
5586
+ _this.executeCloneElements();
5587
+ }
5580
5588
  if (!isNullOrUndefined(_this.popupObj)) {
5581
5589
  _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
5582
5590
  }
@@ -5674,6 +5682,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5674
5682
  _this.destroyPopup();
5675
5683
  if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list.length > 0) {
5676
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
+ }
5677
5689
  if (_this.enableVirtualization) {
5678
5690
  _this.onActionComplete(_this.ulElement, _this.listData, null, true);
5679
5691
  }
@@ -6984,7 +6996,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
6984
6996
  if (isSelectVal && this.enableVirtualization && this.selectedLI.classList) {
6985
6997
  isSelectVal = this.selectedLI.classList.contains('e-active');
6986
6998
  }
6987
- if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
6999
+ if (this.inputElement && this.inputElement.value === '' && !this.isInteracted && (this.isSelectCustom ||
6988
7000
  isSelectVal && this.inputElement.value !== dataItem.text)) {
6989
7001
  this.isSelectCustom = false;
6990
7002
  this.clearAll(e);
@@ -11508,7 +11520,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
11508
11520
  this.onChangeEvent(e);
11509
11521
  }
11510
11522
  }
11511
- if (e.action === 'enter' && this.inputElement.value.trim() === '') {
11523
+ if (e.action === 'enter' && this.inputElement.value === '') {
11512
11524
  this.clearAll(e);
11513
11525
  }
11514
11526
  else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {
@@ -11554,7 +11566,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
11554
11566
  this.onChangeEvent(null);
11555
11567
  }
11556
11568
  }
11557
- else if (this.inputElement.value.trim() !== '') {
11569
+ else if (this.inputElement.value !== '') {
11558
11570
  var previousValue_1 = this.value;
11559
11571
  if (isNullOrUndefined(value)) {
11560
11572
  var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;
@@ -12735,6 +12747,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12735
12747
  _this.storedSelectAllHeight = 0;
12736
12748
  _this.isUpdateHeaderHeight = false;
12737
12749
  _this.isUpdateFooterHeight = false;
12750
+ _this.isBlurDispatching = false;
12751
+ _this.isFilterPrevented = false;
12738
12752
  _this.isValidKey = false;
12739
12753
  _this.selectAllEventData = [];
12740
12754
  _this.selectAllEventEle = [];
@@ -13193,10 +13207,24 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13193
13207
  };
13194
13208
  /* eslint-disable @typescript-eslint/no-unused-vars */
13195
13209
  MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
13210
+ var _this = this;
13196
13211
  if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
13197
13212
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
13198
13213
  this.totalItemCount = e.count;
13199
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
+ }
13200
13228
  /* eslint-enable @typescript-eslint/no-unused-vars */
13201
13229
  _super.prototype.onActionComplete.call(this, ulElement, list, e);
13202
13230
  this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&
@@ -13845,6 +13873,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13845
13873
  };
13846
13874
  MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {
13847
13875
  var target;
13876
+ if (this.isBlurDispatching && this.isAngular) {
13877
+ this.isBlurDispatching = false;
13878
+ return;
13879
+ }
13848
13880
  if (!isNullOrUndefined(eve)) {
13849
13881
  target = eve.relatedTarget;
13850
13882
  }
@@ -13927,6 +13959,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13927
13959
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
13928
13960
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
13929
13961
  }
13962
+ this.isBlurDispatching = true;
13963
+ if (this.isAngular) {
13964
+ this.dispatchEvent(this.inputElement, 'blur');
13965
+ }
13930
13966
  };
13931
13967
  MultiSelect.prototype.calculateWidth = function () {
13932
13968
  var elementWidth;
@@ -15576,6 +15612,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15576
15612
  if (!this.list) {
15577
15613
  _super.prototype.render.call(this);
15578
15614
  }
15615
+ if (this.popupObj && document.body.contains(this.popupObj.element) && this.allowFiltering) {
15616
+ this.refreshPopup();
15617
+ return;
15618
+ }
15579
15619
  if (!this.popupObj) {
15580
15620
  if (!isNullOrUndefined(this.popupWrapper)) {
15581
15621
  document.body.appendChild(this.popupWrapper);
@@ -16069,6 +16109,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
16069
16109
  cancel: false
16070
16110
  };
16071
16111
  this.trigger('filtering', eventArgs_1, function (eventArgs) {
16112
+ _this.isFilterPrevented = eventArgs.cancel;
16072
16113
  if (!eventArgs.cancel) {
16073
16114
  if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
16074
16115
  _this.filterAction = true;
@@ -21675,7 +21716,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
21675
21716
  };
21676
21717
  ListBox.prototype.KeyUp = function (e) {
21677
21718
  var _this = this;
21678
- if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
21719
+ if (this.allowFiltering && ((e.ctrlKey && e.keyCode === 65) || (e.keyCode === 8 && !this.filterInput.value))) {
21679
21720
  e.preventDefault();
21680
21721
  return;
21681
21722
  }
@@ -22436,7 +22477,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22436
22477
  ? document.querySelector(this.target)
22437
22478
  : this.target) : this.element;
22438
22479
  if (this.isContentEditable(this.inputElement)) {
22439
- this.inputElement.setAttribute('contenteditable', 'true');
22480
+ if (!this.inputElement.hasAttribute('contenteditable')) {
22481
+ this.inputElement.setAttribute('contenteditable', 'true');
22482
+ }
22440
22483
  addClass([this.inputElement], ['e-mention']);
22441
22484
  if (isNullOrUndefined(this.target)) {
22442
22485
  addClass([this.inputElement], ['e-editable-element']);