@syncfusion/ej2-dropdowns 27.1.52 → 27.1.55

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 (76) hide show
  1. package/.eslintrc.json +261 -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 +105 -37
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +105 -37
  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.js +4 -0
  14. package/src/drop-down-list/drop-down-list.js +2 -2
  15. package/src/drop-down-tree/drop-down-tree.js +1 -1
  16. package/src/list-box/list-box.js +8 -2
  17. package/src/multi-select/multi-select.js +90 -32
  18. package/styles/bootstrap-dark-lite.css +1 -0
  19. package/styles/bootstrap-dark.css +1 -0
  20. package/styles/bootstrap-lite.css +1 -0
  21. package/styles/bootstrap.css +1 -0
  22. package/styles/bootstrap4-lite.css +1 -0
  23. package/styles/bootstrap4.css +1 -0
  24. package/styles/bootstrap5-dark-lite.css +1 -0
  25. package/styles/bootstrap5-dark.css +1 -0
  26. package/styles/bootstrap5-lite.css +1 -0
  27. package/styles/bootstrap5.3-lite.css +1 -0
  28. package/styles/bootstrap5.3.css +1 -0
  29. package/styles/bootstrap5.css +1 -0
  30. package/styles/drop-down-list/_layout.scss +1 -0
  31. package/styles/drop-down-list/bootstrap-dark.css +1 -0
  32. package/styles/drop-down-list/bootstrap.css +1 -0
  33. package/styles/drop-down-list/bootstrap4.css +1 -0
  34. package/styles/drop-down-list/bootstrap5-dark.css +1 -0
  35. package/styles/drop-down-list/bootstrap5.3.css +1 -0
  36. package/styles/drop-down-list/bootstrap5.css +1 -0
  37. package/styles/drop-down-list/fabric-dark.css +1 -0
  38. package/styles/drop-down-list/fabric.css +1 -0
  39. package/styles/drop-down-list/fluent-dark.css +1 -0
  40. package/styles/drop-down-list/fluent.css +1 -0
  41. package/styles/drop-down-list/fluent2.css +1 -0
  42. package/styles/drop-down-list/highcontrast-light.css +1 -0
  43. package/styles/drop-down-list/highcontrast.css +1 -0
  44. package/styles/drop-down-list/material-dark.css +1 -0
  45. package/styles/drop-down-list/material.css +1 -0
  46. package/styles/drop-down-list/material3-dark.css +1 -0
  47. package/styles/drop-down-list/material3.css +1 -0
  48. package/styles/drop-down-list/tailwind-dark.css +1 -0
  49. package/styles/drop-down-list/tailwind.css +1 -0
  50. package/styles/fabric-dark-lite.css +1 -0
  51. package/styles/fabric-dark.css +1 -0
  52. package/styles/fabric-lite.css +1 -0
  53. package/styles/fabric.css +1 -0
  54. package/styles/fluent-dark-lite.css +1 -0
  55. package/styles/fluent-dark.css +1 -0
  56. package/styles/fluent-lite.css +1 -0
  57. package/styles/fluent.css +1 -0
  58. package/styles/fluent2-lite.css +1 -0
  59. package/styles/fluent2.css +1 -0
  60. package/styles/highcontrast-light-lite.css +1 -0
  61. package/styles/highcontrast-light.css +1 -0
  62. package/styles/highcontrast-lite.css +1 -0
  63. package/styles/highcontrast.css +1 -0
  64. package/styles/material-dark-lite.css +1 -0
  65. package/styles/material-dark.css +1 -0
  66. package/styles/material-lite.css +1 -0
  67. package/styles/material.css +1 -0
  68. package/styles/material3-dark-lite.css +1 -0
  69. package/styles/material3-dark.css +1 -0
  70. package/styles/material3-lite.css +1 -0
  71. package/styles/material3.css +1 -0
  72. package/styles/tailwind-dark-lite.css +1 -0
  73. package/styles/tailwind-dark.css +1 -0
  74. package/styles/tailwind-lite.css +1 -0
  75. package/styles/tailwind.css +1 -0
  76. package/tslint.json +111 -0
