@syncfusion/ej2-dropdowns 28.2.11 → 29.1.33

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 (135) 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 +113 -61
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +112 -60
  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 +13 -13
  13. package/src/auto-complete/auto-complete.js +4 -3
  14. package/src/drop-down-list/drop-down-list.js +34 -23
  15. package/src/drop-down-tree/drop-down-tree-model.d.ts +1 -1
  16. package/src/drop-down-tree/drop-down-tree.d.ts +1 -1
  17. package/src/drop-down-tree/drop-down-tree.js +3 -3
  18. package/src/mention/mention-model.d.ts +8 -0
  19. package/src/mention/mention.d.ts +7 -0
  20. package/src/mention/mention.js +27 -7
  21. package/src/multi-select/multi-select.js +44 -24
  22. package/styles/bds-lite.css +7 -0
  23. package/styles/bds.css +7 -0
  24. package/styles/bootstrap-dark-lite.css +11 -4
  25. package/styles/bootstrap-dark.css +11 -4
  26. package/styles/bootstrap-lite.css +7 -0
  27. package/styles/bootstrap.css +7 -0
  28. package/styles/bootstrap4-lite.css +18 -11
  29. package/styles/bootstrap4.css +18 -11
  30. package/styles/bootstrap5-dark-lite.css +38 -31
  31. package/styles/bootstrap5-dark.css +38 -31
  32. package/styles/bootstrap5-lite.css +9 -2
  33. package/styles/bootstrap5.3-lite.css +12 -4
  34. package/styles/bootstrap5.3.css +12 -4
  35. package/styles/bootstrap5.css +9 -2
  36. package/styles/drop-down-base/_bootstrap-dark-definition.scss +3 -1
  37. package/styles/drop-down-base/_bootstrap4-definition.scss +3 -1
  38. package/styles/drop-down-base/bootstrap-dark.css +2 -2
  39. package/styles/drop-down-base/bootstrap4.css +5 -5
  40. package/styles/drop-down-base/bootstrap5-dark.css +13 -13
  41. package/styles/drop-down-base/fabric-dark.css +2 -2
  42. package/styles/drop-down-base/fabric.css +2 -2
  43. package/styles/drop-down-list/_layout.scss +1 -1
  44. package/styles/drop-down-list/bootstrap5-dark.css +2 -2
  45. package/styles/drop-down-tree/_bds-definition.scss +0 -1
  46. package/styles/drop-down-tree/_bigger.scss +5 -0
  47. package/styles/drop-down-tree/_bootstrap4-definition.scss +5 -3
  48. package/styles/drop-down-tree/_layout.scss +5 -1
  49. package/styles/drop-down-tree/_material-definition.scss +4 -2
  50. package/styles/drop-down-tree/bds.css +3 -0
  51. package/styles/drop-down-tree/bootstrap-dark.css +3 -0
  52. package/styles/drop-down-tree/bootstrap.css +3 -0
  53. package/styles/drop-down-tree/bootstrap4.css +4 -1
  54. package/styles/drop-down-tree/bootstrap5-dark.css +9 -6
  55. package/styles/drop-down-tree/bootstrap5.3.css +3 -3
  56. package/styles/drop-down-tree/bootstrap5.css +3 -0
  57. package/styles/drop-down-tree/fabric-dark.css +3 -0
  58. package/styles/drop-down-tree/fabric.css +3 -0
  59. package/styles/drop-down-tree/fluent-dark.css +3 -0
  60. package/styles/drop-down-tree/fluent.css +3 -0
  61. package/styles/drop-down-tree/fluent2.css +9 -0
  62. package/styles/drop-down-tree/highcontrast-light.css +3 -0
  63. package/styles/drop-down-tree/highcontrast.css +3 -0
  64. package/styles/drop-down-tree/material-dark.css +3 -0
  65. package/styles/drop-down-tree/material.css +4 -1
  66. package/styles/drop-down-tree/material3-dark.css +3 -0
  67. package/styles/drop-down-tree/material3.css +3 -0
  68. package/styles/drop-down-tree/tailwind-dark.css +5 -2
  69. package/styles/drop-down-tree/tailwind.css +3 -0
  70. package/styles/drop-down-tree/tailwind3.css +3 -0
  71. package/styles/fabric-dark-lite.css +10 -3
  72. package/styles/fabric-dark.css +10 -3
  73. package/styles/fabric-lite.css +14 -7
  74. package/styles/fabric.css +14 -7
  75. package/styles/fluent-dark-lite.css +7 -0
  76. package/styles/fluent-dark.css +7 -0
  77. package/styles/fluent-lite.css +7 -0
  78. package/styles/fluent.css +7 -0
  79. package/styles/fluent2-lite.css +12 -1
  80. package/styles/fluent2.css +18 -1
  81. package/styles/highcontrast-light-lite.css +7 -0
  82. package/styles/highcontrast-light.css +7 -0
  83. package/styles/highcontrast-lite.css +7 -0
  84. package/styles/highcontrast.css +7 -0
  85. package/styles/list-box/_bootstrap-dark-definition.scss +3 -1
  86. package/styles/list-box/_bootstrap4-definition.scss +3 -1
  87. package/styles/list-box/_layout.scss +7 -3
  88. package/styles/list-box/bootstrap-dark.css +1 -1
  89. package/styles/list-box/bootstrap4.css +1 -1
  90. package/styles/list-box/bootstrap5-dark.css +3 -3
  91. package/styles/list-box/bootstrap5.3.css +5 -1
  92. package/styles/list-box/fabric-dark.css +1 -1
  93. package/styles/list-box/fabric.css +1 -1
  94. package/styles/list-box/fluent2.css +5 -1
  95. package/styles/list-box/tailwind3.css +6 -2
  96. package/styles/material-dark-lite.css +9 -2
  97. package/styles/material-dark.css +9 -2
  98. package/styles/material-lite.css +13 -6
  99. package/styles/material.css +13 -6
  100. package/styles/material3-dark-lite.css +9 -2
  101. package/styles/material3-dark.css +9 -2
  102. package/styles/material3-lite.css +9 -2
  103. package/styles/material3.css +9 -2
  104. package/styles/multi-select/_bootstrap4-definition.scss +5 -3
  105. package/styles/multi-select/_layout.scss +3 -0
  106. package/styles/multi-select/_material-dark-definition.scss +4 -2
  107. package/styles/multi-select/_material-definition.scss +7 -5
  108. package/styles/multi-select/_material3-definition.scss +4 -2
  109. package/styles/multi-select/bds.css +4 -0
  110. package/styles/multi-select/bootstrap-dark.css +5 -1
  111. package/styles/multi-select/bootstrap.css +4 -0
  112. package/styles/multi-select/bootstrap4.css +8 -4
  113. package/styles/multi-select/bootstrap5-dark.css +11 -7
  114. package/styles/multi-select/bootstrap5.3.css +4 -0
  115. package/styles/multi-select/bootstrap5.css +6 -2
  116. package/styles/multi-select/fabric-dark.css +4 -0
  117. package/styles/multi-select/fabric.css +8 -4
  118. package/styles/multi-select/fluent-dark.css +4 -0
  119. package/styles/multi-select/fluent.css +4 -0
  120. package/styles/multi-select/fluent2.css +4 -0
  121. package/styles/multi-select/highcontrast-light.css +4 -0
  122. package/styles/multi-select/highcontrast.css +4 -0
  123. package/styles/multi-select/material-dark.css +6 -2
  124. package/styles/multi-select/material.css +9 -5
  125. package/styles/multi-select/material3-dark.css +6 -2
  126. package/styles/multi-select/material3.css +6 -2
  127. package/styles/multi-select/tailwind-dark.css +4 -0
  128. package/styles/multi-select/tailwind.css +4 -0
  129. package/styles/multi-select/tailwind3.css +4 -0
  130. package/styles/tailwind-dark-lite.css +9 -2
  131. package/styles/tailwind-dark.css +9 -2
  132. package/styles/tailwind-lite.css +7 -0
  133. package/styles/tailwind.css +7 -0
  134. package/styles/tailwind3-lite.css +13 -2
  135. package/styles/tailwind3.css +13 -2
