@syncfusion/ej2-dropdowns 24.1.41 → 24.1.44

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 (72) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-dropdowns.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js +2 -2
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +58 -8
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +58 -8
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +2 -2
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +7 -7
  14. package/src/auto-complete/auto-complete.js +1 -1
  15. package/src/drop-down-list/drop-down-list.js +29 -0
  16. package/src/drop-down-tree/drop-down-tree.js +1 -1
  17. package/src/list-box/list-box.d.ts +1 -0
  18. package/src/list-box/list-box.js +19 -3
  19. package/src/mention/mention.js +8 -3
  20. package/styles/bootstrap-dark.css +4 -3
  21. package/styles/bootstrap.css +4 -3
  22. package/styles/bootstrap4.css +4 -3
  23. package/styles/bootstrap5-dark.css +4 -3
  24. package/styles/bootstrap5.css +4 -3
  25. package/styles/drop-down-base/_layout.scss +0 -3
  26. package/styles/drop-down-base/bootstrap-dark.css +0 -3
  27. package/styles/drop-down-base/bootstrap.css +0 -3
  28. package/styles/drop-down-base/bootstrap4.css +0 -3
  29. package/styles/drop-down-base/bootstrap5-dark.css +0 -3
  30. package/styles/drop-down-base/bootstrap5.css +0 -3
  31. package/styles/drop-down-base/fabric-dark.css +0 -3
  32. package/styles/drop-down-base/fabric.css +0 -3
  33. package/styles/drop-down-base/fluent-dark.css +0 -3
  34. package/styles/drop-down-base/fluent.css +0 -3
  35. package/styles/drop-down-base/highcontrast-light.css +0 -3
  36. package/styles/drop-down-base/highcontrast.css +0 -3
  37. package/styles/drop-down-base/material-dark.css +0 -3
  38. package/styles/drop-down-base/material.css +0 -3
  39. package/styles/drop-down-base/material3-dark.css +0 -3
  40. package/styles/drop-down-base/material3.css +0 -3
  41. package/styles/drop-down-base/tailwind-dark.css +0 -3
  42. package/styles/drop-down-base/tailwind.css +0 -3
  43. package/styles/drop-down-tree/_layout.scss +5 -0
  44. package/styles/drop-down-tree/bootstrap-dark.css +4 -0
  45. package/styles/drop-down-tree/bootstrap.css +4 -0
  46. package/styles/drop-down-tree/bootstrap4.css +4 -0
  47. package/styles/drop-down-tree/bootstrap5-dark.css +4 -0
  48. package/styles/drop-down-tree/bootstrap5.css +4 -0
  49. package/styles/drop-down-tree/fabric-dark.css +4 -0
  50. package/styles/drop-down-tree/fabric.css +4 -0
  51. package/styles/drop-down-tree/fluent-dark.css +4 -0
  52. package/styles/drop-down-tree/fluent.css +4 -0
  53. package/styles/drop-down-tree/highcontrast-light.css +4 -0
  54. package/styles/drop-down-tree/highcontrast.css +4 -0
  55. package/styles/drop-down-tree/material-dark.css +4 -0
  56. package/styles/drop-down-tree/material.css +4 -0
  57. package/styles/drop-down-tree/material3-dark.css +4 -0
  58. package/styles/drop-down-tree/material3.css +4 -0
  59. package/styles/drop-down-tree/tailwind-dark.css +4 -0
  60. package/styles/drop-down-tree/tailwind.css +4 -0
  61. package/styles/fabric-dark.css +4 -3
  62. package/styles/fabric.css +4 -3
  63. package/styles/fluent-dark.css +4 -3
  64. package/styles/fluent.css +4 -3
  65. package/styles/highcontrast-light.css +4 -3
  66. package/styles/highcontrast.css +4 -3
  67. package/styles/material-dark.css +4 -3
  68. package/styles/material.css +4 -3
  69. package/styles/material3-dark.css +4 -3
  70. package/styles/material3.css +4 -3
  71. package/styles/tailwind-dark.css +4 -3
  72. package/styles/tailwind.css +4 -3
@@ -3110,6 +3110,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3110
3110
  if (this.getModuleName() === 'dropdownlist') {
3111
3111
  if (!this.beforePopupOpen) {
3112
3112
  this.showPopup();
3113
+ e.preventDefault();
3113
3114
  }
3114
3115
  }
