@syncfusion/ej2-dropdowns 26.2.7 → 26.2.9

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 (109) hide show
  1. package/dist/ej2-dropdowns.min.js +2 -2
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +89 -52
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +89 -52
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +8 -8
  12. package/src/combo-box/combo-box.js +33 -2
  13. package/src/common/virtual-scroll.js +5 -7
  14. package/src/drop-down-base/drop-down-base.js +10 -5
  15. package/src/drop-down-list/drop-down-list.js +4 -1
  16. package/src/list-box/list-box.js +20 -30
  17. package/src/mention/mention.js +2 -2
  18. package/src/multi-select/checkbox-selection.js +3 -1
  19. package/src/multi-select/multi-select.js +12 -4
  20. package/styles/auto-complete/fluent2.css +3 -1031
  21. package/styles/auto-complete/material3-dark.css +1 -54
  22. package/styles/auto-complete/material3.css +2 -109
  23. package/styles/bootstrap-dark.css +9 -0
  24. package/styles/bootstrap.css +9 -0
  25. package/styles/bootstrap4.css +9 -0
  26. package/styles/bootstrap5-dark.css +9 -0
  27. package/styles/bootstrap5.css +9 -0
  28. package/styles/combo-box/fluent2.css +3 -1031
  29. package/styles/combo-box/material3-dark.css +1 -54
  30. package/styles/combo-box/material3.css +2 -109
  31. package/styles/drop-down-base/_theme.scss +2 -0
  32. package/styles/drop-down-base/bootstrap-dark.css +2 -0
  33. package/styles/drop-down-base/bootstrap.css +2 -0
  34. package/styles/drop-down-base/bootstrap4.css +2 -0
  35. package/styles/drop-down-base/bootstrap5-dark.css +2 -0
  36. package/styles/drop-down-base/bootstrap5.css +2 -0
  37. package/styles/drop-down-base/fabric-dark.css +2 -0
  38. package/styles/drop-down-base/fabric.css +2 -0
  39. package/styles/drop-down-base/fluent-dark.css +2 -0
  40. package/styles/drop-down-base/fluent.css +2 -0
  41. package/styles/drop-down-base/fluent2.css +7 -1033
  42. package/styles/drop-down-base/highcontrast-light.css +2 -0
  43. package/styles/drop-down-base/highcontrast.css +2 -0
  44. package/styles/drop-down-base/material-dark.css +2 -0
  45. package/styles/drop-down-base/material.css +2 -0
  46. package/styles/drop-down-base/material3-dark.css +3 -54
  47. package/styles/drop-down-base/material3.css +5 -110
  48. package/styles/drop-down-base/tailwind-dark.css +2 -0
  49. package/styles/drop-down-base/tailwind.css +2 -0
  50. package/styles/drop-down-list/fluent2.css +5 -1033
  51. package/styles/drop-down-list/material3-dark.css +1 -54
  52. package/styles/drop-down-list/material3.css +3 -110
  53. package/styles/drop-down-tree/fluent2.css +3 -1031
  54. package/styles/drop-down-tree/material3-dark.css +1 -54
  55. package/styles/drop-down-tree/material3.css +2 -109
  56. package/styles/fabric-dark.css +9 -0
  57. package/styles/fabric.css +9 -0
  58. package/styles/fluent-dark.css +9 -0
  59. package/styles/fluent.css +9 -0
  60. package/styles/fluent2.css +14 -1033
  61. package/styles/highcontrast-light.css +9 -0
  62. package/styles/highcontrast.css +9 -0
  63. package/styles/list-box/_layout.scss +6 -0
  64. package/styles/list-box/bootstrap-dark.css +6 -0
  65. package/styles/list-box/bootstrap.css +6 -0
  66. package/styles/list-box/bootstrap4.css +6 -0
  67. package/styles/list-box/bootstrap5-dark.css +6 -0
  68. package/styles/list-box/bootstrap5.css +6 -0
  69. package/styles/list-box/fabric-dark.css +6 -0
  70. package/styles/list-box/fabric.css +6 -0
  71. package/styles/list-box/fluent-dark.css +6 -0
  72. package/styles/list-box/fluent.css +6 -0
  73. package/styles/list-box/fluent2.css +9 -1031
  74. package/styles/list-box/highcontrast-light.css +6 -0
  75. package/styles/list-box/highcontrast.css +6 -0
  76. package/styles/list-box/material-dark.css +6 -0
  77. package/styles/list-box/material.css +6 -0
  78. package/styles/list-box/material3-dark.css +7 -54
  79. package/styles/list-box/material3.css +8 -109
  80. package/styles/list-box/tailwind-dark.css +6 -0
  81. package/styles/list-box/tailwind.css +6 -0
  82. package/styles/material-dark.css +9 -0
  83. package/styles/material.css +9 -0
  84. package/styles/material3-dark.css +10 -54
  85. package/styles/material3.css +12 -110
  86. package/styles/mention/fluent2.css +3 -1031
  87. package/styles/mention/material3-dark.css +1 -54
  88. package/styles/mention/material3.css +2 -109
  89. package/styles/multi-select/_layout.scss +1 -0
  90. package/styles/multi-select/bootstrap-dark.css +1 -0
  91. package/styles/multi-select/bootstrap.css +1 -0
  92. package/styles/multi-select/bootstrap4.css +1 -0
  93. package/styles/multi-select/bootstrap5-dark.css +1 -0
  94. package/styles/multi-select/bootstrap5.css +1 -0
  95. package/styles/multi-select/fabric-dark.css +1 -0
  96. package/styles/multi-select/fabric.css +1 -0
  97. package/styles/multi-select/fluent-dark.css +1 -0
  98. package/styles/multi-select/fluent.css +1 -0
  99. package/styles/multi-select/fluent2.css +6 -1033
  100. package/styles/multi-select/highcontrast-light.css +1 -0
  101. package/styles/multi-select/highcontrast.css +1 -0
  102. package/styles/multi-select/material-dark.css +1 -0
  103. package/styles/multi-select/material.css +1 -0
  104. package/styles/multi-select/material3-dark.css +2 -54
  105. package/styles/multi-select/material3.css +4 -110
  106. package/styles/multi-select/tailwind-dark.css +1 -0
  107. package/styles/multi-select/tailwind.css +1 -0
  108. package/styles/tailwind-dark.css +9 -0
  109. package/styles/tailwind.css +9 -0
