@syncfusion/ej2-dropdowns 24.1.47 → 24.2.4

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 (56) hide show
  1. package/CHANGELOG.md +20 -6
  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 +57 -10
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +57 -10
  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 +12 -12
  13. package/src/drop-down-base/drop-down-base.js +1 -1
  14. package/src/drop-down-list/drop-down-list.js +16 -0
  15. package/src/drop-down-tree/drop-down-tree.js +0 -3
  16. package/src/list-box/list-box-model.d.ts +1 -1
  17. package/src/list-box/list-box.js +8 -1
  18. package/src/mention/mention.js +1 -0
  19. package/src/multi-select/multi-select-model.d.ts +1 -1
  20. package/src/multi-select/multi-select.d.ts +3 -1
  21. package/src/multi-select/multi-select.js +32 -6
  22. package/styles/bootstrap-dark.css +0 -5
  23. package/styles/bootstrap.css +0 -5
  24. package/styles/bootstrap4.css +0 -5
  25. package/styles/bootstrap5-dark.css +0 -5
  26. package/styles/bootstrap5.css +0 -5
  27. package/styles/drop-down-base/_layout.scss +0 -5
  28. package/styles/drop-down-base/bootstrap-dark.css +0 -5
  29. package/styles/drop-down-base/bootstrap.css +0 -5
  30. package/styles/drop-down-base/bootstrap4.css +0 -5
  31. package/styles/drop-down-base/bootstrap5-dark.css +0 -5
  32. package/styles/drop-down-base/bootstrap5.css +0 -5
  33. package/styles/drop-down-base/fabric-dark.css +0 -5
  34. package/styles/drop-down-base/fabric.css +0 -5
  35. package/styles/drop-down-base/fluent-dark.css +0 -5
  36. package/styles/drop-down-base/fluent.css +0 -5
  37. package/styles/drop-down-base/highcontrast-light.css +0 -5
  38. package/styles/drop-down-base/highcontrast.css +0 -5
  39. package/styles/drop-down-base/material-dark.css +0 -5
  40. package/styles/drop-down-base/material.css +0 -5
  41. package/styles/drop-down-base/material3-dark.css +0 -5
  42. package/styles/drop-down-base/material3.css +0 -5
  43. package/styles/drop-down-base/tailwind-dark.css +0 -5
  44. package/styles/drop-down-base/tailwind.css +0 -5
  45. package/styles/fabric-dark.css +0 -5
  46. package/styles/fabric.css +0 -5
  47. package/styles/fluent-dark.css +0 -5
  48. package/styles/fluent.css +0 -5
  49. package/styles/highcontrast-light.css +0 -5
  50. package/styles/highcontrast.css +0 -5
  51. package/styles/material-dark.css +0 -5
  52. package/styles/material.css +0 -5
  53. package/styles/material3-dark.css +0 -5
  54. package/styles/material3.css +0 -5
  55. package/styles/tailwind-dark.css +0 -5
  56. package/styles/tailwind.css +0 -5
@@ -924,7 +924,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
924
924
  }
925
925
  }
926
926
  else {
927
- if (noDataElement[i] instanceof HTMLElement) {
927
+ if (noDataElement[i] instanceof HTMLElement || noDataElement[i] instanceof Text) {
928
928
  ele.appendChild(noDataElement[i]);
929
929
  }
930
930
  }
@@ -3445,6 +3445,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3445
3445
  if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
3446
3446
  this.isDocumentClick = true;
3447
3447
  var isActive = this.isRequested;
3448
+ if (this.getModuleName() === 'combobox' && this.isTyped) {
3449
+ this.isInteracted = false;
3450
+ }
3448
3451
  this.hidePopup(e);
3449
3452
  this.isInteracted = false;
3450
3453
  if (!isActive) {
@@ -4133,6 +4136,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4133
4136
  this.virtualListInfo = null;
4134
4137
  }
4135
4138
  this.resetList(dataSource, fields, query);
4139
+ if (this.getModuleName() === 'dropdownlist' && this.list.classList.contains(dropDownBaseClasses.noData)) {
4140
+ this.popupContentElement.setAttribute('role', 'status');
4141
+ this.popupContentElement.setAttribute('id', 'no-record');
4142
+ attributes(this.filterInputObj.container, { 'aria-activedescendant': 'no-record' });
4143
+ }
4136
4144
  if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
4137
4145
  if (!this.list.querySelector('.e-virtual-ddl-content')) {
4138
4146
  this.list.appendChild(this.createElement('div', {
@@ -4681,6 +4689,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4681
4689
  }, 5);
4682
4690
  }
4683
4691
  attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
4692
+ if (_this.getModuleName() !== 'dropdownlist' && _this.list.classList.contains('e-nodata')) {
4693
+ attributes(_this.targetElement(), { 'aria-activedescendant': 'no-record' });
4694
+ _this.popupContentElement.setAttribute('role', 'status');
4695
+ _this.popupContentElement.setAttribute('id', 'no-record');
4696
+ }
4684
4697
  _this.inputElement.setAttribute('aria-expanded', 'true');
4685
4698
  _this.inputElement.setAttribute('aria-controls', _this.element.id);
4686
4699
  var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
@@ -5981,6 +5994,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5981
5994
  this.clearTemplate();
5982
5995
  }
5983
5996
  this.hidePopup();
5997
+ if (this.popupObj) {
5998
+ this.popupObj.hide();
5999
+ }
5984
6000
  this.unWireEvent();
5985
6001
  if (this.list) {
5986
6002
  this.unWireListEvents();
@@ -8094,9 +8110,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8094
8110
  if (this.value === null) {
8095
8111
  this.setProperties({ value: [] }, true);
8096
8112
  }
8097
- if (args.node.classList.contains("e-active")) {
8098
- this.hidePopup();
8099
- }
8100
8113
  }
8101
8114
  };
