@syncfusion/ej2-dropdowns 19.3.56 → 19.4.42

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 (96) hide show
  1. package/CHANGELOG.md +8 -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 +91 -33
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +92 -33
  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 +19 -1
  17. package/src/list-box/list-box.d.ts +0 -4
  18. package/src/list-box/list-box.js +0 -3
  19. package/src/multi-select/multi-select-model.d.ts +1 -1
  20. package/src/multi-select/multi-select.d.ts +2 -0
  21. package/src/multi-select/multi-select.js +70 -26
  22. package/styles/auto-complete/_fluent-definition.scss +2 -0
  23. package/styles/auto-complete/bootstrap5-dark.css +0 -1
  24. package/styles/auto-complete/bootstrap5.css +0 -1
  25. package/styles/bootstrap-dark.css +5 -0
  26. package/styles/bootstrap.css +5 -0
  27. package/styles/bootstrap4.css +5 -0
  28. package/styles/bootstrap5-dark.css +17 -6
  29. package/styles/bootstrap5.css +17 -6
  30. package/styles/combo-box/_fluent-definition.scss +2 -0
  31. package/styles/combo-box/bootstrap5-dark.css +0 -1
  32. package/styles/combo-box/bootstrap5.css +0 -1
  33. package/styles/drop-down-base/_fluent-definition.scss +109 -0
  34. package/styles/drop-down-list/_bootstrap5-definition.scss +0 -1
  35. package/styles/drop-down-list/_fluent-definition.scss +193 -0
  36. package/styles/drop-down-list/bootstrap5-dark.css +0 -1
  37. package/styles/drop-down-list/bootstrap5.css +0 -1
  38. package/styles/drop-down-list/icons/_bootstrap5.scss +0 -1
  39. package/styles/drop-down-list/icons/_fluent.scss +14 -0
  40. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -58
  41. package/styles/drop-down-tree/_fluent-definition.scss +71 -0
  42. package/styles/drop-down-tree/_layout.scss +12 -4
  43. package/styles/drop-down-tree/_tailwind-definition.scss +1 -0
  44. package/styles/drop-down-tree/bootstrap5-dark.css +11 -4
  45. package/styles/drop-down-tree/bootstrap5.css +11 -4
  46. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  47. package/styles/drop-down-tree/icons/_fluent.scss +11 -0
  48. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  49. package/styles/drop-down-tree/tailwind-dark.css +1 -0
  50. package/styles/drop-down-tree/tailwind.css +1 -0
  51. package/styles/fabric-dark.css +5 -0
  52. package/styles/fabric.css +5 -0
  53. package/styles/highcontrast-light.css +5 -0
  54. package/styles/highcontrast.css +5 -0
  55. package/styles/list-box/_bootstrap5-definition.scss +2 -2
  56. package/styles/list-box/_fluent-definition.scss +115 -0
  57. package/styles/list-box/_layout.scss +1 -6
  58. package/styles/list-box/bootstrap5-dark.css +1 -1
  59. package/styles/list-box/bootstrap5.css +1 -1
  60. package/styles/list-box/icons/_fluent.scss +25 -0
  61. package/styles/list-box/icons/_tailwind-dark.scss +2 -2
  62. package/styles/list-box/tailwind-dark.css +3 -3
  63. package/styles/list-box/tailwind.css +1 -1
  64. package/styles/material-dark.css +5 -94
  65. package/styles/material.css +5 -94
  66. package/styles/multi-select/_bootstrap-dark-definition.scss +1 -0
  67. package/styles/multi-select/_bootstrap-definition.scss +1 -0
  68. package/styles/multi-select/_bootstrap4-definition.scss +1 -0
  69. package/styles/multi-select/_bootstrap5-definition.scss +1 -0
  70. package/styles/multi-select/_fabric-dark-definition.scss +1 -0
  71. package/styles/multi-select/_fabric-definition.scss +1 -0
  72. package/styles/multi-select/_fluent-definition.scss +215 -0
  73. package/styles/multi-select/_highcontrast-definition.scss +1 -0
  74. package/styles/multi-select/_highcontrast-light-definition.scss +1 -0
  75. package/styles/multi-select/_layout.scss +0 -116
  76. package/styles/multi-select/_material-dark-definition.scss +1 -22
  77. package/styles/multi-select/_material-definition.scss +1 -22
  78. package/styles/multi-select/_tailwind-definition.scss +1 -0
  79. package/styles/multi-select/_theme.scss +5 -0
  80. package/styles/multi-select/bootstrap-dark.css +5 -0
  81. package/styles/multi-select/bootstrap.css +5 -0
  82. package/styles/multi-select/bootstrap4.css +5 -0
  83. package/styles/multi-select/bootstrap5-dark.css +5 -0
  84. package/styles/multi-select/bootstrap5.css +5 -0
  85. package/styles/multi-select/fabric-dark.css +5 -0
  86. package/styles/multi-select/fabric.css +5 -0
  87. package/styles/multi-select/highcontrast-light.css +5 -0
  88. package/styles/multi-select/highcontrast.css +5 -0
  89. package/styles/multi-select/icons/_fluent.scss +27 -0
  90. package/styles/multi-select/material-dark.css +5 -94
  91. package/styles/multi-select/material.css +5 -94
  92. package/styles/multi-select/tailwind-dark.css +5 -0
  93. package/styles/multi-select/tailwind.css +5 -0
  94. package/styles/tailwind-dark.css +9 -3
  95. package/styles/tailwind.css +7 -1
  96. 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
  }