@@ -4986,16 +4986,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4986
4986
  this.resetList(dataSource, fields, query);
4987
4987
  if (isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
4988
4988
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
4989
- this.list.appendChild(this.createElement('div', {
4990
- className: 'e-virtual-ddl-content',
4991
- styles: this.getTransformValues()
4992
- })).appendChild(this.list.querySelector('.e-list-parent'));
4989
+ var virtualContentElement = this.createElement('div', {
4990
+ className: 'e-virtual-ddl-content'
4991
+ });
4992
+ virtualContentElement.style.cssText = this.getTransformValues();
4993
+ this.list.appendChild(virtualContentElement).appendChild(this.list.querySelector('.e-list-parent'));
4993
4994
  }
4994
4995
  if (!this.list.querySelector('.e-virtual-ddl')) {
4995
- var virualElement = this.createElement('div', {
4996
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
4996
+ var virtualElement = this.createElement('div', {
4997
+ id: this.element.id + '_popup',
4998
+ className: 'e-virtual-ddl'
4997
4999
  });
4998
- this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
5000
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
5001
+ this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
4999
5002
  }
5000
5003
  }
5001
5004
  }
@@ -5025,16 +5028,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5025
5028
  }
5026
5029
  if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
5027
5030
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
5028
- this.list.appendChild(this.createElement('div', {
5029
- className: 'e-virtual-ddl-content',
5030
- styles: this.getTransformValues()
5031
- })).appendChild(this.list.querySelector('.e-list-parent'));
5031
+ var virtualContentElement = this.createElement('div', {
5032
+ className: 'e-virtual-ddl-content'
5033
+ });
5034
+ virtualContentElement.style.cssText = this.getTransformValues();
5035
+ this.list.appendChild(virtualContentElement).appendChild(this.list.querySelector('.e-list-parent'));
5032
5036
  }
