@syncfusion/ej2-dropdowns 19.3.55 → 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 (97) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +1 -1
  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 +101 -40
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +103 -40
  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 +11 -11
  13. package/src/combo-box/combo-box.js +2 -2
  14. package/src/common/incremental-search.d.ts +1 -1
  15. package/src/common/incremental-search.js +1 -1
  16. package/src/drop-down-base/drop-down-base.js +17 -0
  17. package/src/drop-down-tree/drop-down-tree.js +15 -5
  18. package/src/list-box/list-box.d.ts +0 -4
  19. package/src/list-box/list-box.js +0 -3
  20. package/src/multi-select/multi-select-model.d.ts +1 -1
  21. package/src/multi-select/multi-select.d.ts +2 -0
  22. package/src/multi-select/multi-select.js +68 -29
  23. package/styles/auto-complete/_fluent-definition.scss +2 -0
  24. package/styles/auto-complete/bootstrap5-dark.css +0 -1
  25. package/styles/auto-complete/bootstrap5.css +0 -1
  26. package/styles/bootstrap-dark.css +5 -0
  27. package/styles/bootstrap.css +5 -0
  28. package/styles/bootstrap4.css +5 -0
  29. package/styles/bootstrap5-dark.css +17 -6
  30. package/styles/bootstrap5.css +17 -6
  31. package/styles/combo-box/_fluent-definition.scss +2 -0
  32. package/styles/combo-box/bootstrap5-dark.css +0 -1
  33. package/styles/combo-box/bootstrap5.css +0 -1
  34. package/styles/drop-down-base/_fluent-definition.scss +109 -0
  35. package/styles/drop-down-list/_bootstrap5-definition.scss +0 -1
  36. package/styles/drop-down-list/_fluent-definition.scss +193 -0
  37. package/styles/drop-down-list/bootstrap5-dark.css +0 -1
  38. package/styles/drop-down-list/bootstrap5.css +0 -1
  39. package/styles/drop-down-list/icons/_bootstrap5.scss +0 -1
  40. package/styles/drop-down-list/icons/_fluent.scss +14 -0
  41. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -58
  42. package/styles/drop-down-tree/_fluent-definition.scss +71 -0
  43. package/styles/drop-down-tree/_layout.scss +12 -4
  44. package/styles/drop-down-tree/_tailwind-definition.scss +1 -0
  45. package/styles/drop-down-tree/bootstrap5-dark.css +11 -4
  46. package/styles/drop-down-tree/bootstrap5.css +11 -4
  47. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  48. package/styles/drop-down-tree/icons/_fluent.scss +11 -0
  49. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  50. package/styles/drop-down-tree/tailwind-dark.css +1 -0
  51. package/styles/drop-down-tree/tailwind.css +1 -0
  52. package/styles/fabric-dark.css +5 -0
  53. package/styles/fabric.css +5 -0
  54. package/styles/highcontrast-light.css +5 -0
  55. package/styles/highcontrast.css +5 -0
  56. package/styles/list-box/_bootstrap5-definition.scss +2 -2
  57. package/styles/list-box/_fluent-definition.scss +115 -0
  58. package/styles/list-box/_layout.scss +1 -6
  59. package/styles/list-box/bootstrap5-dark.css +1 -1
  60. package/styles/list-box/bootstrap5.css +1 -1
  61. package/styles/list-box/icons/_fluent.scss +25 -0
  62. package/styles/list-box/icons/_tailwind-dark.scss +2 -2
  63. package/styles/list-box/tailwind-dark.css +3 -3
  64. package/styles/list-box/tailwind.css +1 -1
  65. package/styles/material-dark.css +5 -94
  66. package/styles/material.css +5 -94
  67. package/styles/multi-select/_bootstrap-dark-definition.scss +1 -0
  68. package/styles/multi-select/_bootstrap-definition.scss +1 -0
  69. package/styles/multi-select/_bootstrap4-definition.scss +1 -0
  70. package/styles/multi-select/_bootstrap5-definition.scss +1 -0
  71. package/styles/multi-select/_fabric-dark-definition.scss +1 -0
  72. package/styles/multi-select/_fabric-definition.scss +1 -0
  73. package/styles/multi-select/_fluent-definition.scss +215 -0
  74. package/styles/multi-select/_highcontrast-definition.scss +1 -0
  75. package/styles/multi-select/_highcontrast-light-definition.scss +1 -0
  76. package/styles/multi-select/_layout.scss +0 -116
  77. package/styles/multi-select/_material-dark-definition.scss +1 -22
  78. package/styles/multi-select/_material-definition.scss +1 -22
  79. package/styles/multi-select/_tailwind-definition.scss +1 -0
  80. package/styles/multi-select/_theme.scss +5 -0
  81. package/styles/multi-select/bootstrap-dark.css +5 -0
  82. package/styles/multi-select/bootstrap.css +5 -0
  83. package/styles/multi-select/bootstrap4.css +5 -0
  84. package/styles/multi-select/bootstrap5-dark.css +5 -0
  85. package/styles/multi-select/bootstrap5.css +5 -0
  86. package/styles/multi-select/fabric-dark.css +5 -0
  87. package/styles/multi-select/fabric.css +5 -0
  88. package/styles/multi-select/highcontrast-light.css +5 -0
  89. package/styles/multi-select/highcontrast.css +5 -0
  90. package/styles/multi-select/icons/_fluent.scss +27 -0
  91. package/styles/multi-select/material-dark.css +5 -94
  92. package/styles/multi-select/material.css +5 -94
  93. package/styles/multi-select/tailwind-dark.css +5 -0
  94. package/styles/multi-select/tailwind.css +5 -0
  95. package/styles/tailwind-dark.css +9 -3
  96. package/styles/tailwind.css +7 -1
  97. package/styles/_all.scss +0 -3