@@ -1208,7 +1225,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1208
1225
  li.innerText = itemText;
1209
1226
  }
1210
1227
  if (this.itemTemplate && !isHeader) {
1211
- var compiledString = compile(this.itemTemplate);
1228
+ var itemCheck = this.templateCompiler(this.itemTemplate);
1229
+ var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
1212
1230
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1213
1231
  var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
1214
1232
  if (addItemTemplate) {
@@ -7547,7 +7565,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7547
7565
  if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
7548
7566
  !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
7549
7567
  var inputValue = this.inputElement.value;
7550
- var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
7568
+ var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
7551
7569
  var activeElement = activeItem.item;
7552
7570
  if (!isNullOrUndefined(activeElement)) {
7553
7571
  var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7704,7 +7722,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7704
7722
  else {
7705
7723
  this.activeIndex = null;
7706
7724
  this.removeSelection();
7707
- if (this.liCollections && this.liCollections.length < 0) {
7725
+ if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
7708
7726
  this.removeFocus();
7709
7727
  }
7710
7728
  }
@@ -9132,7 +9150,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9132
9150
  this.mainData = list;
9133
9151
  this.mainListCollection = this.liCollections;
9134
9152
  }
9135
- else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
9153
+ else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
9136
9154
  this.mainData = list;
9137
9155
  }
9138
9156
  if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -11154,7 +11172,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11154
11172
  MultiSelect.prototype.updateActionCompleteData = function (li, item) {
11155
11173
  if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
11156
11174
  this.mainList = this.ulElement;
11157
- addClass([li], HIDE_LIST);
11175
+ if (this.hideSelectedItem) {
11176
+ addClass([li], HIDE_LIST);
11177
+ }
11158
11178
  }
11159
11179
  };
11160
11180
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11172,7 +11192,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11172
11192
  }
11173
11193
  };
11174
11194
  MultiSelect.prototype.updateDataList = function () {
11175
- if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {
11195
+ 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)))) {
11176
11196
  this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
11177
11197
  }
11178
11198
  };
@@ -11817,7 +11837,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11817
11837
  'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
11818
11838
  }
11819
11839
  if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
11820
- var target = (event ? event.target : null);
11840
+ var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
11821
11841
  target = (event && event.keyCode === 32) ? list : target;
11822
11842
  target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
11823
11843
  if (target && target.classList.contains('e-list-group-item')) {
@@ -12191,6 +12211,17 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12191
12211
  this.notify('selectAllText', false);
12192
12212
  break;
12193
12213
  case 'popupHeight':
12214
+ if (this.popupObj) {
12215
+ var overAllHeight = parseInt(this.popupHeight, 10);
12216
+ if (this.popupHeight !== 'auto') {
12217
+ this.list.style.maxHeight = formatUnit(overAllHeight);
12218
+ this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
12219
+ }
12220
+ else {
12221
+ this.list.style.maxHeight = formatUnit(this.popupHeight);
12222
+ }
12223
+ }
12224
+ break;
12194
12225
  case 'headerTemplate':
12195
12226
  case 'footerTemplate':
12196
12227
  this.reInitializePoup();
@@ -12218,6 +12249,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12218
12249
  }