5033
5037
  if (!this.list.querySelector('.e-virtual-ddl')) {
5034
- var virualElement = this.createElement('div', {
5035
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
5038
+ var virtualElement = this.createElement('div', {
5039
+ id: this.element.id + '_popup',
5040
+ className: 'e-virtual-ddl'
5036
5041
  });
5037
- this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
5042
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
5043
+ this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
5038
5044
  }
5039
5045
  }
5040
5046
  }
@@ -5453,10 +5459,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5453
5459
  _this.skeletonCount = _this.totalItemCount < (_this.itemCount * 2) && ((!(_this.dataSource instanceof DataManager)) ||
5454
5460
  ((_this.dataSource instanceof DataManager) && (_this.totalItemCount <= _this.itemCount))) ? 0 : _this.skeletonCount;
5455
5461
  if (!_this.list.querySelector('.e-virtual-ddl-content')) {
5456
- _this.list.appendChild(_this.createElement('div', {
5457
- className: 'e-virtual-ddl-content',
5458
- styles: _this.getTransformValues()
5459
- })).appendChild(_this.list.querySelector('.e-list-parent'));
5462
+ var virtualContentElement = _this.createElement('div', {
5463
+ className: 'e-virtual-ddl-content'
5464
+ });
5465
+ virtualContentElement.style.cssText = _this.getTransformValues();
5466
+ _this.list.appendChild(virtualContentElement).appendChild(_this.list.querySelector('.e-list-parent'));
5460
5467
  }
5461
5468
  else {
5462
5469
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5466,10 +5473,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5466
5473
  _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);
5467
5474
  _this.virtualItemCount = _this.itemCount;