@@ -1957,6 +1957,10 @@ let DropDownBase = class DropDownBase extends Component {
1957
1957
  renderItems(listData, fields, isCheckBoxUpdate) {
1958
1958
  let ulElement;
1959
1959
  if (this.itemTemplate && listData) {
1960
+ if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
1961
+ this.virtualSelectAllData = listData;
1962
+ listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
1963
+ }
1960
1964
  let dataSource = listData;
1961
1965
  if (dataSource && fields.groupBy) {
1962
1966
  if (this.sortOrder !== 'None') {
@@ -5009,7 +5013,7 @@ let DropDownList = class DropDownList extends DropDownBase {
5009
5013
  if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
5010
5014
  const value = this.getItemData().value;
5011
5015
  const isExist = listData.some((data) => {
5012
- return (((typeof data === 'string' || typeof data === 'number') && data === value) ||
5016
+ return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value) ||
5013
5017
  (getValue(this.fields.value, data) === value));
5014
5018
  });
5015
5019
  if (!isExist) {
@@ -5310,7 +5314,7 @@ let DropDownList = class DropDownList extends DropDownBase {
5310
5314
  this.isNotSearchList = false;
5311
5315
  this.isDocumentClick = false;
5312
5316
  this.destroyPopup();
5313
- if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list[0]) {
5317
+ if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.length > 0) {
5314
5318
  this.isActive = true;
5315
5319
  if (this.enableVirtualization) {
5316
5320
  this.onActionComplete(this.ulElement, this.listData, null, true);
@@ -8988,7 +8992,7 @@ let DropDownTree = class DropDownTree extends Component {
8988
8992
  const id = getValue('id', args.data[0]).toString();
8989
8993
  this.removeSelectedData(id, true);
8990
8994
  }
8991
- if (!this.isChipDelete && args.isInteracted) {
8995
+ if (!this.isChipDelete && args.isInteracted || (!this.isFilteredData && args.action === 'check' && this.isFromFilterChange)) {
8992
8996
  this.setMultiSelect();
8993
8997
  this.ensurePlaceHolder();
8994
8998
  }
@@ -14645,7 +14649,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
14645
14649
  const value = this.allowObjectBinding ?
14646
14650
  getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
14647
14651
  this.value[this.value.length - 1];
14648
- const temp = this.getTextByValue(value);
14652
+ const temp = text;
14649
14653
  const textValues = this.text != null && this.text !== '' ? this.text + ',' + temp : temp;
14650
14654
  currentText.push(textValues);
14651
14655
  this.setProperties({ text: currentText.toString() }, true);
@@ -14682,11 +14686,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
14682
14686
  removeClass(collection, 'e-disable');
14683
14687
  }
14684
14688
  }
14685
- dispatchSelect(value, eve, element, isNotTrigger, length) {
14689
+ dispatchSelect(value, eve, element, isNotTrigger, length, dataValue, text) {
14686
14690
  const list = this.listData;
14687
14691
  if (this.initStatus && !isNotTrigger) {
14688
14692
  value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
14689
- const val = this.getDataByValue(value);
14693
+ const val = dataValue ? dataValue : this.getDataByValue(value);
14690
14694
  const eventArgs = {
14691
14695
  e: eve,
14692
14696
  item: element,
@@ -14720,16 +14724,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
14720
14724
  this.selectedListData = [(this.getDataByValue(value))];
14721
14725
  }
14722
14726
  else {
14723
- if (Array.isArray(this.selectedListData)) {
14724
- this.selectedListData.push((this.getDataByValue(value)));
14727
+ if (dataValue) {
14728
+ if (Array.isArray(this.selectedListData)) {
14729
+ this.selectedListData.push(dataValue);
14730
+ }
14731
+ else {
14732
+ this.selectedListData = [this.selectedListData, dataValue];
14733
+ }
14725
14734
  }
14726
14735
  else {
14727
- this.selectedListData = [this.selectedListData, (this.getDataByValue(value))];
14736
+ if (Array.isArray(this.selectedListData)) {
14737
+ this.selectedListData.push((this.getDataByValue(value)));
14738
+ }
14739
+ else {
14740
+ this.selectedListData = [this.selectedListData, (this.getDataByValue(value))];
14741
+ }
14728
14742
  }
14729
14743
  }
14730
14744
  }
14731
14745
  if ((this.enableVirtualization && value) || !this.enableVirtualization) {
14732
- this.updateListSelectEventCallback(value, element, eve);
14746
+ this.updateListSelectEventCallback(value, element, eve, text);
14733
14747
  }
14734
14748
  if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox') {
14735
14749
  super.scrollStop();
@@ -15831,9 +15845,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15831
15845
  this.removeValue(value, e, length);
15832
15846
  }
15833
15847
  }
15834
- updateListSelectEventCallback(value, li, e) {
15848
+ updateListSelectEventCallback(value, li, e, currentText) {
15835
15849
  value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
15836
- const text = this.getTextByValue(value);
15850
+ const text = currentText ? currentText : this.getTextByValue(value);
15837
15851
  if ((this.allowCustomValue || this.allowFiltering) &&
15838
15852
  !this.findListElement(this.mainList, 'li', 'data-value', value) &&
15839
15853
  (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
@@ -16678,7 +16692,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
16678
16692
  if (this.value && obj[this.fields.value] != null && Array.isArray(this.value) &&
16679
16693
  ((!this.allowObjectBinding && this.value.indexOf(obj[this.fields.value]) < 0) ||
16680
16694
  (this.allowObjectBinding && !this.isObjectInArray(obj[this.fields.value], this.value)))) {
16681
- this.dispatchSelect(obj[this.fields.value], event, null, false, length);
16695
+ const value = obj[this.fields.value];
16696
+ const text = (obj[this.fields.text]).toString();
16697
+ this.dispatchSelect(value, event, null, false, length, obj, text);
16682
16698
  }
16683
16699
  });
16684
16700
  }
@@ -16688,7 +16704,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
16688
16704
  this.updateValueState(event, this.value, this.tempValues);
16689
16705
  this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
16690
16706
  }
16691
- this.updateHiddenElement();
16707
+ this.updateHiddenElement(true);
16692
16708
  if (this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
16693
16709
  const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
16694
16710
  if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
@@ -16857,7 +16873,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
16857
16873
  }
16858
16874
  }
16859
16875
  }
16860
- updateHiddenElement() {
16876
+ updateHiddenElement(isVirtualSelectAll) {
16861
16877
  let hiddenValue = '';
16862
16878
  let wrapperText = '';
16863
16879
  let data = '';
@@ -16865,20 +16881,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
16865
16881
  if (this.mode === 'CheckBox') {
16866
16882
  this.value.map((value, index) => {
16867
16883
  hiddenValue += '<option selected value ="' + value + '">' + index + '</option>';
16868
- if (this.listData) {
16869
- data = this.getTextByValue(value);
16870
- }
16871
- else {
16872
- data = value;
16884
+ if (!isVirtualSelectAll) {
16885
+ if (this.listData) {
16886
+ data = this.getTextByValue(value);
16887
+ }
16888
+ else {
16889
+ data = value;
16890
+ }
16891
+ wrapperText += data + this.delimiterChar + ' ';
16892
+ text.push(data);
16873
16893
  }
16874
- wrapperText += data + this.delimiterChar + ' ';
16875
- text.push(data);
16876
16894
  });
16877
16895
  this.hiddenElement.innerHTML = hiddenValue;
16878
- this.updateWrapperText(this.delimiterWrapper, wrapperText);
16896
+ if (!isVirtualSelectAll) {
16897
+ this.updateWrapperText(this.delimiterWrapper, wrapperText);
16898
+ this.setProperties({ text: text.toString() }, true);
16899
+ }
16879
16900
  this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
16880
16901
  this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);
16881
- this.setProperties({ text: text.toString() }, true);
16882
16902
  this.refreshInputHight();
16883
16903
  this.refreshPlaceHolder();
16884
16904
  }
@@ -17898,20 +17918,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
17898
17918
  if (this.isReact) {
17899
17919
  this.clearTemplate();
17900
17920
  }
17901
- if (this.popupObj) {
17921
+ if (!isNullOrUndefined(this.popupObj)) {
17902
17922
  this.popupObj.hide();
17923
+ this.popupObj.destroy();
17903
17924
  }
17904
17925
  this.notify(destroy, {});
17905
17926
  this.unwireListEvents();
17906
17927
  this.unWireEvent();
17907
- this.list = null;
17908
- this.popupObj = null;
17909
- this.mainList = null;
17910
- this.mainData = null;
17911
- this.filterParent = null;
17912
- this.ulElement = null;
17913
- this.mainListCollection = null;
17914
- super.destroy();
17915
17928
  const temp = ['readonly', 'aria-disabled', 'placeholder', 'aria-label', 'aria-expanded'];
17916
17929
  let length = temp.length;
17917
17930
  if (!isNullOrUndefined(this.inputElement)) {
@@ -17933,6 +17946,56 @@ let MultiSelect = class MultiSelect extends DropDownBase {
17933
17946
  remove(this.overAllWrapper);
17934
17947
  }
17935
17948
  }
17949
+ if (this.popupWrapper && this.popupWrapper.parentElement) {
17950
+ this.popupWrapper.parentElement.remove();
17951
+ }
17952
+ while (this.searchWrapper && this.searchWrapper.firstChild) {
17953
+ this.searchWrapper.removeChild(this.searchWrapper.firstChild);
17954
+ }
17955
+ if (this.searchWrapper && this.searchWrapper.parentElement) {
17956
+ this.searchWrapper.parentElement.remove();
17957
+ }
17958
+ if (this.viewWrapper && this.viewWrapper.parentElement) {
17959
+ this.viewWrapper.parentElement.remove();
17960
+ }
17961
+ if (this.overAllClear && this.overAllClear.parentElement) {
17962
+ this.overAllClear.parentElement.remove();
17963
+ }
17964
+ if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {
17965
+ this.delimiterWrapper.parentElement.remove();
17966
+ }
17967
+ // Remove the select element if it exists
17968
+ const selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
17969
+ if (selectElement && selectElement.parentElement) {
17970
+ selectElement.parentElement.remove();
17971
+ }
17972
+ while (this.componentWrapper && this.componentWrapper.firstChild) {
17973
+ this.componentWrapper.removeChild(this.componentWrapper.firstChild);
17974
+ }
17975
+ if (this.componentWrapper && this.componentWrapper.parentElement) {
17976
+ this.componentWrapper.removeAttribute('class');
17977
+ this.componentWrapper.parentElement.remove();
17978
+ }
17979
+ while (this.popupWrapper && this.popupWrapper.firstChild) {
17980
+ this.popupWrapper.removeChild(this.popupWrapper.firstChild);
17981
+ }
17982
+ if (this.inputElement) {
17983
+ const attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
17984
+ 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
17985
+ 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',
17986
+ 'aria-describedby', 'size', 'role', 'type', 'class'];
17987
+ for (let i = 0; i < attrArray.length; i++) {
17988
+ this.inputElement.removeAttribute(attrArray[i]);
17989
+ }
17990
+ }
17991
+ if (this.inputElement) {
17992
+ this.inputElement.remove();
17993
+ }
17994
+ this.list = null;
17995
+ this.popupObj = null;
17996
+ this.mainData = null;
17997
+ this.filterParent = null;
17998
+ this.ulElement = null;
17936
17999
  this.componentWrapper = null;
17937
18000
  this.overAllClear = null;
17938
18001
  this.overAllWrapper = null;
@@ -17944,14 +18007,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
17944
18007
  this.popupWrapper = null;
17945
18008
  this.inputElement = null;
17946
18009
  this.delimiterWrapper = null;
17947
- this.popupObj = null;
17948
- this.popupWrapper = null;
17949
18010
  this.liCollections = null;
17950
18011
  this.header = null;
17951
18012
  this.mainList = null;
17952
18013
  this.mainListCollection = null;
17953
18014
  this.footer = null;
17954
18015
  this.selectAllEventEle = null;
18016
+ super.destroy();
17955
18017
  }
17956
18018
  };
17957
18019
  __decorate$5([
@@ -19363,6 +19425,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
19363
19425
  liCollElem[i].classList.remove('e-grabbed');
19364
19426
  }
19365
19427
  }
19428
+ if (this.toolbarSettings.items.length > 0) {
19429
+ this.updateToolBarState();
19430
+ }
19431
+ else if (this.tBListBox && this.tBListBox.toolbarSettings.items.length > 0) {
19432
+ this.tBListBox.updateToolBarState();
19433
+ }
19366
19434
  }
19367
19435
  updateListItems(sourceElem, destElem) {
19368
19436
  destElem.innerHTML = '';
@@ -19446,9 +19514,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
19446
19514
  li.setAttribute('aria-disabled', 'true');
19447
19515
  }
19448
19516
  });
19449
- if (this.allowFiltering && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {
19517
+ if (this.allowFiltering && this.filterInput && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {
19450
19518
  let canDisable = false;
19451
- this.liCollections.forEach((li) => { if (!li.classList.contains('e-disabled')) {
19519
+ this.ulElement.childNodes.forEach((li) => { if (!li.classList.contains('e-disabled')) {
19452
19520
  canDisable = true;
19453
19521
  } });
19454
19522
  if (!canDisable) {