@syncfusion/ej2-dropdowns 19.4.40 → 19.4.41

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 (95) hide show
  1. package/README.md +1 -1
  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 +73 -32
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +74 -32
  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 -9
  12. package/src/combo-box/combo-box.js +2 -2
  13. package/src/common/incremental-search.d.ts +1 -1
  14. package/src/common/incremental-search.js +1 -1
  15. package/src/drop-down-base/drop-down-base.js +13 -1
  16. package/src/list-box/list-box.d.ts +0 -4
  17. package/src/list-box/list-box.js +0 -3
  18. package/src/multi-select/multi-select-model.d.ts +1 -1
  19. package/src/multi-select/multi-select.d.ts +2 -0
  20. package/src/multi-select/multi-select.js +58 -25
  21. package/styles/auto-complete/_fluent-definition.scss +2 -0
  22. package/styles/auto-complete/bootstrap5-dark.css +0 -1
  23. package/styles/auto-complete/bootstrap5.css +0 -1
  24. package/styles/bootstrap-dark.css +5 -0
  25. package/styles/bootstrap.css +5 -0
  26. package/styles/bootstrap4.css +5 -0
  27. package/styles/bootstrap5-dark.css +17 -6
  28. package/styles/bootstrap5.css +17 -6
  29. package/styles/combo-box/_fluent-definition.scss +2 -0
  30. package/styles/combo-box/bootstrap5-dark.css +0 -1
  31. package/styles/combo-box/bootstrap5.css +0 -1
  32. package/styles/drop-down-base/_fluent-definition.scss +109 -0
  33. package/styles/drop-down-list/_bootstrap5-definition.scss +0 -1
  34. package/styles/drop-down-list/_fluent-definition.scss +193 -0
  35. package/styles/drop-down-list/bootstrap5-dark.css +0 -1
  36. package/styles/drop-down-list/bootstrap5.css +0 -1
  37. package/styles/drop-down-list/icons/_bootstrap5.scss +0 -1
  38. package/styles/drop-down-list/icons/_fluent.scss +14 -0
  39. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -58
  40. package/styles/drop-down-tree/_fluent-definition.scss +71 -0
  41. package/styles/drop-down-tree/_layout.scss +12 -4
  42. package/styles/drop-down-tree/_tailwind-definition.scss +1 -0
  43. package/styles/drop-down-tree/bootstrap5-dark.css +11 -4
  44. package/styles/drop-down-tree/bootstrap5.css +11 -4
  45. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  46. package/styles/drop-down-tree/icons/_fluent.scss +11 -0
  47. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  48. package/styles/drop-down-tree/tailwind-dark.css +1 -0
  49. package/styles/drop-down-tree/tailwind.css +1 -0
  50. package/styles/fabric-dark.css +5 -0
  51. package/styles/fabric.css +5 -0
  52. package/styles/highcontrast-light.css +5 -0
  53. package/styles/highcontrast.css +5 -0
  54. package/styles/list-box/_bootstrap5-definition.scss +2 -2
  55. package/styles/list-box/_fluent-definition.scss +115 -0
  56. package/styles/list-box/_layout.scss +1 -6
  57. package/styles/list-box/bootstrap5-dark.css +1 -1
  58. package/styles/list-box/bootstrap5.css +1 -1
  59. package/styles/list-box/icons/_fluent.scss +25 -0
  60. package/styles/list-box/icons/_tailwind-dark.scss +2 -2
  61. package/styles/list-box/tailwind-dark.css +3 -3
  62. package/styles/list-box/tailwind.css +1 -1
  63. package/styles/material-dark.css +5 -94
  64. package/styles/material.css +5 -94
  65. package/styles/multi-select/_bootstrap-dark-definition.scss +1 -0
  66. package/styles/multi-select/_bootstrap-definition.scss +1 -0
  67. package/styles/multi-select/_bootstrap4-definition.scss +1 -0
  68. package/styles/multi-select/_bootstrap5-definition.scss +1 -0
  69. package/styles/multi-select/_fabric-dark-definition.scss +1 -0
  70. package/styles/multi-select/_fabric-definition.scss +1 -0
  71. package/styles/multi-select/_fluent-definition.scss +215 -0
  72. package/styles/multi-select/_highcontrast-definition.scss +1 -0
  73. package/styles/multi-select/_highcontrast-light-definition.scss +1 -0
  74. package/styles/multi-select/_layout.scss +0 -116
  75. package/styles/multi-select/_material-dark-definition.scss +1 -22
  76. package/styles/multi-select/_material-definition.scss +1 -22
  77. package/styles/multi-select/_tailwind-definition.scss +1 -0
  78. package/styles/multi-select/_theme.scss +5 -0
  79. package/styles/multi-select/bootstrap-dark.css +5 -0
  80. package/styles/multi-select/bootstrap.css +5 -0
  81. package/styles/multi-select/bootstrap4.css +5 -0
  82. package/styles/multi-select/bootstrap5-dark.css +5 -0
  83. package/styles/multi-select/bootstrap5.css +5 -0
  84. package/styles/multi-select/fabric-dark.css +5 -0
  85. package/styles/multi-select/fabric.css +5 -0
  86. package/styles/multi-select/highcontrast-light.css +5 -0
  87. package/styles/multi-select/highcontrast.css +5 -0
  88. package/styles/multi-select/icons/_fluent.scss +27 -0
  89. package/styles/multi-select/material-dark.css +5 -94
  90. package/styles/multi-select/material.css +5 -94
  91. package/styles/multi-select/tailwind-dark.css +5 -0
  92. package/styles/multi-select/tailwind.css +5 -0
  93. package/styles/tailwind-dark.css +9 -3
  94. package/styles/tailwind.css +7 -1
  95. package/styles/_all.scss +0 -3
