@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 (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 };
@@ -660,7 +660,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
660
660
  }
661
661
  _this.bindChildItems(localDataArgs.result, ulElement, fields);
662
662
  setTimeout(function () {
663
- if (_this.getModuleName() === 'multiselect' && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
663
+ if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
664
664
  _this.updateDataList();
665
665
  }
666
666
  });
@@ -795,10 +795,22 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
795
795
  var groupValue = select(this.groupTemplate, document).innerHTML.trim();
796
796
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
797
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
+ }
798
804
  }
799
805
  else {
800
806
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
801
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
+ }
802
814
  }
803
815
  this.renderReactTemplates();
804
816
  }
@@ -7552,7 +7564,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7552
7564
  if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
7553
7565
  !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
7554
7566
  var inputValue = this.inputElement.value;
7555
- var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
7567
+ var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
7556
7568
  var activeElement = activeItem.item;
7557
7569
  if (!isNullOrUndefined(activeElement)) {
7558
7570
  var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7709,7 +7721,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7709
7721
  else {
7710
7722
  this.activeIndex = null;
7711
7723
  this.removeSelection();
7712
- if (this.liCollections && this.liCollections.length < 0) {
7724
+ if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
7713
7725
  this.removeFocus();
7714
7726
  }
7715
7727
  }
@@ -9137,7 +9149,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9137
9149
  this.mainData = list;
9138
9150
  this.mainListCollection = this.liCollections;
9139
9151
  }
9140
- else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
9152
+ else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
9141
9153
  this.mainData = list;
9142
9154
  }
9143
9155
  if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -11159,7 +11171,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11159
11171
  MultiSelect.prototype.updateActionCompleteData = function (li, item) {
11160
11172
  if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
11161
11173
  this.mainList = this.ulElement;
11162
- addClass([li], HIDE_LIST);
11174
+ if (this.hideSelectedItem) {
11175
+ addClass([li], HIDE_LIST);
11176
+ }
11163
11177
  }
11164
11178
  };
11165
11179
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11822,7 +11836,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11822
11836
  'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
11823
11837
  }
11824
11838
  if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
11825
- var target = (event ? event.target : null);
11839
+ var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
11826
11840
  target = (event && event.keyCode === 32) ? list : target;
11827
11841
  target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
11828
11842
  if (target && target.classList.contains('e-list-group-item')) {
@@ -12223,6 +12237,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12223
12237
  }
12224
12238
  this.renderPopup();
12225
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
+
12226
12259
  MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
12227
12260
  if (!this.list) {
12228
12261
  this.onLoadSelect();
@@ -12231,31 +12264,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12231
12264
  this.onLoadSelect();
12232
12265
  }
12233
12266
  else {
12234
- if (prop === 'text') {
12235
- this.initialTextUpdate();
12236
- newProp = this.value;
12237
- }
12238
- if (isNullOrUndefined(this.value) || this.value.length === 0) {
12239
- this.tempValues = oldProp;
12240
- }
12241
- // eslint-disable-next-line
12242
- if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12243
- && this.isPopupOpen() && this.mainData !== this.listData) {
12244
- var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12245
- this.onActionComplete(list, this.mainData);
12246
- }
12247
- this.initialValueUpdate();
12248
- if (this.mode !== 'Box' && !this.inputFocus) {
12249
- this.updateDelimView();
12267
+ var valuecheck = [];
12268
+ if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
12269
+ valuecheck = this.presentItemValue(this.ulElement);
12250
12270
  }
12251
- if (!this.inputFocus) {
12252
- 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);
12253
12276
  }
12254
- this.refreshPlaceHolder();
12255
- if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12256
- 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();
12257
12303
  }
12258
- this.checkPlaceholderSize();
12259
12304
  }
12260
12305
  if (!this.changeOnBlur) {
12261
12306
  this.updateValueState(null, newProp, oldProp);
@@ -13768,9 +13813,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
13768
13813
  args.items = this.getDataByValues([dragValue]);
13769
13814
  }
13770
13815
  this.trigger('beforeDrop', args);
13771
- if (args.isDragAll !== null) {
13772
- this.allowDragAll = args.isDragAll;
13773
- }
13774
13816
  };
13775
13817
  ListBox.prototype.dragEnd = function (args) {
13776
13818
  var _this = this;