@syncfusion/ej2-dropdowns 19.4.48 → 19.4.50

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 (42) hide show
  1. package/CHANGELOG.md +12 -0
  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 +47 -5
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +124 -77
  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/drop-down-base/drop-down-base.js +10 -0
  13. package/src/drop-down-list/drop-down-list.js +106 -71
  14. package/src/list-box/list-box.js +4 -3
  15. package/src/multi-select/multi-select.js +1 -0
  16. package/styles/bootstrap-dark.css +2 -1
  17. package/styles/bootstrap.css +2 -1
  18. package/styles/bootstrap4.css +2 -1
  19. package/styles/bootstrap5-dark.css +2 -1
  20. package/styles/bootstrap5.css +2 -1
  21. package/styles/fabric-dark.css +2 -1
  22. package/styles/fabric.css +2 -1
  23. package/styles/highcontrast-light.css +2 -1
  24. package/styles/highcontrast.css +2 -1
  25. package/styles/material-dark.css +2 -1
  26. package/styles/material.css +2 -1
  27. package/styles/multi-select/_layout.scss +2 -1
  28. package/styles/multi-select/bootstrap-dark.css +2 -1
  29. package/styles/multi-select/bootstrap.css +2 -1
  30. package/styles/multi-select/bootstrap4.css +2 -1
  31. package/styles/multi-select/bootstrap5-dark.css +2 -1
  32. package/styles/multi-select/bootstrap5.css +2 -1
  33. package/styles/multi-select/fabric-dark.css +2 -1
  34. package/styles/multi-select/fabric.css +2 -1
  35. package/styles/multi-select/highcontrast-light.css +2 -1
  36. package/styles/multi-select/highcontrast.css +2 -1
  37. package/styles/multi-select/material-dark.css +2 -1
  38. package/styles/multi-select/material.css +2 -1
  39. package/styles/multi-select/tailwind-dark.css +2 -1
  40. package/styles/multi-select/tailwind.css +2 -1
  41. package/styles/tailwind-dark.css +2 -1
  42. package/styles/tailwind.css +2 -1
@@ -216,6 +216,7 @@ const HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
216
216
  const FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';
217
217
  const NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';
218
218
  const ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';
219
+ const HIDE_GROUPLIST = 'e-hide-group-header';
219
220
  /**
220
221
  * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components
221
222
  */
@@ -724,6 +725,15 @@ let DropDownBase = class DropDownBase extends Component {
724
725
  }
725
726
  this.list.innerHTML = '';
726
727
  this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
728
+ if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
729
+ for (let i = 0; i < ulElement.childElementCount; i++) {
730
+ if (ulElement.children[i].classList.contains('e-list-group-item')) {
731
+ if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML == "") {
732
+ addClass([ulElement.children[i]], HIDE_GROUPLIST);
733
+ }
734
+ }
735
+ }
736
+ }
727
737
  this.list.appendChild(ulElement);
728
738
  this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
729
739
  this.ulElement = this.list.querySelector('ul');
@@ -772,7 +782,7 @@ let DropDownBase = class DropDownBase extends Component {
772
782
  const tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
773
783
  //EJ2-55168- Group checkbox is not working with group template
774
784
  if (this.isGroupChecking) {
775
- for (var i = 0; i < tempHeaders.length; i++) {
785
+ for (let i = 0; i < tempHeaders.length; i++) {
776
786
  this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
777
787
  }
778
788
  }
@@ -782,7 +792,7 @@ let DropDownBase = class DropDownBase extends Component {
782
792
  const tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
783
793
  //EJ2-55168- Group checkbox is not working with group template
784
794
  if (this.isGroupChecking) {
785
- for (var i = 0; i < tempHeaders.length; i++) {
795
+ for (let i = 0; i < tempHeaders.length; i++) {
786
796
  this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
787
797
  }
788
798
  }
@@ -3680,6 +3690,21 @@ let DropDownList = class DropDownList extends DropDownBase {
3680
3690
  this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
3681
3691
  this.setSelectionData(newProp.text, oldProp.text, 'text');
3682
3692
  }
3693
+ else if (newProp.text && this.dataSource instanceof DataManager) {
3694
+ const listLength = this.getItems().length;
3695
+ const checkField = isNullOrUndefined(this.fields.text) ? this.fields.value : this.fields.text;
3696
+ this.typedString = '';
3697
+ this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', newProp.text)))
3698
+ .then((e) => {
3699
+ if (e.result.length > 0) {
3700
+ this.addItem(e.result, listLength);
3701
+ this.updateValues();
3702
+ }
3703
+ else {
3704
+ this.setOldText(oldProp.text);
3705
+ }
3706
+ });
3707
+ }
3683
3708
  else {
3684
3709
  this.setOldText(oldProp.text);
3685
3710
  }
@@ -3706,6 +3731,21 @@ let DropDownList = class DropDownList extends DropDownBase {
3706
3731
  this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
3707
3732
  this.setSelectionData(newProp.value, oldProp.value, 'value');
3708
3733
  }
3734
+ else if (newProp.value && this.dataSource instanceof DataManager) {
3735
+ const listLength = this.getItems().length;
3736
+ const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
3737
+ this.typedString = '';
3738
+ this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', newProp.value)))
3739
+ .then((e) => {
3740
+ if (e.result.length > 0) {
3741
+ this.addItem(e.result, listLength);
3742
+ this.updateValues();
3743
+ }
3744
+ else {
3745
+ this.setOldValue(oldProp.value);
3746
+ }
3747
+ });
3748
+ }
3709
3749
  else {
3710
3750
  this.setOldValue(oldProp.value);
3711
3751
  }
@@ -12509,6 +12549,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
12509
12549
  this.mainData = null;
12510
12550
  this.filterParent = null;
12511
12551
  this.ulElement = null;
12552
+ this.mainListCollection = null;
12512
12553
  super.destroy();
12513
12554
  const temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
12514
12555
  let length = temp.length;
@@ -13925,9 +13966,10 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
13925
13966
  }
13926
13967
  if (objValue === dataValue) {
13927
13968
  itemIdx = this.getIndexByValue(dataValue);
13928
- liCollections.push(liElement[itemIdx]);
13929
- removeIdxes.push(i);
13930
- removeLiIdxes.push(itemIdx);
13969
+ const idx = itemIdx === i ? itemIdx : i;
13970
+ liCollections.push(liElement[idx]);
13971
+ removeIdxes.push(idx);
13972
+ removeLiIdxes.push(idx);
13931
13973
  }
13932
13974
  }
13933
13975
  }