@@ -91,7 +91,7 @@ function Search(inputVal, items, searchType, ignoreCase) {
91
91
  for (let i = 0, itemsData = listItems; i < itemsData.length; i++) {
92
92
  const item = itemsData[i];
93
93
  const text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
94
- if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {
94
+ if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
95
95
  itemData.item = item;
96
96
  itemData.index = i;
97
97
  return { item: item, index: i };
@@ -636,7 +636,7 @@ let DropDownBase = class DropDownBase extends Component {
636
636
  }
637
637
  this.bindChildItems(localDataArgs.result, ulElement, fields);
638
638
  setTimeout(() => {
639
- if (this.getModuleName() === 'multiselect' && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
639
+ if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
640
640
  this.updateDataList();
641
641
  }
642
642
  });
@@ -770,10 +770,22 @@ let DropDownBase = class DropDownBase extends Component {
770
770
  const groupValue = select(this.groupTemplate, document).innerHTML.trim();
771
771
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
772
772
  const tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
773
+ //EJ2-55168- Group checkbox is not working with group template
774
+ if (this.isGroupChecking) {
775
+ for (var i = 0; i < tempHeaders.length; i++) {
776
+ this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
777
+ }
778
+ }
773
779
  }
774
780
  else {
775
781
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
776
782
  const tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
783
+ //EJ2-55168- Group checkbox is not working with group template
784
+ if (this.isGroupChecking) {
785
+ for (var i = 0; i < tempHeaders.length; i++) {
786
+ this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
787
+ }
788
+ }
777
789
  }
778
790
  this.renderReactTemplates();
779
791
  }
@@ -7441,7 +7453,7 @@ let ComboBox = class ComboBox extends DropDownList {
7441
7453
  if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
7442
7454
  !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
7443
7455
  const inputValue = this.inputElement.value;
7444
- const activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
7456
+ const activeItem = Search(inputValue, this.liCollections, this.filterType, true);
7445
7457
  const activeElement = activeItem.item;
7446
7458
  if (!isNullOrUndefined(activeElement)) {
7447
7459
  const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7598,7 +7610,7 @@ let ComboBox = class ComboBox extends DropDownList {
7598
7610
  else {
7599
7611
  this.activeIndex = null;
7600
7612
  this.removeSelection();
7601
- if (this.liCollections && this.liCollections.length < 0) {
7613
+ if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
7602
7614
  this.removeFocus();
7603
7615
  }
7604
7616
  }
@@ -8987,7 +8999,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
8987
8999
  this.mainData = list;
8988
9000
  this.mainListCollection = this.liCollections;
8989
9001
  }
8990
- else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
9002
+ else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
8991
9003
  this.mainData = list;
8992
9004
  }
8993
9005
  if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -11003,7 +11015,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
11003
11015
  updateActionCompleteData(li, item) {
11004
11016
  if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
11005
11017
  this.mainList = this.ulElement;
11006
- addClass([li], HIDE_LIST);
11018
+ if (this.hideSelectedItem) {
11019
+ addClass([li], HIDE_LIST);
11020
+ }
11007
11021
  }
11008
11022
  }
11009
11023
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11664,7 +11678,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
11664
11678
  'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
11665
11679
  }
11666
11680
  if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
11667
- let target = (event ? event.target : null);
11681
+ let target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
11668
11682
  target = (event && event.keyCode === 32) ? list : target;
11669
11683
  target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
11670
11684
  if (target && target.classList.contains('e-list-group-item')) {
@@ -12061,6 +12075,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
12061
12075
  }
12062
12076
  this.renderPopup();
12063
12077
  }