@@ -91,7 +91,7 @@ function Search(inputVal, items, searchType, ignoreCase) {
91
91
  for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
92
92
  var item = itemsData[i];
93
93
  var 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 };
@@ -659,6 +659,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
659
659
  _this.renderGroupTemplate(ulElement);
660
660
  }
661
661
  _this.bindChildItems(localDataArgs.result, ulElement, fields);
662
+ setTimeout(function () {
663
+ if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
664
+ _this.updateDataList();
665
+ }
666
+ });
662
667
  }
663
668
  });
664
669
  }
@@ -790,10 +795,22 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
790
795
  var groupValue = select(this.groupTemplate, document).innerHTML.trim();
791
796
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
792
797
  var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
798
+ //EJ2-55168- Group checkbox is not working with group template
799
+ if (this.isGroupChecking) {
800
+ for (var i = 0; i < tempHeaders.length; i++) {
801
+ this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
802
+ }
803
+ }
793
804
  }
794
805
  else {
795
806
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
796
807
  var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
808
+ //EJ2-55168- Group checkbox is not working with group template
809
+ if (this.isGroupChecking) {
810
+ for (var i = 0; i < tempHeaders.length; i++) {
811
+ this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
812
+ }
813
+ }
797
814
  }
798
815
  this.renderReactTemplates();
799
816
  }
@@ -5516,6 +5533,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
5516
5533
  }
5517
5534
  };
