@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
@@ -4874,16 +4874,19 @@ let DropDownList = class DropDownList extends DropDownBase {
4874
4874
  this.resetList(dataSource, fields, query);
4875
4875
  if (isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
4876
4876
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
4877
- this.list.appendChild(this.createElement('div', {
4878
- className: 'e-virtual-ddl-content',
4879
- styles: this.getTransformValues()
4880
- })).appendChild(this.list.querySelector('.e-list-parent'));
4877
+ const virtualContentElement = this.createElement('div', {
4878
+ className: 'e-virtual-ddl-content'
4879
+ });
4880
+ virtualContentElement.style.cssText = this.getTransformValues();
4881
+ this.list.appendChild(virtualContentElement).appendChild(this.list.querySelector('.e-list-parent'));
4881
4882
  }
4882
4883
  if (!this.list.querySelector('.e-virtual-ddl')) {
4883
- const virualElement = this.createElement('div', {
4884
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
4884
+ const virtualElement = this.createElement('div', {
4885
+ id: this.element.id + '_popup',
4886
+ className: 'e-virtual-ddl'
4885
4887
  });
4886
- this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
4888
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
4889
+ this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
4887
4890
  }
4888
4891
  }
4889
4892
  }
@@ -4913,16 +4916,19 @@ let DropDownList = class DropDownList extends DropDownBase {
4913
4916
  }
4914
4917
  if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
4915
4918
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
4916
- this.list.appendChild(this.createElement('div', {
4917
- className: 'e-virtual-ddl-content',
4918
- styles: this.getTransformValues()
4919
- })).appendChild(this.list.querySelector('.e-list-parent'));
4919
+ const virtualContentElement = this.createElement('div', {
4920
+ className: 'e-virtual-ddl-content'
4921
+ });
4922
+ virtualContentElement.style.cssText = this.getTransformValues();
4923
+ this.list.appendChild(virtualContentElement).appendChild(this.list.querySelector('.e-list-parent'));
4920
4924
  }
4921
4925
  if (!this.list.querySelector('.e-virtual-ddl')) {
4922
- const virualElement = this.createElement('div', {
4923
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
4926
+ const virtualElement = this.createElement('div', {
4927
+ id: this.element.id + '_popup',
4928
+ className: 'e-virtual-ddl'
4924
4929
  });
4925
- this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
4930
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
4931
+ this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
4926
4932
  }
4927
4933
  }
4928
4934
  }