12078
+ presentItemValue(ulElement) {
12079
+ let valuecheck = [];
12080
+ for (let i = 0; i < this.value.length; i++) {
12081
+ let checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
12082
+ if (!checkEle) {
12083
+ valuecheck.push(this.value[i]);
12084
+ }
12085
+ }
12086
+ return valuecheck;
12087
+ }
12088
+ ;
12089
+ addNonPresentItems(valuecheck, ulElement, list, event) {
12090
+ this.dataSource.executeQuery(this.getForQuery(valuecheck)).then((e) => {
12091
+ this.addItem(e.result, list.length);
12092
+ this.updateActionList(ulElement, list, event);
12093
+ });
12094
+ }
12095
+ ;
12064
12096
  updateVal(newProp, oldProp, prop) {
12065
12097
  if (!this.list) {
12066
12098
  this.onLoadSelect();
@@ -12069,31 +12101,43 @@ let MultiSelect = class MultiSelect extends DropDownBase {
12069
12101
  this.onLoadSelect();
12070
12102
  }
12071
12103
  else {
12072
- if (prop === 'text') {
12073
- this.initialTextUpdate();
12074
- newProp = this.value;
12075
- }
12076
- if (isNullOrUndefined(this.value) || this.value.length === 0) {
12077
- this.tempValues = oldProp;
12078
- }
12079
- // eslint-disable-next-line
12080
- if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12081
- && this.isPopupOpen() && this.mainData !== this.listData) {
12082
- const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12083
- this.onActionComplete(list, this.mainData);
12104
+ let valuecheck = [];
12105
+ if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
12106
+ valuecheck = this.presentItemValue(this.ulElement);
12084
12107
  }
12085
- this.initialValueUpdate();
12086
- if (this.mode !== 'Box' && !this.inputFocus) {
12087
- this.updateDelimView();
12108
+ if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
12109
+ && this.listData != null) {
12110
+ this.mainData = null;
12111
+ this.setDynValue = true;
12112
+ this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
12088
12113
  }
12089
- if (!this.inputFocus) {
12090
- this.refreshInputHight();
12091
- }
12092
- this.refreshPlaceHolder();
12093
- if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12094
- this.updateValueState(null, newProp, oldProp);
12114
+ else {
12115
+ if (prop === 'text') {
12116
+ this.initialTextUpdate();
12117
+ newProp = this.value;
12118
+ }
12119
+ if (isNullOrUndefined(this.value) || this.value.length === 0) {
12120
+ this.tempValues = oldProp;
12121
+ }
12122
+ // eslint-disable-next-line
12123
+ if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12124
+ && this.isPopupOpen() && this.mainData !== this.listData) {
12125
+ const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12126
+ this.onActionComplete(list, this.mainData);
12127
+ }
12128
+ this.initialValueUpdate();
12129
+ if (this.mode !== 'Box' && !this.inputFocus) {
12130
+ this.updateDelimView();
12131
+ }
12132
+ if (!this.inputFocus) {
12133
+ this.refreshInputHight();
12134
+ }
12135
+ this.refreshPlaceHolder();
12136
+ if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12137
+ this.updateValueState(null, newProp, oldProp);
12138
+ }
12139
+ this.checkPlaceholderSize();
12095
12140
  }
12096
- this.checkPlaceholderSize();
12097
12141
  }
12098
12142
  if (!this.changeOnBlur) {
12099
12143
  this.updateValueState(null, newProp, oldProp);
@@ -13570,9 +13614,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
13570
13614
  args.items = this.getDataByValues([dragValue]);
13571
13615
  }
13572
13616
  this.trigger('beforeDrop', args);
13573
- if (args.isDragAll !== null) {
13574
- this.allowDragAll = args.isDragAll;
13575
- }
13576
13617
  }
13577
13618
  dragEnd(args) {
13578
13619
  let listData;