@syncfusion/ej2-dropdowns 25.2.4 → 25.2.6

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 (73) hide show
  1. package/CHANGELOG.md +32 -0
  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 +59 -25
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +59 -25
  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 +9 -9
  13. package/src/drop-down-base/drop-down-base.d.ts +1 -1
  14. package/src/drop-down-base/drop-down-base.js +22 -11
  15. package/src/drop-down-list/drop-down-list.d.ts +1 -0
  16. package/src/drop-down-list/drop-down-list.js +31 -8
  17. package/src/drop-down-tree/drop-down-tree.js +2 -3
  18. package/src/multi-select/float-label.js +1 -0
  19. package/src/multi-select/multi-select.js +3 -3
  20. package/styles/bootstrap-dark.css +3 -0
  21. package/styles/bootstrap.css +3 -0
  22. package/styles/bootstrap4.css +3 -0
  23. package/styles/bootstrap5-dark.css +3 -0
  24. package/styles/bootstrap5.css +3 -0
  25. package/styles/drop-down-tree/_bds-definition.scss +1 -0
  26. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +2 -1
  27. package/styles/drop-down-tree/_bootstrap-definition.scss +2 -1
  28. package/styles/drop-down-tree/_bootstrap4-definition.scss +2 -1
  29. package/styles/drop-down-tree/_bootstrap5-definition.scss +2 -1
  30. package/styles/drop-down-tree/_fabric-dark-definition.scss +2 -1
  31. package/styles/drop-down-tree/_fabric-definition.scss +2 -1
  32. package/styles/drop-down-tree/_fluent-definition.scss +2 -1
  33. package/styles/drop-down-tree/_fusionnew-definition.scss +2 -1
  34. package/styles/drop-down-tree/_highcontrast-definition.scss +2 -1
  35. package/styles/drop-down-tree/_highcontrast-light-definition.scss +2 -1
  36. package/styles/drop-down-tree/_material-dark-definition.scss +2 -1
  37. package/styles/drop-down-tree/_material-definition.scss +2 -1
  38. package/styles/drop-down-tree/_material3-definition.scss +1 -0
  39. package/styles/drop-down-tree/_tailwind-definition.scss +1 -0
  40. package/styles/drop-down-tree/_theme.scss +3 -0
  41. package/styles/drop-down-tree/bootstrap-dark.css +3 -0
  42. package/styles/drop-down-tree/bootstrap.css +3 -0
  43. package/styles/drop-down-tree/bootstrap4.css +3 -0
  44. package/styles/drop-down-tree/bootstrap5-dark.css +3 -0
  45. package/styles/drop-down-tree/bootstrap5.css +3 -0
  46. package/styles/drop-down-tree/fabric-dark.css +3 -0
  47. package/styles/drop-down-tree/fabric.css +3 -0
  48. package/styles/drop-down-tree/fluent-dark.css +3 -0
  49. package/styles/drop-down-tree/fluent.css +3 -0
  50. package/styles/drop-down-tree/highcontrast-light.css +3 -0
  51. package/styles/drop-down-tree/highcontrast.css +3 -0
  52. package/styles/drop-down-tree/material-dark.css +3 -0
  53. package/styles/drop-down-tree/material.css +3 -0
  54. package/styles/drop-down-tree/material3-dark.css +3 -0
  55. package/styles/drop-down-tree/material3.css +3 -0
  56. package/styles/drop-down-tree/tailwind-dark.css +3 -0
  57. package/styles/drop-down-tree/tailwind.css +3 -0
  58. package/styles/fabric-dark.css +3 -0
  59. package/styles/fabric.css +3 -0
  60. package/styles/fluent-dark.css +3 -0
  61. package/styles/fluent.css +3 -0
  62. package/styles/highcontrast-light.css +3 -0
  63. package/styles/highcontrast.css +3 -0
  64. package/styles/material-dark.css +3 -0
  65. package/styles/material.css +3 -0
  66. package/styles/material3-dark.css +13 -7
  67. package/styles/material3.css +13 -7
  68. package/styles/multi-select/_layout.scss +2 -2
  69. package/styles/multi-select/icons/_material3.scss +8 -5
  70. package/styles/multi-select/material3-dark.css +10 -7
  71. package/styles/multi-select/material3.css +10 -7
  72. package/styles/tailwind-dark.css +3 -0
  73. package/styles/tailwind.css +3 -0