@@ -5332,10 +5338,11 @@ let DropDownList = class DropDownList extends DropDownBase {
5332
5338
  this.skeletonCount = this.totalItemCount < (this.itemCount * 2) && ((!(this.dataSource instanceof DataManager)) ||
5333
5339
  ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
5334
5340
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
5335
- this.list.appendChild(this.createElement('div', {
5336
- className: 'e-virtual-ddl-content',
5337
- styles: this.getTransformValues()
5338
- })).appendChild(this.list.querySelector('.e-list-parent'));
5341
+ const virtualContentElement = this.createElement('div', {
5342
+ className: 'e-virtual-ddl-content'
5343
+ });
5344
+ virtualContentElement.style.cssText = this.getTransformValues();
5345
+ this.list.appendChild(virtualContentElement).appendChild(this.list.querySelector('.e-list-parent'));
5339
5346
  }
5340
5347
  else {
5341
5348
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5345,10 +5352,12 @@ let DropDownList = class DropDownList extends DropDownBase {
5345
5352
  this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
5346
5353
  this.virtualItemCount = this.itemCount;
5347
5354
  if (!this.list.querySelector('.e-virtual-ddl')) {
5348
- const virualElement = this.createElement('div', {
5349
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
5355
+ const virtualElement = this.createElement('div', {
5356
+ id: this.element.id + '_popup',
5357
+ className: 'e-virtual-ddl'
5350
5358
  });
5351
- popupEle.querySelector('.e-dropdownbase').appendChild(virualElement);
5359
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
5360
+ popupEle.querySelector('.e-dropdownbase').appendChild(virtualElement);
5352
5361
  }
5353
5362
  else {
5354
5363
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5518,7 +5527,7 @@ let DropDownList = class DropDownList extends DropDownBase {
5518
5527
  // Add the resizer div to the popup
5519
5528
  if (this.list && this.list.parentElement) {
5520
5529
  this.list.parentElement.classList.add('e-resize');
5521
- if (this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight > parseInt(this.popupHeight.toString(), 10)) {
5530
+ if (this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight >= (parseInt(this.popupHeight.toString(), 10) - 2)) {
5522
5531
  this.list.parentElement.style.height = '100%';
5523
5532
  }
5524
5533
  this.list.parentElement.style.paddingBottom = (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.searchBoxHeight) ? (this.searchBoxHeight + resizePaddingBottom).toString() + 'px' : resizePaddingBottom.toString() + 'px';
@@ -6076,8 +6085,10 @@ let DropDownList = class DropDownList extends DropDownBase {
6076
6085
  }
6077
6086
  else if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
6078
6087
  const virualElement = this.createElement('div', {
6079
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
6088
+ id: this.element.id + '_popup',
6089
+ className: 'e-virtual-ddl'
6080
6090
  });
6091
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
6081
6092
  this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virualElement);
6082
6093
  }
6083
6094
  if (this.getModuleName() !== 'autocomplete' && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2)) {
@@ -8518,7 +8529,7 @@ let DropDownTree = class DropDownTree extends Component {
8518
8529
  this.dataBind();
8519
8530
  }
8520
8531
  else if (htmlAttr === 'style') {
8521
- this.inputWrapper.setAttribute('style', this.htmlAttributes[`${htmlAttr}`]);
8532
+ this.inputWrapper.style.cssText = this.htmlAttributes[`${htmlAttr}`];
8522
8533
  }
8523
8534
  else {
8524
8535
  const defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
@@ -8875,7 +8886,7 @@ let DropDownTree = class DropDownTree extends Component {
8875
8886
  this.updateFocus(focusedElement);
8876
8887
  }
8877
8888
  if (this.treeObj.checkedNodes.length > 0 && !this.isFilterRestore) {
8878
- const nodes = this.treeObj.element.querySelectorAll('li');
8889
+ const nodes = this.treeObj.element.querySelectorAll('li:not(.e-disable)');
8879
8890
  const checkedNodes = this.treeObj.element.querySelectorAll('li[aria-checked=true]');
8880
8891
  if ((checkedNodes.length === nodes.length) && this.checkBoxElement) {
8881
8892
  const wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
@@ -9335,7 +9346,7 @@ let DropDownTree = class DropDownTree extends Component {
9335
9346
  this.ensurePlaceHolder();
9336
9347
  }
9337
9348
  if (this.showSelectAll && this.checkBoxElement) {
9338
- const nodes = this.treeObj.element.querySelectorAll('li');
9349
+ const nodes = this.treeObj.element.querySelectorAll('li:not(.e-disable)');
9339
9350
  const checkedNodes = this.treeObj.element.querySelectorAll('li[aria-checked=true]');
9340
9351
  const wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
9341
9352
  if ((wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 ||
@@ -11980,15 +11991,16 @@ let AutoComplete = class AutoComplete extends ComboBox {
11980
11991
  if (this.enableVirtualization && !isNoDataElement) {
11981
11992
  if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
11982
11993
  const virtualElement = this.createElement('div', {
11983
- className: 'e-virtual-ddl-content',
11984
- styles: this.getTransformValues()
11994
+ className: 'e-virtual-ddl-content'
11985
11995
  });
11996
+ virtualElement.style.cssText = this.getTransformValues();
11986
11997
  this.list.appendChild(virtualElement).appendChild(this.list.querySelector('.e-list-parent'));
11987
11998
  }
11988
11999
  if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
11989
12000
  const virtualElement = this.createElement('div', {
11990
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
12001
+ id: this.element.id + '_popup', className: 'e-virtual-ddl'
11991
12002
  });
12003
+ virtualElement.style.cssText = this.GetVirtualTrackHeight();
11992
12004
  this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
11993
12005
  }
11994
12006
  }
@@ -12767,8 +12779,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
12767
12779
  }
12768
12780
  if (!this.list.querySelector('.e-virtual-ddl')) {
12769
12781
  const virualElement = this.createElement('div', {
12770
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
12782
+ id: this.element.id + '_popup',
12783
+ className: 'e-virtual-ddl'
12771
12784
  });
12785
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
12772
12786
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
12773
12787
  }
12774
12788
  else {
@@ -13466,15 +13480,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13466
13480
  this.UpdateSkeleton();
13467
13481
  if ((isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
13468
13482
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
13469
- this.list.appendChild(this.createElement('div', {
13470
- className: 'e-virtual-ddl-content',
13471
- styles: this.getTransformValues()
13472
- })).appendChild(this.list.querySelector('.e-list-parent'));
13483
+ const contentElement = this.createElement('div', {
13484
+ className: 'e-virtual-ddl-content'
13485
+ });
13486
+ contentElement.style.cssText = this.getTransformValues();
13487
+ this.list.appendChild(contentElement).appendChild(this.list.querySelector('.e-list-parent'));
13473
13488
  }
13474
13489
  if (!this.list.querySelector('.e-virtual-ddl')) {
13475
13490
  const virualElement = this.createElement('div', {
13476
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
13491
+ id: this.element.id + '_popup',
13492
+ className: 'e-virtual-ddl'
13477
13493
  });
13494
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
13478
13495
  document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
13479
13496
  }
13480
13497
  }
@@ -13506,18 +13523,21 @@ let MultiSelect = class MultiSelect extends DropDownBase {
13506
13523
  if (this.enableVirtualization && (isNoData || this.allowCustomValue) &&
13507
13524
  !this.list.classList.contains(dropDownBaseClasses.noData)) {
13508
13525
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
13509
- this.list.appendChild(this.createElement('div', {
13510
- className: 'e-virtual-ddl-content',
13511
- styles: this.getTransformValues()
13512
- })).appendChild(this.list.querySelector('.e-list-parent'));
13526
+ const contentElement = this.createElement('div', {
13527
+ className: 'e-virtual-ddl-content'
13528
+ });
13529
+ contentElement.style.cssText = this.getTransformValues();
13530
+ this.list.appendChild(contentElement).appendChild(this.list.querySelector('.e-list-parent'));
13513
13531
  }
13514
13532
  if (this.mode !== 'CheckBox') {
13515
13533
  this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
13516
13534
  }
13517
13535
  if (!this.list.querySelector('.e-virtual-ddl')) {
13518
13536
  const virualElement = this.createElement('div', {
13519
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
13537
+ id: this.element.id + '_popup',
13538
+ className: 'e-virtual-ddl'
13520
13539
  });
13540
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
13521
13541
  document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
13522
13542
  }
13523
13543
  }
@@ -14618,8 +14638,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
14618
14638
  }
14619
14639
  else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {
14620
14640
  const virualElement = this.createElement('div', {
14621
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
14641
+ id: this.element.id + '_popup',
14642
+ className: 'e-virtual-ddl'
14622
14643
  });
14644
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
14623
14645
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
14624
14646
  }
14625
14647
  }
@@ -15438,10 +15460,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15438
15460
  }
15439
15461
  if (this.enableVirtualization && !this.list.classList.contains(dropDownBaseClasses.noData)) {
15440
15462
  if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
15441
- this.list.appendChild(this.createElement('div', {
15442
- className: 'e-virtual-ddl-content',
15443
- styles: this.getTransformValues()
15444
- })).appendChild(this.list.querySelector('.e-list-parent'));
15463
+ const contentElement = this.createElement('div', {
15464
+ className: 'e-virtual-ddl-content'
15465
+ });
15466
+ contentElement.style.cssText = this.getTransformValues();
15467
+ this.list.appendChild(contentElement).appendChild(this.list.querySelector('.e-list-parent'));
15445
15468
  }
15446
15469
  else if (this.list.querySelector('.e-virtual-ddl-content')) {
15447
15470
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15455,8 +15478,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15455
15478
  }
15456
15479
  if (!this.list.querySelector('.e-virtual-ddl')) {
15457
15480
  const virualElement = this.createElement('div', {
15458
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
15481
+ id: this.element.id + '_popup',
15482
+ className: 'e-virtual-ddl'
15459
15483
  });
15484
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
15460
15485
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
15461
15486
  }
15462
15487
  else {
@@ -15693,8 +15718,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15693
15718
  }
15694
15719
  else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {
15695
15720
  const virualElement = this.createElement('div', {
15696
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
15721
+ id: this.element.id + '_popup',
15722
+ className: 'e-virtual-ddl'
15697
15723
  });
15724
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
15698
15725
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
15699
15726
  }
15700
15727
  this.listData = currentData;
@@ -16645,8 +16672,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
16645
16672
  }
16646
16673
  if (!this.list.querySelector('.e-virtual-ddl')) {
16647
16674
  const virualElement = this.createElement('div', {
16648
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
16675
+ id: this.element.id + '_popup',
16676
+ className: 'e-virtual-ddl'
16649
16677
  });
16678
+ virualElement.style.cssText = this.GetVirtualTrackHeight();
16650
16679
  this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
16651
16680
  }
16652
16681
  else {
@@ -18115,11 +18144,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
18115
18144
  BOX_ELEMENT : '')
18116
18145
  });
18117
18146
  this.viewWrapper = this.createElement('span', {
18118
- className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;'
18147
+ className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER
18119
18148
  });
18149
+ this.viewWrapper.style.display = 'none';
18120
18150
  this.overAllClear = this.createElement('span', {
18121
- className: CLOSEICON_CLASS$1, styles: 'display:none;'
18151
+ className: CLOSEICON_CLASS$1
18122
18152
  });
18153
+ this.overAllClear.style.display = 'none';
18123
18154
  this.componentWrapper = this.createElement('div', { className: ELEMENT_WRAPPER });
18124
18155
  this.overAllWrapper = this.createElement('div', { className: OVER_ALL_WRAPPER });
18125
18156
  if (this.mode === 'CheckBox') {
@@ -18134,14 +18165,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
18134
18165
  this.popupWrapper.setAttribute('aria-label', this.element.id);
18135
18166
  this.popupWrapper.setAttribute('role', 'dialog');
18136
18167
  if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
18137
- this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });
18168
+ this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER });
18169
+ this.delimiterWrapper.style.display = 'none';
18138
18170
  this.componentWrapper.appendChild(this.delimiterWrapper);
18139
18171
  }
18140
18172
  else {
18141
18173
  this.chipCollectionWrapper = this.createElement('span', {
18142
- className: CHIP_WRAPPER$1,
18143
- styles: 'display:none'
18174
+ className: CHIP_WRAPPER$1
18144
18175
  });
18176
+ this.chipCollectionWrapper.style.display = 'none';
18145
18177
  if (this.mode === 'Default') {
18146
18178
  this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));
18147
18179
  }
@@ -22126,6 +22158,9 @@ let Mention = class Mention extends DropDownBase {
22126
22158
  case 'showMentionChar':
22127
22159
  this.showMentionChar = newProp.showMentionChar;
22128
22160
  break;
22161
+ case 'requireLeadingSpace':
22162
+ this.requireLeadingSpace = newProp.requireLeadingSpace;
22163
+ break;
22129
22164
  case 'cssClass':
22130
22165
  this.updateCssClass(newProp.cssClass, oldProp.cssClass);
22131
22166
  break;
@@ -22419,7 +22454,18 @@ let Mention = class Mention extends DropDownBase {
22419
22454
  rangetextContent = this.range.startContainer.textContent.split('');
22420
22455
  }
22421
22456
  const currentRange = this.getTextRange();
22422
- const lastWordRange = this.getLastLetter(currentRange);
22457
+ // eslint-disable-next-line security/detect-non-literal-regexp
22458
+ const mentionRegex = new RegExp(this.mentionChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s');
22459
+ const isValid = currentRange && mentionRegex.test(currentRange) ? false : true;
22460
+ let lastWordRange = this.getLastLetter(currentRange);
22461
+ const previousChar = currentRange ? currentRange.charAt(Math.max(0, currentRange.indexOf(this.mentionChar) - 1)) : '';
22462
+ if (isValid && this.allowSpaces && currentRange && currentRange.includes(this.mentionChar) && currentRange.split(this.mentionChar).pop() !== ''
22463
+ && (!this.requireLeadingSpace || (this.requireLeadingSpace && (previousChar === ' ' || currentRange.indexOf(this.mentionChar) === 0)))) {
22464
+ lastWordRange = this.mentionChar + currentRange.split(this.mentionChar).pop();
22465
+ }
22466
+ if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
22467
+ lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
22468
+ }
22423
22469
  const lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
22424
22470
  // eslint-disable-next-line security/detect-non-literal-regexp
22425
22471
  const Regex = new RegExp(this.mentionChar.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
@@ -22431,19 +22477,19 @@ let Mention = class Mention extends DropDownBase {
22431
22477
  this.hidePopup();
22432
22478
  return;
22433
22479
  }
22434
- if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
22480
+ if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace)) || e.code === 'Enter' || e.keyCode === 27 ||
22435
22481
  (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
22436
22482
  (this.isContentEditable(this.inputElement) && this.range.startContainer &&
22437
22483
  this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
22438
22484
  (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
22439
22485
  this.range.startContainer.nodeType === 1))) {
22440
- if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
22486
+ if (isValid && this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
22441
22487
  && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
22442
22488
  (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {
22443
22489
  this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
22444
22490
  this.searchLists(e);
22445
22491
  }
22446
- else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {
22492
+ else if (!this.requireLeadingSpace || this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {
22447
22493
  this.hidePopup();
22448
22494
  this.lineBreak = true;
22449
22495
  }
@@ -22453,7 +22499,9 @@ let Mention = class Mention extends DropDownBase {
22453
22499
  return;
22454
22500
  }
22455
22501
  if (lastWordRange.includes(this.mentionChar)) {
22456
- this.queryString = lastWordRange.replace(this.mentionChar, '');
22502
+ this.queryString = !this.requireLeadingSpace
22503
+ ? lastWordRange.substring(lastWordRange.lastIndexOf(this.mentionChar) + 1).trim()
22504
+ : lastWordRange.replace(this.mentionChar, '');
22457
22505
  }
22458
22506
  if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
22459
22507
  this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
@@ -22468,9 +22516,10 @@ let Mention = class Mention extends DropDownBase {
22468
22516
  }
22469
22517
  }
22470
22518
  }
22471
- else if (lastWordRange.indexOf(this.mentionChar) === 0 && !this.isPopupOpen && e.keyCode !== 8 && (!this.popupObj ||
22472
- (isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element) ||
22473
- !isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element)))) {
22519
+ else if ((!this.requireLeadingSpace ? lastWordRange.includes(this.mentionChar)
22520
+ : lastWordRange.indexOf(this.mentionChar) === 0) && !this.isPopupOpen && e.keyCode !== 8 &&
22521
+ (!this.popupObj || ((isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element)) ||
22522
+ (!isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element))))) {
22474
22523
  if (this.initRemoteRender && this.list && this.list.classList.contains('e-nodata')) {
22475
22524
  this.searchLists(e);
22476
22525
  }
@@ -23719,6 +23768,9 @@ __decorate$7([
23719
23768
  __decorate$7([
23720
23769
  Property(true)
23721
23770
  ], Mention.prototype, "ignoreCase", void 0);
23771
+ __decorate$7([
23772
+ Property(true)
23773
+ ], Mention.prototype, "requireLeadingSpace", void 0);
23722
23774
  __decorate$7([
23723
23775
  Property(false)
23724
23776
  ], Mention.prototype, "highlight", void 0);