5468
5475
  if (!_this.list.querySelector('.e-virtual-ddl')) {
5469
- var virualElement = _this.createElement('div', {
5470
- id: _this.element.id + '_popup', className: 'e-virtual-ddl', styles: _this.GetVirtualTrackHeight()
5476
+ var virtualElement = _this.createElement('div', {
5477
+ id: _this.element.id + '_popup',
5478
+ className: 'e-virtual-ddl'
5471
5479
  });
5472
- popupEle.querySelector('.e-dropdownbase').appendChild(virualElement);
5480
+ virtualElement.style.cssText = _this.GetVirtualTrackHeight();
5481
+ popupEle.querySelector('.e-dropdownbase').appendChild(virtualElement);
5473
5482
  }
5474
5483
  else {
5475
5484
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5640,7 +5649,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5640
5649
  // Add the resizer div to the popup
5641
5650
  if (_this.list && _this.list.parentElement) {
5642
5651
  _this.list.parentElement.classList.add('e-resize');
5643
- if (_this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight > parseInt(_this.popupHeight.toString(), 10)) {
5652
+ if (_this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight >= (parseInt(_this.popupHeight.toString(), 10) - 2)) {
5644
5653
  _this.list.parentElement.style.height = '100%';
5645
5654
  }
5646
5655
  _this.list.parentElement.style.paddingBottom = (_this.getModuleName() === 'dropdownlist' && _this.allowFiltering && _this.searchBoxHeight) ? (_this.searchBoxHeight + resizePaddingBottom).toString() + 'px' : resizePaddingBottom.toString() + 'px';
@@ -6205,8 +6214,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
6205
6214
  }
6206
6215
  else if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
6207
6216
  var virualElement = this.createElement('div', {
6208
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
6217
+ id: this.element.id + '_popup',
6218
+ className: 'e-virtual-ddl'
6209
6219
  });
6220
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
6210
6221
  this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
6211
6222
  }
6212
6223
  if (this.getModuleName() !== 'autocomplete' && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2)) {
@@ -8696,7 +8707,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8696
8707
  this.dataBind();
8697
8708
  }
8698
8709
  else if (htmlAttr === 'style') {
8699
- this.inputWrapper.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
8710
+ this.inputWrapper.style.cssText = this.htmlAttributes["" + htmlAttr];
8700
8711
  }
8701
8712
  else {
8702
8713
  var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
@@ -9060,7 +9071,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
9060
9071
  _this.updateFocus(focusedElement);
9061
9072
  }
9062
9073
  if (_this.treeObj.checkedNodes.length > 0 && !_this.isFilterRestore) {
9063
- var nodes = _this.treeObj.element.querySelectorAll('li');
9074
+ var nodes = _this.treeObj.element.querySelectorAll('li:not(.e-disable)');
9064
9075
  var checkedNodes = _this.treeObj.element.querySelectorAll('li[aria-checked=true]');
9065
9076
  if ((checkedNodes.length === nodes.length) && _this.checkBoxElement) {
9066
9077
  var wrap = closest(_this.checkBoxElement, '.' + CHECKBOXWRAP);
@@ -9521,7 +9532,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
9521
9532
  this.ensurePlaceHolder();
9522
9533
  }
9523
9534
  if (this.showSelectAll && this.checkBoxElement) {
9524
- var nodes = this.treeObj.element.querySelectorAll('li');
9535
+ var nodes = this.treeObj.element.querySelectorAll('li:not(.e-disable)');
9525
9536
  var checkedNodes = this.treeObj.element.querySelectorAll('li[aria-checked=true]');
9526
9537
  var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
9527
9538
  if ((wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 ||
@@ -12211,15 +12222,16 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
12211
12222
  if (this.enableVirtualization && !isNoDataElement) {
12212
12223
  if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
12213
12224
  var virtualElement = this.createElement('div', {
12214
- className: 'e-virtual-ddl-content',
12215
- styles: this.getTransformValues()
12225
+ className: 'e-virtual-ddl-content'
12216
12226
  });
12227
+ virtualElement.style.cssText = this.getTransformValues();
12217
12228
  this.list.appendChild(virtualElement).appendChild(this.list.querySelector('.e-list-parent'));
12218
12229
  }
12219
12230
  if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
12220
12231
  var virtualElement = this.createElement('div', {
12221
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
12232
+ id: this.element.id + '_popup', className: 'e-virtual-ddl'
12222
12233
  });
12234
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
12223
12235
  this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
12224
12236
  }
12225
12237
  }
@@ -13018,8 +13030,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13018
13030
  }
13019
13031
  if (!this.list.querySelector('.e-virtual-ddl')) {
13020
13032
  var virualElement = this.createElement('div', {
13021
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
13033
+ id: this.element.id + '_popup',
13034
+ className: 'e-virtual-ddl'
13022
13035
  });
13036
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
13023
13037
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
13024
13038
  }
13025
13039
  else {
@@ -13718,15 +13732,18 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13718
13732
  this.UpdateSkeleton();
13719
13733
  if ((isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
13720
13734
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
13721
- this.list.appendChild(this.createElement('div', {
13722
- className: 'e-virtual-ddl-content',
13723
- styles: this.getTransformValues()
13724
- })).appendChild(this.list.querySelector('.e-list-parent'));
13735
+ var contentElement = this.createElement('div', {
13736
+ className: 'e-virtual-ddl-content'
13737
+ });
13738
+ contentElement.style.cssText = this.getTransformValues();
13739
+ this.list.appendChild(contentElement).appendChild(this.list.querySelector('.e-list-parent'));
13725
13740
  }
13726
13741
  if (!this.list.querySelector('.e-virtual-ddl')) {
13727
13742
  var virualElement = this.createElement('div', {
13728
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
13743
+ id: this.element.id + '_popup',
13744
+ className: 'e-virtual-ddl'
13729
13745
  });
13746
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
13730
13747
  document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
13731
13748
  }
13732
13749
  }
@@ -13758,18 +13775,21 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13758
13775
  if (this.enableVirtualization && (isNoData || this.allowCustomValue) &&
13759
13776
  !this.list.classList.contains(dropDownBaseClasses.noData)) {
13760
13777
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
13761
- this.list.appendChild(this.createElement('div', {
13762
- className: 'e-virtual-ddl-content',
13763
- styles: this.getTransformValues()
13764
- })).appendChild(this.list.querySelector('.e-list-parent'));
13778
+ var contentElement = this.createElement('div', {
13779
+ className: 'e-virtual-ddl-content'
13780
+ });
13781
+ contentElement.style.cssText = this.getTransformValues();
13782
+ this.list.appendChild(contentElement).appendChild(this.list.querySelector('.e-list-parent'));
13765
13783
  }
13766
13784
  if (this.mode !== 'CheckBox') {
13767
13785
  this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
13768
13786
  }
13769
13787
  if (!this.list.querySelector('.e-virtual-ddl')) {
13770
13788
  var virualElement = this.createElement('div', {
13771
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
13789
+ id: this.element.id + '_popup',
13790
+ className: 'e-virtual-ddl'
13772
13791
  });
13792
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
13773
13793
  document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
13774
13794
  }
13775
13795
  }
@@ -14875,8 +14895,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14875
14895
  }
14876
14896
  else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {
14877
14897
  var virualElement = this.createElement('div', {
14878
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
14898
+ id: this.element.id + '_popup',
14899
+ className: 'e-virtual-ddl'
14879
14900
  });
14901
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
14880
14902
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
14881
14903
  }
14882
14904
  }
@@ -15705,10 +15727,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15705
15727
  }