3115
3116
  break;
@@ -3231,6 +3232,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3231
3232
  this.activeIndex = filterIndex;
3232
3233
  }
3233
3234
  }
3235
+ if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
3236
+ if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
3237
+ attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
3238
+ }
3239
+ else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
3240
+ attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
3241
+ }
3242
+ }
3234
3243
  e.preventDefault();
3235
3244
  };
3236
3245
  DropDownList.prototype.updateVirtualItemIndex = function () {
@@ -3364,6 +3373,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3364
3373
  previousItem = this.liCollections[this.skeletonCount];
3365
3374
  }
3366
3375
  this.PageUpDownSelection(previousItem, event);
3376
+ if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
3377
+ if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
3378
+ attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
3379
+ }
3380
+ else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
3381
+ attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
3382
+ }
3383
+ }
3367
3384
  };
3368
3385
  DropDownList.prototype.PageUpDownSelection = function (previousItem, event) {
3369
3386
  if (this.enableVirtualization) {
@@ -3382,6 +3399,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3382
3399
  previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
3383
3400
  }
3384
3401
  this.PageUpDownSelection(previousItem, event);
3402
+ if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
3403
+ if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
3404
+ attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
3405
+ }
3406
+ else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
3407
+ attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
3408
+ }
3409
+ }
3385
3410
  };
3386
3411
  DropDownList.prototype.unWireEvent = function () {
3387
3412
  if (!isNullOrUndefined(this.inputWrapper)) {
@@ -4521,6 +4546,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4521
4546
  _this.setFooterTemplate(popupEle);
4522
4547
  }
4523
4548
  document.body.appendChild(popupEle);
4549
+ popupEle.style.top = '0px';
4524
4550
  if (_this.enableVirtualization && _this.itemTemplate) {
4525
4551
  var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
4526
4552
  _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
@@ -5048,6 +5074,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5048
5074
  EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
5049
5075
  EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
5050
5076
  }
5077
+ if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
5078
+ this.filterInput.removeAttribute('aria-activedescendant');
5079
+ }
5051
5080
  this.filterInput = null;
5052
5081
  }
5053
5082
  attributes(this.targetElement(), { 'aria-expanded': 'false' });
@@ -8617,7 +8646,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8617
8646
  else {
8618
8647
  this.treeObj.uncheckAll();
8619
8648
  }
8620
- this.checkSelectAll = true;
8649
+ this.checkSelectAll = state;
8621
8650
  }
8622
8651
  else if (this.allowMultiSelection) {
8623
8652
  if (!state) {
@@ -10569,7 +10598,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
10569
10598
  _super.prototype.renderPopup.call(this, e);
10570
10599
  };
10571
10600
  AutoComplete.prototype.isEditTextBox = function () {
10572
- return true && this.inputElement.value.trim() !== '';
10601
+ return false;
10573
10602
  };
10574
10603
  AutoComplete.prototype.isPopupButton = function () {
10575
10604
  return this.showPopupButton;
@@ -15938,6 +15967,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
15938
15967
  this.initLoad = true;
15939
15968
  this.isCustomFiltering = false;
15940
15969
  this.initialSelectedOptions = this.value;
15970
+ this.inputFormName = this.element.getAttribute('name');
15941
15971
  _super.prototype.render.call(this);
15942
15972
  this.setEnabled();
15943
15973
  this.renderComplete();
@@ -16086,6 +16116,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
16086
16116
  });
16087
16117
  };
16088
16118
  ListBox.prototype.validationAttribute = function (input, hiddenSelect) {
16119
+ if (this.inputFormName) {
16120
+ input.setAttribute('name', this.inputFormName);
16121
+ }
16089
16122
  _super.prototype.validationAttribute.call(this, input, hiddenSelect);
16090
16123
  hiddenSelect.required = input.required;
16091
16124
  input.required = false;
@@ -16161,6 +16194,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
16161
16194
  };
16162
16195
  ListBox.prototype.onActionComplete = function (ulElement, list, e) {
16163
16196
  var searchEle;
16197
+ var filterElem;
16198
+ var txtLength;
16164
16199
  if (this.allowFiltering && this.list.getElementsByClassName('e-filter-parent')[0]) {
16165
16200
  searchEle = this.list.getElementsByClassName('e-filter-parent')[0].cloneNode(true);
16166
16201
  }
@@ -16170,6 +16205,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
16170
16205
  ulElement.removeChild(noRecElem);
16171
16206
  }