@@ -691,10 +691,8 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
691
691
  else if (this.parent.isScrollActionTriggered) {
692
692
  this.parent.isPreventKeyAction = false;
693
693
  this.parent.isScrollActionTriggered = false;
694
- var virtualListCount = this.parent.list.querySelectorAll('.e-virtual-list').length;
695
- var listElement = this.parent.list.querySelector('.' + 'e-list-item');
696
- var translateY = scrollArgs.offset.top - (listElement.offsetHeight * virtualListCount);
697
- this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0].style.transform = "translate(0px," + translateY + "px)";
694
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
695
+ this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.parent.getTransformValues();
698
696
  }
699
697
  this.parent.previousInfo = this.parent.viewPortInfo;
700
698
  }
@@ -728,13 +726,13 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
728
726
  }
729
727
  }
730
728
  else if (infoType.direction === 'up') {
731
- if (infoType.startIndex && infoType.endIndex) {
729
+ if ((infoType.startIndex && infoType.endIndex) || (Math.ceil(exactTopIndex) > this.parent.previousStartIndex)) {
732
730
  var loadAtIndex = Math.round(((infoType.startIndex * rowHeight) + (pageSizeBy4 * rowHeight)) / rowHeight);
733
- if (exactTopIndex < loadAtIndex) {
731
+ if (exactTopIndex < loadAtIndex || (Math.ceil(exactTopIndex) > this.parent.previousStartIndex)) {
734
732
  var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
735
733
  (infoViewIndices + infoViewIndices / 4);
736
734
  var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
737
- infoType.endIndex = (eIndex < totalItemCount || this.component == "multiselect") ? eIndex : totalItemCount;
735
+ infoType.endIndex = (eIndex < totalItemCount) ? eIndex : totalItemCount;
738
736
  var sIndex = infoType.endIndex - this.parent.virtualItemCount;
739
737
  infoType.startIndex = sIndex > 0 ? sIndex : 0;
740
738
  infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
@@ -1122,7 +1120,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1122
1120
  }
1123
1121
  }
1124
1122
  else {
1125
- if (noDataElement[i] instanceof HTMLElement || noDataElement[i] instanceof Text) {
1123
+ if (noDataElement[i] instanceof HTMLElement || ((noDataElement[i] instanceof Text) && (noDataElement[i]).textContent !== '')) {
1126
1124
  ele.appendChild(noDataElement[i]);
1127
1125
  }
1128
1126
  }
@@ -1929,10 +1927,15 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1929
1927
  }
1930
1928
  };
1931
1929
  DropDownBase.prototype.getPageCount = function (returnExactCount) {
1932
- var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
1933
- getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
1934
- var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
1935
- return returnExactCount ? pageCount : Math.round(pageCount);
1930
+ if (this.list) {
1931
+ var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
1932
+ getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
1933
+ var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
1934
+ return returnExactCount ? pageCount : Math.round(pageCount);
1935
+ }
1936
+ else {
1937
+ return 0;
1938
+ }
1936
1939
  };
1937
1940
  DropDownBase.prototype.updateGroupHeader = function (index, liCollections, target) {
1938
1941
  if (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.group)) {
@@ -5996,9 +5999,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5996
5999
  DropDownList.prototype.checkData = function (newProp) {
5997
6000
  if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource)) && this.itemTemplate && this.allowFiltering &&
5998
6001
  !(this.isListSearched && (newProp.dataSource instanceof DataManager))) {
5999
- if (this.list) {
6002
+ if (this.list && !(this.isReact)) {
6000
6003
  this.list.innerHTML = '';
6001
6004
  }
6005
+ else {
6006
+ this.list = null;
6007
+ }
6002
6008
  this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };
6003
6009
  }
6004
6010
  this.isListSearched = false;
@@ -10265,10 +10271,41 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
10265
10271
  value = this.allowObjectBinding && !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
10266
10272
  var inputValue = isNullOrUndefined(value) ? null : value.toString();
10267
10273
  Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
10274
+ var changeData = {};
10268
10275
  if (this.allowObjectBinding) {
10269
10276
  value = this.getDataByValue(value);
10277
+ if (isNullOrUndefined(value)) {
10278
+ var fields_1 = this.fields;
10279
+ var isvalidTextField_1 = false;
10280
+ var isValidValue_1 = false;
10281
+ if (this.allowObjectBinding) {
10282
+ var keys = Object.keys(this.value);
10283
+ keys.forEach(function (key) {
10284
+ if (key === fields_1.value) {
10285
+ isValidValue_1 = true;
10286
+ return;
10287
+ }
10288
+ });
10289
+ keys.forEach(function (key) {
10290
+ if (key === fields_1.text) {
10291
+ isvalidTextField_1 = true;
10292
+ return;
10293
+ }
10294
+ });
10295
+ }
10296
+ changeData = {
10297
+ text: isValidValue_1 ? isvalidTextField_1 ? getValue(fields_1.text, this.value) : getValue(fields_1.value, this.value) : null,
10298
+ value: isValidValue_1 ? this.value : null,
10299
+ index: null
10300
+ };
10301
+ }
10302
+ }
10303
+ if (this.allowObjectBinding) {
10304
+ this.setProperties(changeData, true);
10305
+ }
10306
+ else {
10307
+ this.setProperties({ value: value, text: value, index: null }, true);
10270
10308
  }
10271
- this.setProperties({ value: value, text: value, index: null }, true);
10272
10309
  this.activeIndex = this.index;
10273
10310
  var fields = this.fields;
10274
10311
  var dataItem = {};
@@ -10808,7 +10845,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
10808
10845
  }
