@syncfusion/ej2-dropdowns 19.4.40 → 19.4.48

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 (117) 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 +87 -34
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +88 -34
  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 -12
  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 +15 -2
  17. package/src/drop-down-list/drop-down-list.js +1 -1
  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 +69 -25
  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 +21 -3
  27. package/styles/bootstrap.css +21 -3
  28. package/styles/bootstrap4.css +21 -3
  29. package/styles/bootstrap5-dark.css +33 -9
  30. package/styles/bootstrap5.css +33 -9
  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 +21 -3
  53. package/styles/fabric.css +21 -3
  54. package/styles/highcontrast-light.css +21 -3
  55. package/styles/highcontrast.css +21 -3
  56. package/styles/list-box/_bootstrap-dark-definition.scss +3 -0
  57. package/styles/list-box/_bootstrap-definition.scss +3 -0
  58. package/styles/list-box/_bootstrap4-definition.scss +3 -0
  59. package/styles/list-box/_bootstrap5-definition.scss +5 -2
  60. package/styles/list-box/_fabric-dark-definition.scss +3 -0
  61. package/styles/list-box/_fabric-definition.scss +3 -0
  62. package/styles/list-box/_fluent-definition.scss +118 -0
  63. package/styles/list-box/_highcontrast-definition.scss +3 -0
  64. package/styles/list-box/_highcontrast-light-definition.scss +3 -0
  65. package/styles/list-box/_layout.scss +1 -6
  66. package/styles/list-box/_material-dark-definition.scss +3 -0
  67. package/styles/list-box/_material-definition.scss +3 -0
  68. package/styles/list-box/_tailwind-definition.scss +3 -0
  69. package/styles/list-box/_theme.scss +8 -0
  70. package/styles/list-box/bootstrap-dark.css +10 -0
  71. package/styles/list-box/bootstrap.css +10 -0
  72. package/styles/list-box/bootstrap4.css +10 -0
  73. package/styles/list-box/bootstrap5-dark.css +11 -1
  74. package/styles/list-box/bootstrap5.css +11 -1
  75. package/styles/list-box/fabric-dark.css +10 -0
  76. package/styles/list-box/fabric.css +10 -0
  77. package/styles/list-box/highcontrast-light.css +10 -0
  78. package/styles/list-box/highcontrast.css +10 -0
  79. package/styles/list-box/icons/_fluent.scss +25 -0
  80. package/styles/list-box/icons/_tailwind-dark.scss +2 -2
  81. package/styles/list-box/material-dark.css +10 -0
  82. package/styles/list-box/material.css +10 -0
  83. package/styles/list-box/tailwind-dark.css +13 -3
  84. package/styles/list-box/tailwind.css +11 -1
  85. package/styles/material-dark.css +21 -97
  86. package/styles/material.css +21 -97
  87. package/styles/multi-select/_bootstrap-dark-definition.scss +1 -0
  88. package/styles/multi-select/_bootstrap-definition.scss +1 -0
  89. package/styles/multi-select/_bootstrap4-definition.scss +1 -0
  90. package/styles/multi-select/_bootstrap5-definition.scss +1 -0
  91. package/styles/multi-select/_fabric-dark-definition.scss +1 -0
  92. package/styles/multi-select/_fabric-definition.scss +1 -0
  93. package/styles/multi-select/_fluent-definition.scss +215 -0
  94. package/styles/multi-select/_highcontrast-definition.scss +1 -0
  95. package/styles/multi-select/_highcontrast-light-definition.scss +1 -0
  96. package/styles/multi-select/_layout.scss +4 -119
  97. package/styles/multi-select/_material-dark-definition.scss +1 -22
  98. package/styles/multi-select/_material-definition.scss +1 -22
  99. package/styles/multi-select/_tailwind-definition.scss +1 -0
  100. package/styles/multi-select/_theme.scss +5 -0
  101. package/styles/multi-select/bootstrap-dark.css +11 -3
  102. package/styles/multi-select/bootstrap.css +11 -3
  103. package/styles/multi-select/bootstrap4.css +11 -3
  104. package/styles/multi-select/bootstrap5-dark.css +11 -3
  105. package/styles/multi-select/bootstrap5.css +11 -3
  106. package/styles/multi-select/fabric-dark.css +11 -3
  107. package/styles/multi-select/fabric.css +11 -3
  108. package/styles/multi-select/highcontrast-light.css +11 -3
  109. package/styles/multi-select/highcontrast.css +11 -3
  110. package/styles/multi-select/icons/_fluent.scss +27 -0
  111. package/styles/multi-select/material-dark.css +11 -97
  112. package/styles/multi-select/material.css +11 -97
  113. package/styles/multi-select/tailwind-dark.css +11 -3
  114. package/styles/multi-select/tailwind.css +11 -3
  115. package/styles/tailwind-dark.css +25 -6
  116. package/styles/tailwind.css +23 -4
  117. 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
  }