5518
5535
  DropDownTree.prototype.setValidValue = function () {
5536
+ var _this = this;
5519
5537
  if (!this.showCheckBox && !this.allowMultiSelection) {
5520
5538
  Input.setValue(this.text, this.inputEle, this.floatLabelType);
5521
5539
  var id = this.value[0].toString();
@@ -5525,9 +5543,14 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
5525
5543
  }
5526
5544
  else {
5527
5545
  if (this.showCheckBox) {
5528
- this.treeObj.checkedNodes = this.value.slice();
5529
- this.treeObj.dataBind();
5530
- this.setMultiSelect();
5546
+ var difference = this.value.filter(function (e) {
5547
+ return _this.treeObj.checkedNodes.indexOf(e) === -1;
5548
+ });
5549
+ if (difference.length > 0 || this.treeSettings.autoCheck) {
5550
+ this.treeObj.checkedNodes = this.value.slice();
5551
+ this.treeObj.dataBind();
5552
+ this.setMultiSelect();
5553
+ }
5531
5554
  }
5532
5555
  else {
5533
5556
  this.treeObj.selectedNodes = this.value.slice();
@@ -6565,6 +6588,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6565
6588
  this.ensurePlaceHolder();
6566
6589
  };
6567
6590
  DropDownTree.prototype.resetValue = function (isDynamicChange) {
6591
+ if (this.value == [] && this.text == null) {
6592
+ return;
6593
+ }
6568
6594
  Input.setValue(null, this.inputEle, this.floatLabelType);
6569
6595
  if (!isDynamicChange) {
6570
6596
  this.oldValue = this.value;
@@ -6576,7 +6602,8 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6576
6602
  setValue('selectedNodes', [], this.treeObj);
6577
6603
  this.hiddenElement.innerHTML = '';
6578
6604
  if (this.showCheckBox) {
6579
- this.treeObj.uncheckAll();
6605
+ this.treeObj.checkedNodes = [];
6606
+ this.treeObj.dataBind();
6580
6607
  this.setMultiSelect();
6581
6608
  this.clearCheckAll();
6582
6609
  }
@@ -6954,8 +6981,8 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6954
6981
  this.updateTemplate();
6955
6982
  }
6956
6983
  this.treeObj.sortOrder = newProp.sortOrder;
6957
- this.updateValue(this.value);
6958
6984
  this.treeObj.dataBind();
6985
+ this.updateValue(this.value);
6959
6986
  break;
6960
6987
  case 'showDropDownIcon':
6961
6988
  this.updateDropDownIconState(newProp.showDropDownIcon);
@@ -7537,7 +7564,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7537
7564
  if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
7538
7565
  !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
7539
7566
  var inputValue = this.inputElement.value;
7540
- var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
7567
+ var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
7541
7568
  var activeElement = activeItem.item;
7542
7569
  if (!isNullOrUndefined(activeElement)) {
7543
7570
  var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7694,7 +7721,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7694
7721
  else {
7695
7722
  this.activeIndex = null;
7696
7723
  this.removeSelection();
7697
- if (this.liCollections && this.liCollections.length < 0) {
7724
+ if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
7698
7725
  this.removeFocus();
7699
7726
  }
7700
7727
  }
@@ -9122,7 +9149,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9122
9149
  this.mainData = list;
9123
9150
  this.mainListCollection = this.liCollections;
9124
9151
  }
9125
- else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
9152
+ else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
9126
9153
  this.mainData = list;
9127
9154
  }
9128
9155
  if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -9750,6 +9777,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9750
9777
  var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
9751
9778
  if (!isNullOrUndefined(focusedItem)) {
9752
9779
  this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
9780
+ if (this.allowFiltering) {
9781
+ var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
9782
+ filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
9783
+ }
9784
+ else if (this.mode == "CheckBox") {
9785
+ this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
9786
+ }
9753
9787
  }
9754
9788
  };
9755
9789
  MultiSelect.prototype.homeNavigation = function (isHome) {
@@ -9865,7 +9899,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9865
9899
  this.keyAction = true;
9866
9900
  if (document.activeElement.classList.contains(FILTERINPUT)
9867
9901
  || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {
9868
- this.list.focus();
9869
9902
  EventHandler.add(this.list, 'keydown', this.onKeyDown, this);
9870
9903
  }
9871
9904
  this.updateAriaAttribute();
@@ -10888,7 +10921,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
10888
10921
  EventHandler.add(this.inputElement, 'input', this.onInput, this);
10889
10922
  }
10890
10923
  EventHandler.add(this.inputElement, 'blur', this.onBlurHandler, this);
10891
- EventHandler.add(this.componentWrapper, 'mousemove', this.mouseIn, this);
10924
+ EventHandler.add(this.componentWrapper, 'mouseover', this.mouseIn, this);
10892
10925
  var formElement = closest(this.inputElement, 'form');
10893
10926
  if (formElement) {
10894
10927
  EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
@@ -11138,7 +11171,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11138
11171
  MultiSelect.prototype.updateActionCompleteData = function (li, item) {
11139
11172
  if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
11140
11173
  this.mainList = this.ulElement;
11141
- addClass([li], HIDE_LIST);
11174
+ if (this.hideSelectedItem) {
11175
+ addClass([li], HIDE_LIST);
11176
+ }
11142
11177
  }
11143
11178
  };
11144
11179
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11156,7 +11191,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11156
11191
  }
11157
11192
  };
11158
11193
  MultiSelect.prototype.updateDataList = function () {
11159
- if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {
11194
+ if (this.mainList && this.ulElement && (this.mainList.childElementCount < this.ulElement.childElementCount || ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)))) {
11160
11195
  this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
11161
11196
  }
11162
11197
  };
@@ -11784,7 +11819,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11784
11819
  EventHandler.remove(formElement, 'reset', this.resetValueHandler);