8102
8115
  DropDownTree.prototype.updateHiddenValue = function () {
@@ -11451,6 +11464,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11451
11464
  else {
11452
11465
  this.updateActionList(ulElement, list, e);
11453
11466
  }
11467
+ if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered && this.inputElement.value && this.inputElement.value !== '') {
11468
+ var query = new Query();
11469
+ query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
11470
+ this.checkForCustomValue(query, this.fields);
11471
+ this.isCustomRendered = true;
11472
+ }
11454
11473
  if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
11455
11474
  this.removeFocus();
11456
11475
  }
@@ -11472,7 +11491,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11472
11491
  if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
11473
11492
  this.inputElement.value && this.inputElement.value !== '') {
11474
11493
  this.checkForCustomValue(this.tempQuery, this.fields);
11475
- return;
11494
+ if (this.isCustomRendered) {
11495
+ return;
11496
+ }
11476
11497
  }
11477
11498
  if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
11478
11499
  this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
@@ -11739,12 +11760,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11739
11760
  };
11740
11761
  MultiSelect.prototype.checkForCustomValue = function (query, fields) {
11741
11762
  var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
11763
+ var field = fields ? fields : this.fields;
11742
11764
  if (this.allowCustomValue && dataChecks) {
11743
11765
  var value = this.inputElement.value;
11744
- var field = fields ? fields : this.fields;
11745
11766
  var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
11746
11767
  this.mainData[0] : this.mainData;
11747
- if (typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
11768
+ if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
11748
11769
  var dataItem = {};
11749
11770
  setValue(field.text, value, dataItem);
11750
11771
  if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
@@ -11758,7 +11779,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11758
11779
  tempData.splice(0, 0, dataItem);
11759
11780
  this.resetList(tempData, field, query);
11760
11781
  }
11761
- else {
11782
+ else if (this.listData) {
11762
11783
  var tempData = JSON.parse(JSON.stringify(this.listData));
11763
11784
  tempData.splice(0, 0, this.inputElement.value);
11764
11785
  tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?
@@ -11768,6 +11789,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11768
11789
  this.resetList(tempData, field);
11769
11790
  }
11770
11791
  }
11792
+ else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
11793
+ if (this.allowFiltering && this.isRemoteSelection && this.remoteCustomValue) {
11794
+ this.isRemoteSelection = false;
11795
+ this.resetList(this.listData, field, query);
11796
+ }
11797
+ else if (!this.allowFiltering && this.list) {
11798
+ var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
11799
+ var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
11800
+ if (activeElement && activeElement.item !== null) {
11801
+ this.addListFocus(activeElement.item);
11802
+ }
11803
+ }
11804
+ }
11771
11805
  if (this.value && this.value.length) {
11772
11806
  this.refreshSelection();
11773
11807
  }
@@ -13395,6 +13429,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13395
13429
  else {
13396
13430
  var text = this.targetElement();
13397
13431
  if (this.allowFiltering) {
13432
+ if (this.allowCustomValue) {
13433
+ this.isRemoteSelection = true;
13434
+ }
13398
13435
  var eventArgs_1 = {
13399
13436
  preventDefaultAction: false,
13400
13437
  text: this.targetElement(),
@@ -13420,7 +13457,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13420
13457
  }
13421
13458
  else if (this.allowCustomValue) {
13422
13459
  var query = new Query();
13423
- query = (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
13460
+ query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
13424
13461
  this.dataUpdater(this.mainData, query, this.fields);
13425
13462
  }
13426
13463
  else {
@@ -13462,6 +13499,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13462
13499
  this.focused = true;
13463
13500
  this.initial = true;
13464
13501
  this.backCommand = true;
13502
+ this.isCustomRendered = false;
13503
+ this.isRemoteSelection = false;
13465
13504
  };
13466
13505
  MultiSelect.prototype.updateData = function (delimiterChar, e) {
13467
13506
  var data = '';
@@ -15243,7 +15282,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15243
15282
  Property(true)
15244
15283
  ], MultiSelect.prototype, "enabled", void 0);
15245
15284
  __decorate$5([
15246
- Property(false)
15285
+ Property(true)
15247
15286
  ], MultiSelect.prototype, "enableHtmlSanitizer", void 0);
15248
15287
  __decorate$5([
15249
15288
  Property([])
@@ -16041,6 +16080,13 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
16041
16080
  * @returns {void}
16042
16081
  */
16043
16082
  ListBox.prototype.render = function () {
16083
+ if (this.isAngular && this.allowFiltering) {
16084
+ var originalElement = this.element;
16085
+ var clonedElement = originalElement.cloneNode(true);
16086
+ originalElement.parentNode.replaceChild(clonedElement, originalElement);
16087
+ this.element = clonedElement;
16088
+ setValue('ej2_instances', [this], this.element);
16089
+ }
16044
16090
  this.inputString = '';
16045
16091
  this.initLoad = true;
16046
16092
  this.isCustomFiltering = false;
@@ -19103,6 +19149,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
19103
19149
  _this.inputElement.parentElement.parentElement.classList.contains('e-richtexteditor')) {
19104
19150
  if (popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {
19105
19151
  popupEle_1.firstElementChild.setAttribute('aria-owns', _this.inputElement.parentElement.parentElement.id);
19152
+ addClass([popupEle_1], 'e-rte-elements');
19106
19153
  }
19107
19154
  }
19108
19155
  if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||