15706
15728
  if (this.enableVirtualization && !this.list.classList.contains(dropDownBaseClasses.noData)) {
15707
15729
  if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
15708
- this.list.appendChild(this.createElement('div', {
15709
- className: 'e-virtual-ddl-content',
15710
- styles: this.getTransformValues()
15711
- })).appendChild(this.list.querySelector('.e-list-parent'));
15730
+ var contentElement = this.createElement('div', {
15731
+ className: 'e-virtual-ddl-content'
15732
+ });
15733
+ contentElement.style.cssText = this.getTransformValues();
15734
+ this.list.appendChild(contentElement).appendChild(this.list.querySelector('.e-list-parent'));
15712
15735
  }
15713
15736
  else if (this.list.querySelector('.e-virtual-ddl-content')) {
15714
15737
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15722,8 +15745,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15722
15745
  }
15723
15746
  if (!this.list.querySelector('.e-virtual-ddl')) {
15724
15747
  var virualElement = this.createElement('div', {
15725
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
15748
+ id: this.element.id + '_popup',
15749
+ className: 'e-virtual-ddl'
15726
15750
  });
15751
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
15727
15752
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
15728
15753
  }
15729
15754
  else {
@@ -15960,8 +15985,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15960
15985
  }
15961
15986
  else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {
15962
15987
  var virualElement = this.createElement('div', {
15963
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
15988
+ id: this.element.id + '_popup',
15989
+ className: 'e-virtual-ddl'
15964
15990
  });
15991
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
15965
15992
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
15966
15993
  }