16172
16207
  }
16208
+ if (this.allowFiltering) {
16209
+ filterElem = this.list.getElementsByClassName('e-input-filter')[0];
16210
+ if (filterElem) {
16211
+ txtLength = filterElem.selectionStart;
16212
+ }
16213
+ }
16173
16214
  _super.prototype.onActionComplete.call(this, ulElement, list, e);
16174
16215
  if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
16175
16216
  this.list.insertBefore(searchEle, this.list.firstElementChild);
@@ -16199,8 +16240,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
16199
16240
  this.isDataSourceUpdate = false;
16200
16241
  }
16201
16242
  if (this.allowFiltering) {
16202
- var filterElem = this.list.getElementsByClassName('e-input-filter')[0];
16203
- var txtLength = this.filterInput.value.length;
16243
+ filterElem = this.list.getElementsByClassName('e-input-filter')[0];
16204
16244
  filterElem.selectionStart = txtLength;
16205
16245
  filterElem.selectionEnd = txtLength;
16206
16246
  filterElem.focus();
@@ -17590,7 +17630,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
17590
17630
  e.stopPropagation();
17591
17631
  };
17592
17632
  ListBox.prototype.keyDownHandler = function (e) {
17593
- if ([32, 35, 36, 37, 38, 39, 40, 65].indexOf(e.keyCode) > -1 && !this.allowFiltering) {
17633
+ if ([32, 35, 36, 37, 38, 39, 40, 65].indexOf(e.keyCode) > -1 && (!this.allowFiltering ||
17634
+ (this.allowFiltering && e.target !== this.filterInput))) {
17594
17635
  if (e.target && e.target.className.indexOf('e-edit-template') > -1) {
17595
17636
  return;
17596
17637
  }
@@ -17684,6 +17725,10 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
17684
17725
  };
17685
17726
  ListBox.prototype.KeyUp = function (e) {
17686
17727
  var _this = this;
17728
+ if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
17729
+ e.preventDefault();
17730
+ return;
17731
+ }
17687
17732
  var char = String.fromCharCode(e.keyCode);
17688
17733
  var isWordCharacter = char.match(/\w/);
17689
17734
  if (!isNullOrUndefined(isWordCharacter)) {
@@ -18589,16 +18634,21 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18589
18634
  }
18590
18635
  var currentRange = this.getTextRange();
18591
18636
  var lastWordRange = this.getLastLetter(currentRange);
18637
+ var lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
18592
18638
  // eslint-disable-next-line security/detect-non-literal-regexp
18593
18639
  var Regex = new RegExp(this.mentionChar.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
18594
18640
  var charRegex = new RegExp('[a-zA-Z]', 'g');
18595
18641
  if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
18596
18642
  return;
18597
18643
  }
18644
+ if (this.beforePopupOpen && this.isPopupOpen && lastWordRange == lastTwoLetters) {
18645
+ this.hidePopup();
18646
+ return;
18647
+ }
18598
18648
  if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
18599
18649
  (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
18600
18650
  (this.isContentEditable(this.inputElement) && this.range.startContainer &&
18601
- this.range.startContainer.previousElementSibling && this.range.startContainer.textContent.split('').length > 0 &&
18651
+ this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
18602
18652
  (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
18603
18653
  this.range.startContainer.nodeType === 1))) {
18604
18654
  if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
@@ -18636,7 +18686,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18636
18686
  if (isNullOrUndefined(this.list)) {
18637
18687
  this.initValue();
18638
18688
  }
18639
- if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
18689
+ if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40 && this.queryString.length >= this.minLength) {
18640
18690
  this.didPopupOpenByTypingInitialChar = true;
18641
18691
  this.showPopup();
18642
18692
  if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
@@ -18736,7 +18786,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18736
18786
  this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
18737
18787
  }
18738
18788
  if (this.beforePopupOpen && this.isPopupOpen) {
18739
- if (this.initRemoteRender && !isNullOrUndefined(this.popupObj.element)) {
18789
+ if (!isNullOrUndefined(this.popupObj.element)) {
18740
18790
  this.popupObj.element.remove();
18741
18791
  }
18742
18792
  this.renderPopup();