10809
10846
  }
10810
10847
  }
10811
- else if (this.allowCustom) {
10848
+ else if (this.allowCustom && this.isInteracted) {
10812
10849
  this.isSelectCustom = true;
10813
10850
  }
10814
10851
  };
@@ -13223,7 +13260,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
13223
13260
  MultiSelect.prototype.expandTextbox = function () {
13224
13261
  var size = 5;
13225
13262
  if (this.placeholder) {
13226
- size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length;
13263
+ var codePoint = this.placeholder.charCodeAt(0);
13264
+ var sizeMultiplier = (0xAC00 <= codePoint && codePoint <= 0xD7AF) ? 1.5 : (0x4E00 <= codePoint && codePoint <= 0x9FFF) ? 2 : 1;
13265
+ size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length * sizeMultiplier;
13227
13266
  }
13228
13267
  if (this.inputElement.value.length > size) {
13229
13268
  this.inputElement.size = this.inputElement.value.length;
@@ -14902,7 +14941,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14902
14941
  if (this.mode === 'CheckBox') {
14903
14942
  this.refreshPlaceHolder();
14904
14943
  this.refreshInputHight();
14905
- if (!this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {
14944
+ if (this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {
14906
14945
  this.updateValueState(e, this.value, this.tempValues);
14907
14946
  }
14908
14947
  }
@@ -16621,6 +16660,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
16621
16660
  if (!this.closePopupOnSelect && this.isPopupOpen()) {
16622
16661
  this.refreshPopup();
16623
16662
  }
16663
+ if (this.isPopupOpen() && this.mode === 'CheckBox' && this.list && this.list.querySelector('.e-active.e-disable')) {
16664
+ var activeItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active' + '.e-disable');
16665
+ removeClass(activeItems, 'e-disable');
16666
+ }
16624
16667
  this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
16625
16668
  break;
16626
16669
  case 'width':
@@ -17277,8 +17320,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
17277
17320
  if (e.result.length > 0) {
17278
17321
  listItems_2 = e.result;
17279
17322
  _this.initStatus = false;
17280
- _this.initialValueUpdate(listItems_2, true);
17281
- _this.initialUpdate();
17323
+ setTimeout(function () {
17324
+ _this.initialValueUpdate(listItems_2, true);
17325
+ _this.initialUpdate();
17326
+ }, 100);
17282
17327
  _this.initStatus = true;
17283
17328
  }
17284
17329
  });
@@ -18197,7 +18242,9 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
18197
18242
  if (l10n.getConstant('selectAllText') === '') {
18198
18243
  l10n = new L10n('dropdowns', l10nLocale, this.parent.locale);
18199
18244
  }
18200
- this.selectAllSpan.textContent = unSelect ? l10n.getConstant('unSelectAllText') : l10n.getConstant('selectAllText');
18245
+ if (!isNullOrUndefined(this.selectAllSpan)) {
18246
+ this.selectAllSpan.textContent = unSelect ? l10n.getConstant('unSelectAllText') : l10n.getConstant('selectAllText');
18247
+ }
18201
18248
  }
18202
18249
  };
18203
18250
  CheckBoxSelection.prototype.getActiveList = function (args) {
@@ -18409,7 +18456,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
18409
18456
  this.list.setAttribute('role', 'listbox');
18410
18457
  attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
18411
18458
  this.updateSelectionSettings();
18412
- this.resizeHandler();
18413
18459
  };
18414
18460
  ListBox.prototype.updateSelectionSettings = function () {
18415
18461
  if (this.selectionSettings.showCheckbox && this.selectionSettings.showSelectAll && this.liCollections.length) {
@@ -18657,7 +18703,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
18657
18703
  filterElem = this.list.getElementsByClassName('e-input-filter')[0];
18658
18704
  filterElem.selectionStart = txtLength;
18659
18705
  filterElem.selectionEnd = txtLength;
18660
- filterElem.focus();
18706
+ if (filterElem.value !== '') {
18707
+ filterElem.focus();
18708
+ }
18661
18709
  }
18662
18710
  }
18663
18711
  if (this.toolbarSettings.items.length && this.scope && this.scope.indexOf('#') > -1 && !isNullOrUndefined(e)) {
@@ -19108,33 +19156,22 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
19108
19156
  items = (items instanceof Array ? items : [items]);
19109
19157
  var fields = this.fields;
19110
19158
  var dataValue = void 0;
19111
- var objValue = void 0;
19159
+ var objValue = {};
19112
19160
  var dupData = [];
19113
- var itemIdx = void 0;
19114
19161
  extend(dupData, [], this.jsonData);
19115
19162
  var removeIdxes = [];
19116
19163
  var removeLiIdxes = [];
19164
+ for (var i = 0; i < dupData.length; i++) {
19165
+ var value = (dupData[i] instanceof Object) ? dupData[i][fields.value] : dupData[i].toString();
19166
+ objValue[value] = i;
19167
+ }
19117
19168
  for (var j = 0; j < items.length; j++) {
19118
- if (items[j] instanceof Object) {
19119
- dataValue = getValue(fields.value, items[j]);
19120
- }
19121
- else {
19122
- dataValue = items[j].toString();
19123
- }
19124
- for (var i = 0, len = dupData.length; i < len; i++) {
19125
- if (dupData[i] instanceof Object) {
19126
- objValue = getValue(fields.value, dupData[i]);
19127
- }
19128
- else {
19129
- objValue = dupData[i].toString();
19130
- }
19131
- if (objValue === dataValue) {
19132
- itemIdx = this.getIndexByValue(dataValue);
19133
- var idx = itemIdx === i ? itemIdx : i;
19134
- liCollections.push(liElement[idx]);
19135
- removeIdxes.push(idx);
19136
- removeLiIdxes.push(idx);
19137
- }
19169
+ dataValue = (items[j] instanceof Object) ? items[j][fields.value] : items[j].toString();
19170
+ if (objValue.hasOwnProperty(dataValue)) {
19171
+ var idx = objValue[dataValue];
19172
+ liCollections.push(liElement[idx]);
19173
+ removeIdxes.push(idx);
19174
+ removeLiIdxes.push(idx);
19138
19175
  }
19139
19176
  }
19140
19177
  for (var k = removeIdxes.length - 1; k >= 0; k--) {
@@ -19493,6 +19530,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
19493
19530
  }
19494
19531
  this.inputString = this.filterInput.value;
19495
19532
  this.filterWireEvents();
19533
+ this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');
19496
19534
  return filterInputObj;
19497
19535
  }
19498
19536
  };
@@ -20308,11 +20346,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
20308
20346
  };