15967
15994
  this.listData = currentData;
@@ -16924,8 +16951,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
16924
16951
  }
16925
16952
  if (!this.list.querySelector('.e-virtual-ddl')) {
16926
16953
  var virualElement = this.createElement('div', {
16927
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
16954
+ id: this.element.id + '_popup',
16955
+ className: 'e-virtual-ddl'
16928
16956
  });
16957
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
16929
16958
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
16930
16959
  }
16931
16960
  else {
@@ -18404,11 +18433,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
18404
18433
  BOX_ELEMENT : '')
18405
18434
  });
18406
18435
  this.viewWrapper = this.createElement('span', {
18407
- className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;'
18436
+ className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER
18408
18437
  });
18438
+ this.viewWrapper.style.display = 'none';
18409
18439
  this.overAllClear = this.createElement('span', {
18410
- className: CLOSEICON_CLASS$1, styles: 'display:none;'
18440
+ className: CLOSEICON_CLASS$1
18411
18441
  });
18442
+ this.overAllClear.style.display = 'none';
18412
18443
  this.componentWrapper = this.createElement('div', { className: ELEMENT_WRAPPER });
18413
18444
  this.overAllWrapper = this.createElement('div', { className: OVER_ALL_WRAPPER });
18414
18445
  if (this.mode === 'CheckBox') {
@@ -18423,14 +18454,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
18423
18454
  this.popupWrapper.setAttribute('aria-label', this.element.id);
18424
18455
  this.popupWrapper.setAttribute('role', 'dialog');
18425
18456
  if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
18426
- this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });
18457
+ this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER });
18458
+ this.delimiterWrapper.style.display = 'none';
18427
18459
  this.componentWrapper.appendChild(this.delimiterWrapper);
18428
18460
  }
18429
18461
  else {
18430
18462
  this.chipCollectionWrapper = this.createElement('span', {
18431
- className: CHIP_WRAPPER$1,
18432
- styles: 'display:none'
18463
+ className: CHIP_WRAPPER$1
18433
18464
  });
18465
+ this.chipCollectionWrapper.style.display = 'none';
18434
18466
  if (this.mode === 'Default') {
18435
18467
  this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));
18436
18468
  }
@@ -22503,6 +22535,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22503
22535
  case 'showMentionChar':
22504
22536
  this.showMentionChar = newProp.showMentionChar;
22505
22537
  break;
22538
+ case 'requireLeadingSpace':
22539
+ this.requireLeadingSpace = newProp.requireLeadingSpace;
22540
+ break;
22506
22541
  case 'cssClass':
22507
22542
  this.updateCssClass(newProp.cssClass, oldProp.cssClass);
22508
22543
  break;
@@ -22796,7 +22831,18 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22796
22831
  rangetextContent = this.range.startContainer.textContent.split('');