@@ -1940,10 +1940,14 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1940
1940
  }
1941
1941
  };
1942
1942
  DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
1943
- this.fixedHeaderElement.innerHTML = element.innerHTML;
1944
- this.fixedHeaderElement.style.position = 'fixed';
1945
- this.fixedHeaderElement.style.top = this.list.parentElement.offsetTop + this.list.offsetTop + 'px';
1946
- this.fixedHeaderElement.style.display = 'block';
1943
+ if (this.fixedHeaderElement) {
1944
+ if (!isNullOrUndefined(element.innerHTML)) {
1945
+ this.fixedHeaderElement.innerHTML = element.innerHTML;
1946
+ }
1947
+ this.fixedHeaderElement.style.position = 'fixed';
1948
+ this.fixedHeaderElement.style.top = (this.list.parentElement.offsetTop + this.list.offsetTop) - window.scrollY + 'px';
1949
+ this.fixedHeaderElement.style.display = 'block';
1950
+ }
1947
1951
  };
1948
1952
  DropDownBase.prototype.getValidLi = function () {
1949
1953
  if (this.isVirtualizationEnabled) {
@@ -2134,9 +2138,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
2134
2138
  * @param {string | number | boolean} value - Specifies given value.
2135
2139
  * @returns {number} Returns the index of the item.
2136
2140
  */
2137
- DropDownBase.prototype.getIndexByValueFilter = function (value) {
2141
+ DropDownBase.prototype.getIndexByValueFilter = function (value, ulElement) {
2138
2142
  var index;
2139
- var listItems = this.renderItems(this.dataSource, this.fields).querySelectorAll('li' + ':not(.e-list-group-item)');
2143
+ if (!ulElement) {
2144
+ return null;
2145
+ }
2146
+ var listItems = ulElement.querySelectorAll('li' + ':not(.e-list-group-item)');
2140
2147
  if (listItems) {
2141
2148
  for (var i = 0; i < listItems.length; i++) {
2142
2149
  if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
@@ -2301,6 +2308,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
2301
2308
  var group = this.element.querySelector('select>optgroup');
2302
2309
  if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {
2303
2310
  EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);
2311
+ EventHandler.add(document, 'scroll', this.updateGroupFixedHeader, this);
2304
2312
  }
2305
2313
  if (this.getModuleName() === 'dropdownbase') {
2306
2314
  if (this.element.getAttribute('tabindex')) {
@@ -2554,12 +2562,15 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
2554
2562
  * @returns {void}
2555
2563
  */
2556
2564
  DropDownBase.prototype.destroy = function () {
2557
- if (document.body.contains(this.list)) {
2558
- EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
2559
- if (!isNullOrUndefined(this.rippleFun)) {
2560
- this.rippleFun();
2565
+ if (document) {
2566
+ EventHandler.remove(document, 'scroll', this.updateGroupFixedHeader);
2567
+ if (document.body.contains(this.list)) {
2568
+ EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
2569
+ if (!isNullOrUndefined(this.rippleFun)) {
2570
+ this.rippleFun();
2571
+ }
2572
+ detach(this.list);
2561
2573
  }
2562
- detach(this.list);
2563
2574
  }
2564
2575
  this.liCollections = null;
2565
2576
  this.ulElement = null;
@@ -2723,6 +2734,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2723
2734
  _this.IsScrollerAtEnd = function () {
2724
2735
  return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
2725
2736
  };
2737
+ _this.removeAllChildren = function (element) {
2738
+ while (element.children[0]) {
2739
+ this.removeAllChildren(element.children[0]);
2740
+ element.removeChild(element.children[0]);
2741
+ }
2742
+ };
2726
2743
  return _this;
2727
2744
  }
2728
2745
  /**
@@ -3612,7 +3629,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3612
3629
  }
3613
3630
  if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
3614
3631
  var value_4 = this.getItemData().value;
3615
- var filterIndex = this.getIndexByValueFilter(value_4);
3632
+ var filterIndex = this.getIndexByValueFilter(value_4, this.actionCompleteData.ulElement);
3616
3633
  if (!isNullOrUndefined(filterIndex)) {
3617
3634
  this.activeIndex = filterIndex;
3618
3635
  }
@@ -3955,7 +3972,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3955
3972
  value = 'null';
3956
3973
  }
3957
3974
  if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
3958
- var filterIndex = this.getIndexByValueFilter(value);
3975
+ var filterIndex = this.getIndexByValueFilter(value, this.actionCompleteData.ulElement);
3959
3976
  if (!isNullOrUndefined(filterIndex)) {
3960
3977
  this.activeIndex = filterIndex;
3961
3978
  }
@@ -3997,7 +4014,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3997
4014
  this.inputElement.style.display = 'block';
3998
4015
  }
3999
4016
  if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
4000
- this.activeIndex = this.getIndexByValueFilter(dataItem.value);
4017
+ this.activeIndex = this.getIndexByValueFilter(dataItem.value, this.actionCompleteData.ulElement);
4001
4018
  }
4002
4019
  var clearIcon = dropDownListClasses.clearIcon;
4003
4020
  var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
@@ -5465,6 +5482,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5465
5482
  this.keyboardEvent = null;
5466
5483
  EventHandler.remove(document, 'mousedown', this.onDocumentClick);
5467
5484
  this.isActive = false;
5485
+ if (this.getModuleName() === 'dropdownlist') {
5486
+ Input.destroy({
5487
+ element: this.filterInput,
5488
+ floatLabelType: this.floatLabelType,
5489
+ properties: { placeholder: this.filterBarPlaceholder },
5490
+ buttons: this.clearIconElement,
5491
+ }, this.clearIconElement);
5492
+ }
5468
5493
  this.filterInputObj = null;
5469
5494
  this.isDropDownClick = false;
5470
5495
  this.preventAutoFill = false;
@@ -5496,6 +5521,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5496
5521
  }
5497
5522
  if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
5498
5523
  this.filterInput.removeAttribute('aria-activedescendant');
5524
+ this.filterInput.removeAttribute('aria-disabled');
5525
+ this.filterInput.removeAttribute('role');
5526
+ this.filterInput.removeAttribute('autocomplete');
5527
+ this.filterInput.removeAttribute('autocapitalize');
5528
+ this.filterInput.removeAttribute('spellcheck');
5499
5529
  }
5500
5530
  this.filterInput = null;
5501
5531
  }
@@ -5923,8 +5953,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5923
5953
  DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {
5924
5954
  var _this = this;
5925
5955
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
5926
- if (!isNullOrUndefined(newProp.dataSource) && !this.isTouched && (isNullOrUndefined(newProp.value) && isNullOrUndefined(newProp.index)) && !isNullOrUndefined(this.preselectedIndex)) {
5927
- newProp.index = this.preselectedIndex;
5956
+ if (!isNullOrUndefined(newProp.dataSource) && !this.isTouched && (isNullOrUndefined(newProp.value) && isNullOrUndefined(newProp.index)) && !isNullOrUndefined(this.preselectedIndex) && !isNullOrUndefined(this.index)) {
5957
+ newProp.index = this.index;
5928
5958
  }
5929
5959
  if (!isNullOrUndefined(newProp.value) || !isNullOrUndefined(newProp.index)) {
5930
5960
  this.isTouched = true;
@@ -6445,10 +6475,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
6445
6475
  this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);
6446
6476
  detach(this.inputWrapper.container);
6447
6477
  }
6448
- this.hiddenElement = null;
6478
+ delete this.hiddenElement;
6449
6479
  this.filterInput = null;
6450
- this.inputWrapper = null;
6451
6480
  this.keyboardModule = null;
6481
+ if (!isNullOrUndefined(this.ulElement)) {
6482
+ this.removeAllChildren(this.ulElement);
6483
+ }
6452
6484
  this.ulElement = null;
6453
6485
  this.list = null;
6454
6486
  this.clearIconElement = null;
@@ -6472,10 +6504,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
6472
6504
  Input.destroy({
6473
6505
  element: this.inputElement,
6474
6506
  floatLabelType: this.floatLabelType,
6475
- properties: this.properties
6507
+ properties: this.properties,
6508
+ buttons: this.inputWrapper.container.querySelectorAll('.e-input-group-icon')[0],
6476
6509
  }, this.clearButton);
6477
6510
  this.clearButton = null;
6478
6511
  this.inputElement = null;
6512
+ this.inputWrapper = null;
6479
6513
  _super.prototype.destroy.call(this);
6480
6514
  };
6481
6515
  /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -7424,7 +7458,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
7424
7458
  }
7425
7459
  break;
7426
7460
  case 'tab':
7427
- case 'shiftTab':
7428
7461
  if (_this.isPopupOpen) {
7429
7462
  _this.hidePopup();
7430
7463
  }
@@ -8571,6 +8604,8 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8571
8604
  if (this.showCheckBox) {
8572
8605
  return;
8573
8606
  }
8607
+ var eventArgs = this.getEventArgs(args);
8608
+ this.trigger('select', eventArgs);
8574
8609
  var selectedText;
8575
8610
  if (args.isInteracted) {
8576
8611
  var id = getValue('id', args.nodeData).toString();
@@ -8598,8 +8633,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8598
8633
  this.setMultiSelect();
8599
8634
  }
8600
8635
  }
8601
- var eventArgs = this.getEventArgs(args);
8602
- this.trigger('select', eventArgs);
8603
8636
  if (this.isValueChange && !this.changeOnBlur) {
8604
8637
  this.triggerChangeEvent(this.keyEventArgs);
8605
8638
  this.isValueChange = false;
@@ -11474,6 +11507,7 @@ function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement,
11474
11507
  element.id = id;
11475
11508
  if (!isNullOrUndefined(element.id) && element.id !== '') {
11476
11509
  floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
11510
+ floatLabelElement.setAttribute('for', element.id);
11477
11511
  attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
11478
11512
  }
11479
11513
  if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
@@ -12107,7 +12141,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12107
12141
  this.updateSelectElementData(this.allowFiltering);
12108
12142
  // eslint-disable-next-line @typescript-eslint/no-this-alias
12109
12143
  var proxy = this;
12110
- if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization) {
12144
+ if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization && this.listData && this.listData.length > 0) {
12111
12145
  for (var i = 0; i < this.value.length; i++) {
12112
12146
  var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', proxy.value[i]) : proxy.value[i];
12113
12147
  var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
@@ -14891,7 +14925,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14891
14925
  if (this.enableVirtualization) {
14892
14926
  listValue = this.findListElement((!isNullOrUndefined(this.list) ? this.list : this.ulElement), 'li', 'data-value', valueItem);
14893
14927
  }
14894
- if (isNullOrUndefined(listValue) && !this.allowCustomValue && !this.enableVirtualization) {
14928
+ if (isNullOrUndefined(listValue) && !this.allowCustomValue && !this.enableVirtualization && this.listData && this.listData.length > 0) {
14895
14929
  this.value.splice(index, 1);
14896
14930
  index -= 1;
14897
14931
  valueLength -= 1;
@@ -15684,7 +15718,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
15684
15718
  downIconWidth = this.dropIcon.offsetWidth + parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);
15685
15719
  }
15686
15720
  this.checkClearIconWidth();
15687
- if (!isNullOrUndefined(this.value)) {
15721
+ if (!isNullOrUndefined(this.value) && (this.allowCustomValue || (this.listData && this.listData.length > 0))) {
15688
15722
  for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
15689
15723
  var items = this.text && this.text.split(this.delimiterChar);
15690
15724
  if (!this.enableVirtualization) {