11785
11820
  }
11786
11821
  EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
11787
- EventHandler.remove(this.componentWrapper, 'mousemove', this.mouseIn);
11822
+ EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
11788
11823
  EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
11789
11824
  EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
11790
11825
  EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
@@ -11801,7 +11836,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11801
11836
  'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
11802
11837
  }
11803
11838
  if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
11804
- var target = (event ? event.target : null);
11839
+ var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
11805
11840
  target = (event && event.keyCode === 32) ? list : target;
11806
11841
  target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
11807
11842
  if (target && target.classList.contains('e-list-group-item')) {
@@ -12202,6 +12237,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12202
12237
  }
12203
12238
  this.renderPopup();
12204
12239
  };
12240
+ MultiSelect.prototype.presentItemValue = function (ulElement) {
12241
+ var valuecheck = [];
12242
+ for (var i = 0; i < this.value.length; i++) {
12243
+ var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
12244
+ if (!checkEle) {
12245
+ valuecheck.push(this.value[i]);
12246
+ }
12247
+ }
12248
+ return valuecheck;
12249
+ };
12250
+
12251
+ MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
12252
+ var _this = this;
12253
+ this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
12254
+ _this.addItem(e.result, list.length);
12255
+ _this.updateActionList(ulElement, list, event);
12256
+ });
12257
+ };
12258
+
12205
12259
  MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
12206
12260
  if (!this.list) {
12207
12261
  this.onLoadSelect();
@@ -12210,31 +12264,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12210
12264
  this.onLoadSelect();
12211
12265
  }
12212
12266
  else {
12213
- if (prop === 'text') {
12214
- this.initialTextUpdate();
12215
- newProp = this.value;
12216
- }
12217
- if (isNullOrUndefined(this.value) || this.value.length === 0) {
12218
- this.tempValues = oldProp;
12219
- }
12220
- // eslint-disable-next-line
12221
- if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12222
- && this.isPopupOpen() && this.mainData !== this.listData) {
12223
- var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12224
- this.onActionComplete(list, this.mainData);
12225
- }
12226
- this.initialValueUpdate();
12227
- if (this.mode !== 'Box' && !this.inputFocus) {
12228
- this.updateDelimView();
12267
+ var valuecheck = [];
12268
+ if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
12269
+ valuecheck = this.presentItemValue(this.ulElement);
12229
12270
  }
12230
- if (!this.inputFocus) {
12231
- this.refreshInputHight();
12271
+ if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
12272
+ && this.listData != null) {
12273
+ this.mainData = null;
12274
+ this.setDynValue = true;
12275
+ this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
12232
12276
  }
12233
- this.refreshPlaceHolder();
12234
- if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12235
- this.updateValueState(null, newProp, oldProp);
12277
+ else {
12278
+ if (prop === 'text') {
12279
+ this.initialTextUpdate();
12280
+ newProp = this.value;
12281
+ }
12282
+ if (isNullOrUndefined(this.value) || this.value.length === 0) {
12283
+ this.tempValues = oldProp;
12284
+ }
12285
+ // eslint-disable-next-line
12286
+ if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12287
+ && this.isPopupOpen() && this.mainData !== this.listData) {
12288
+ var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12289
+ this.onActionComplete(list, this.mainData);
12290
+ }
12291
+ this.initialValueUpdate();
12292
+ if (this.mode !== 'Box' && !this.inputFocus) {
12293
+ this.updateDelimView();
12294
+ }
12295
+ if (!this.inputFocus) {
12296
+ this.refreshInputHight();
12297
+ }
12298
+ this.refreshPlaceHolder();
12299
+ if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12300
+ this.updateValueState(null, newProp, oldProp);
12301
+ }
12302
+ this.checkPlaceholderSize();
12236
12303
  }
12237
- this.checkPlaceholderSize();
12238
12304
  }
12239
12305
  if (!this.changeOnBlur) {
12240
12306
  this.updateValueState(null, newProp, oldProp);
@@ -13747,9 +13813,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
13747
13813
  args.items = this.getDataByValues([dragValue]);
13748
13814
  }
13749
13815
  this.trigger('beforeDrop', args);
13750
- if (args.isDragAll !== null) {
13751
- this.allowDragAll = args.isDragAll;
13752
- }
13753
13816
  };
13754
13817
  ListBox.prototype.dragEnd = function (args) {
13755
13818
  var _this = this;