22797
22832
  }
22798
22833
  var currentRange = this.getTextRange();
22834
+ // eslint-disable-next-line security/detect-non-literal-regexp
22835
+ var mentionRegex = new RegExp(this.mentionChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s');
22836
+ var isValid = currentRange && mentionRegex.test(currentRange) ? false : true;
22799
22837
  var lastWordRange = this.getLastLetter(currentRange);
22838
+ var previousChar = currentRange ? currentRange.charAt(Math.max(0, currentRange.indexOf(this.mentionChar) - 1)) : '';
22839
+ if (isValid && this.allowSpaces && currentRange && currentRange.includes(this.mentionChar) && currentRange.split(this.mentionChar).pop() !== ''
22840
+ && (!this.requireLeadingSpace || (this.requireLeadingSpace && (previousChar === ' ' || currentRange.indexOf(this.mentionChar) === 0)))) {
22841
+ lastWordRange = this.mentionChar + currentRange.split(this.mentionChar).pop();
22842
+ }
22843
+ if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
22844
+ lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
22845
+ }
22800
22846
  var lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
22801
22847
  // eslint-disable-next-line security/detect-non-literal-regexp
22802
22848
  var Regex = new RegExp(this.mentionChar.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
@@ -22808,19 +22854,19 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22808
22854
  this.hidePopup();
22809
22855
  return;
22810
22856
  }
22811
- if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
22857
+ if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace)) || e.code === 'Enter' || e.keyCode === 27 ||
22812
22858
  (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
22813
22859
  (this.isContentEditable(this.inputElement) && this.range.startContainer &&
22814
22860
  this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
22815
22861
  (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
22816
22862
  this.range.startContainer.nodeType === 1))) {
22817
- if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
22863
+ if (isValid && this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
22818
22864
  && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
22819
22865
  (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {
22820
22866
  this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
22821
22867
  this.searchLists(e);
22822
22868
  }
22823
- else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {
22869
+ else if (!this.requireLeadingSpace || this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {
22824
22870
  this.hidePopup();
22825
22871
  this.lineBreak = true;
22826
22872
  }
@@ -22830,7 +22876,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22830
22876
  return;
22831
22877
  }
22832
22878
  if (lastWordRange.includes(this.mentionChar)) {
22833
- this.queryString = lastWordRange.replace(this.mentionChar, '');
22879
+ this.queryString = !this.requireLeadingSpace
22880
+ ? lastWordRange.substring(lastWordRange.lastIndexOf(this.mentionChar) + 1).trim()
22881
+ : lastWordRange.replace(this.mentionChar, '');
22834
22882
  }
22835
22883
  if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
22836
22884
  this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
@@ -22845,9 +22893,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22845
22893
  }
22846
22894
  }
22847
22895
  }
22848
- else if (lastWordRange.indexOf(this.mentionChar) === 0 && !this.isPopupOpen && e.keyCode !== 8 && (!this.popupObj ||
22849
- (isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element) ||
22850
- !isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element)))) {
22896
+ else if ((!this.requireLeadingSpace ? lastWordRange.includes(this.mentionChar)
22897
+ : lastWordRange.indexOf(this.mentionChar) === 0) && !this.isPopupOpen && e.keyCode !== 8 &&
22898
+ (!this.popupObj || ((isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element)) ||
22899
+ (!isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element))))) {
22851
22900
  if (this.initRemoteRender && this.list && this.list.classList.contains('e-nodata')) {
22852
22901
  this.searchLists(e);
22853
22902
  }
@@ -24103,6 +24152,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
24103
24152
  __decorate$7([
24104
24153
  Property(true)
24105
24154
  ], Mention.prototype, "ignoreCase", void 0);
24155
+ __decorate$7([
24156
+ Property(true)
24157
+ ], Mention.prototype, "requireLeadingSpace", void 0);
24106
24158
  __decorate$7([
24107
24159
  Property(false)
24108
24160
  ], Mention.prototype, "highlight", void 0);