20309
20347
  ListBox.prototype.resizeHandler = function () {
20310
20348
  if (this.list && !(this.cssClass && this.cssClass.indexOf('e-horizontal-listbox') > -1)) {
20311
- if (this.list.scrollWidth > this.list.offsetWidth) {
20312
- this.list.querySelector('.e-list-parent').style.display = 'inline-block';
20313
- }
20314
- else {
20315
- this.list.querySelector('.e-list-parent').style.display = 'block';
20349
+ if (this.list.getElementsByClassName('e-filter-parent').length > 0 && this.allowFiltering) {
20350
+ this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');
20316
20351
  }
20317
20352
  }
20318
20353
  };
@@ -20655,7 +20690,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
20655
20690
  this.initDraggable();
20656
20691
  }
20657
20692
  else {
20658
- getComponent(this.ulElement, 'sortable').destroy();
20693
+ if (this.ulElement.classList.contains("e-sortable")) {
20694
+ getComponent(this.ulElement, 'sortable').destroy();
20695
+ }
20659
20696
  }
20660
20697
  break;
20661
20698
  case 'allowFiltering':
@@ -22144,10 +22181,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
22144
22181
  }
22145
22182
  if (this.isContentEditable(this.inputElement)) {
22146
22183
  if (Browser.isAndroid) {
22147
- return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
22184
+ return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '&#8203;');
22148
22185
  }
22149
22186
  else {
22150
- return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
22187
+ return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '&#8203;');
22151
22188
  }
22152
22189
  }
22153
22190
  else {