@@ -1213,7 +1225,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
1213
1225
  li.innerText = itemText;
1214
1226
  }
1215
1227
  if (this.itemTemplate && !isHeader) {
1216
- 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);
1217
1230
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1218
1231
  var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
1219
1232
  if (addItemTemplate) {
@@ -3653,7 +3666,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3653
3666
  DropDownList.prototype.checkCustomValue = function () {
3654
3667
  this.itemData = this.getDataByValue(this.value);
3655
3668
  var dataItem = this.getItemData();
3656
- this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });
3669
+ this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
3657
3670
  };
3658
3671
  DropDownList.prototype.updateInputFields = function () {
3659
3672
  if (this.getModuleName() === 'dropdownlist') {
@@ -7552,7 +7565,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7552
7565
  if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
7553
7566
  !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
7554
7567
  var inputValue = this.inputElement.value;
7555
- var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
7568
+ var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
7556
7569
  var activeElement = activeItem.item;
7557
7570
  if (!isNullOrUndefined(activeElement)) {
7558
7571
  var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -7709,7 +7722,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7709
7722
  else {
7710
7723
  this.activeIndex = null;
7711
7724
  this.removeSelection();
7712
- if (this.liCollections && this.liCollections.length < 0) {
7725
+ if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
7713
7726
  this.removeFocus();
7714
7727
  }
7715
7728
  }
@@ -9137,7 +9150,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9137
9150
  this.mainData = list;
9138
9151
  this.mainListCollection = this.liCollections;
9139
9152
  }
9140
- else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
9153
+ else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
9141
9154
  this.mainData = list;
9142
9155
  }
9143
9156
  if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -11159,7 +11172,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11159
11172
  MultiSelect.prototype.updateActionCompleteData = function (li, item) {
11160
11173
  if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
11161
11174
  this.mainList = this.ulElement;
11162
- addClass([li], HIDE_LIST);
11175
+ if (this.hideSelectedItem) {
11176
+ addClass([li], HIDE_LIST);
11177
+ }
11163
11178
  }
11164
11179
  };
11165
11180
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11822,7 +11837,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11822
11837
  'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
11823
11838
  }
11824
11839
  if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
11825
- var target = (event ? event.target : null);
11840
+ var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
11826
11841
  target = (event && event.keyCode === 32) ? list : target;
11827
11842
  target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
11828
11843
  if (target && target.classList.contains('e-list-group-item')) {
@@ -12196,6 +12211,17 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12196
12211
  this.notify('selectAllText', false);
12197
12212
  break;
12198
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;
12199
12225
  case 'headerTemplate':
12200
12226
  case 'footerTemplate':
12201
12227
  this.reInitializePoup();
@@ -12223,6 +12249,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12223
12249
  }
12224
12250
  this.renderPopup();
12225
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
+
12226
12271
  MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
12227
12272
  if (!this.list) {
12228
12273
  this.onLoadSelect();
@@ -12231,31 +12276,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12231
12276
  this.onLoadSelect();
12232
12277
  }
12233
12278
  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();
12279
+ var valuecheck = [];
12280
+ if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
12281
+ valuecheck = this.presentItemValue(this.ulElement);
12250
12282
  }
12251
- if (!this.inputFocus) {
12252
- this.refreshInputHight();
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);
12253
12288
  }
12254
- this.refreshPlaceHolder();
12255
- if (this.mode !== 'CheckBox' && this.changeOnBlur) {
12256
- 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();
12257
12315
  }
12258
- this.checkPlaceholderSize();
12259
12316
  }
12260
12317
  if (!this.changeOnBlur) {
12261
12318
  this.updateValueState(null, newProp, oldProp);
@@ -13768,9 +13825,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
13768
13825
  args.items = this.getDataByValues([dragValue]);
13769
13826
  }
13770
13827
  this.trigger('beforeDrop', args);
13771
- if (args.isDragAll !== null) {
13772
- this.allowDragAll = args.isDragAll;
13773
- }
13774
13828
  };
13775
13829
  ListBox.prototype.dragEnd = function (args) {
13776
13830
  var _this = this;