12219
12250
  this.renderPopup();
12220
12251
  };
12252
+ MultiSelect.prototype.presentItemValue = function (ulElement) {
12253
+ var valuecheck = [];
12254
+ for (var i = 0; i < this.value.length; i++) {
12255
+ var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
12256
+ if (!checkEle) {
12257
+ valuecheck.push(this.value[i]);
12258
+ }
12259
+ }
12260
+ return valuecheck;
12261
+ };
12262
+
12263
+ MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
12264
+ var _this = this;
12265
+ this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
12266
+ _this.addItem(e.result, list.length);
12267
+ _this.updateActionList(ulElement, list, event);
12268
+ });
12269
+ };
12270
+
12221
12271
  MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
12222
12272
  if (!this.list) {
12223
12273
  this.onLoadSelect();
@@ -12226,31 +12276,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12226
12276
  this.onLoadSelect();
12227
12277
  }
12228
12278
  else {
12229
- if (prop === 'text') {
12230
- this.initialTextUpdate();
12231
- newProp = this.value;
12232
- }
12233
- if (isNullOrUndefined(this.value) || this.value.length === 0) {
12234
- this.tempValues = oldProp;
12279
+ var valuecheck = [];
12280
+ if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
12281
+ valuecheck = this.presentItemValue(this.ulElement);
12235
12282
  }
12236
- // eslint-disable-next-line
12237
- if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12238
- && this.isPopupOpen() && this.mainData !== this.listData) {
12239
- var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12240
- this.onActionComplete(list, this.mainData);
12283
+ if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
12284
+ && this.listData != null) {
12285
+ this.mainData = null;
12286
+ this.setDynValue = true;
12287
+ this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
12241
12288
  }
12242
- this.initialValueUpdate();
12243
- if (this.mode !== 'Box' && !this.inputFocus) {
12244
- this.updateDelimView();
12245
- }
12246
- if (!this.inputFocus) {
12247
- this.refreshInputHight();
12248
- }
12249
- this.refreshPlaceHolder();
12250
- if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12251
- this.updateValueState(null, newProp, oldProp);
12289
+ else {
12290
+ if (prop === 'text') {
12291
+ this.initialTextUpdate();
12292
+ newProp = this.value;
12293
+ }
12294
+ if (isNullOrUndefined(this.value) || this.value.length === 0) {
12295
+ this.tempValues = oldProp;
12296
+ }
12297
+ // eslint-disable-next-line
12298
+ if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
12299
+ && this.isPopupOpen() && this.mainData !== this.listData) {
12300
+ var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
12301
+ this.onActionComplete(list, this.mainData);
12302
+ }
12303
+ this.initialValueUpdate();
12304
+ if (this.mode !== 'Box' && !this.inputFocus) {
12305
+ this.updateDelimView();
12306
+ }
12307
+ if (!this.inputFocus) {
12308
+ this.refreshInputHight();
12309
+ }
12310
+ this.refreshPlaceHolder();
12311
+ if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12312
+ this.updateValueState(null, newProp, oldProp);
12313
+ }
12314
+ this.checkPlaceholderSize();
12252
12315
  }
12253
- this.checkPlaceholderSize();
12254
12316
  }
12255
12317
  if (!this.changeOnBlur) {
12256
12318
  this.updateValueState(null, newProp, oldProp);
@@ -13763,9 +13825,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
13763
13825
  args.items = this.getDataByValues([dragValue]);
13764
13826
  }
13765
13827
  this.trigger('beforeDrop', args);
13766
- if (args.isDragAll !== null) {
13767
- this.allowDragAll = args.isDragAll;
13768
- }
13769
13828
  };
13770
13829
  ListBox.prototype.dragEnd = function (args) {
13771
13830
  var _this = this;