@syncfusion/ej2-dropdowns 20.1.51 → 20.1.56

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 (141) hide show
  1. package/CHANGELOG.md +26 -0
  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 +90 -69
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +54 -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 +11 -11
  12. package/src/auto-complete/auto-complete.js +3 -1
  13. package/src/combo-box/combo-box.js +4 -3
  14. package/src/common/incremental-search.js +1 -1
  15. package/src/drop-down-base/drop-down-base.js +5 -3
  16. package/src/drop-down-list/drop-down-list.js +10 -2
  17. package/src/drop-down-tree/drop-down-tree-model.d.ts +2 -2
  18. package/src/drop-down-tree/drop-down-tree.js +5 -5
  19. package/src/list-box/list-box.js +16 -10
  20. package/src/multi-select/multi-select-model.d.ts +1 -1
  21. package/src/multi-select/multi-select.js +10 -7
  22. package/styles/auto-complete/bootstrap-dark.css +5 -14
  23. package/styles/auto-complete/bootstrap.css +5 -14
  24. package/styles/auto-complete/bootstrap4.css +5 -13
  25. package/styles/auto-complete/bootstrap5-dark.css +5 -13
  26. package/styles/auto-complete/bootstrap5.css +5 -13
  27. package/styles/auto-complete/fabric-dark.css +5 -12
  28. package/styles/auto-complete/fabric.css +5 -12
  29. package/styles/auto-complete/fluent-dark.css +4 -11
  30. package/styles/auto-complete/fluent.css +4 -11
  31. package/styles/auto-complete/highcontrast-light.css +3 -23
  32. package/styles/auto-complete/highcontrast.css +3 -23
  33. package/styles/auto-complete/material-dark.css +1 -1
  34. package/styles/auto-complete/material.css +1 -1
  35. package/styles/auto-complete/tailwind-dark.css +1 -1
  36. package/styles/auto-complete/tailwind.css +1 -1
  37. package/styles/bootstrap-dark.css +62 -337
  38. package/styles/bootstrap.css +62 -337
  39. package/styles/bootstrap4.css +62 -343
  40. package/styles/bootstrap5-dark.css +63 -343
  41. package/styles/bootstrap5.css +63 -343
  42. package/styles/combo-box/bootstrap-dark.css +5 -14
  43. package/styles/combo-box/bootstrap.css +5 -14
  44. package/styles/combo-box/bootstrap4.css +5 -13
  45. package/styles/combo-box/bootstrap5-dark.css +5 -13
  46. package/styles/combo-box/bootstrap5.css +5 -13
  47. package/styles/combo-box/fabric-dark.css +5 -12
  48. package/styles/combo-box/fabric.css +5 -12
  49. package/styles/combo-box/fluent-dark.css +4 -11
  50. package/styles/combo-box/fluent.css +4 -11
  51. package/styles/combo-box/highcontrast-light.css +3 -23
  52. package/styles/combo-box/highcontrast.css +3 -23
  53. package/styles/combo-box/material-dark.css +1 -1
  54. package/styles/combo-box/material.css +1 -1
  55. package/styles/combo-box/tailwind-dark.css +1 -1
  56. package/styles/combo-box/tailwind.css +1 -1
  57. package/styles/drop-down-base/bootstrap-dark.css +8 -22
  58. package/styles/drop-down-base/bootstrap.css +8 -22
  59. package/styles/drop-down-base/bootstrap4.css +8 -22
  60. package/styles/drop-down-base/bootstrap5-dark.css +8 -22
  61. package/styles/drop-down-base/bootstrap5.css +8 -22
  62. package/styles/drop-down-base/fabric-dark.css +8 -22
  63. package/styles/drop-down-base/fabric.css +8 -22
  64. package/styles/drop-down-base/fluent-dark.css +8 -22
  65. package/styles/drop-down-base/fluent.css +8 -22
  66. package/styles/drop-down-base/highcontrast-light.css +8 -27
  67. package/styles/drop-down-base/highcontrast.css +8 -27
  68. package/styles/drop-down-base/material-dark.css +8 -22
  69. package/styles/drop-down-base/material.css +8 -22
  70. package/styles/drop-down-base/tailwind-dark.css +12 -34
  71. package/styles/drop-down-base/tailwind.css +12 -34
  72. package/styles/drop-down-list/bootstrap-dark.css +15 -44
  73. package/styles/drop-down-list/bootstrap.css +15 -44
  74. package/styles/drop-down-list/bootstrap4.css +14 -38
  75. package/styles/drop-down-list/bootstrap5-dark.css +14 -38
  76. package/styles/drop-down-list/bootstrap5.css +14 -38
  77. package/styles/drop-down-list/fabric-dark.css +15 -42
  78. package/styles/drop-down-list/fabric.css +15 -42
  79. package/styles/drop-down-list/fluent-dark.css +13 -36
  80. package/styles/drop-down-list/fluent.css +13 -36
  81. package/styles/drop-down-list/highcontrast-light.css +13 -58
  82. package/styles/drop-down-list/highcontrast.css +13 -58
  83. package/styles/drop-down-list/material-dark.css +11 -32
  84. package/styles/drop-down-list/material.css +11 -33
  85. package/styles/drop-down-list/tailwind-dark.css +10 -24
  86. package/styles/drop-down-list/tailwind.css +10 -24
  87. package/styles/drop-down-tree/bootstrap-dark.css +4 -92
  88. package/styles/drop-down-tree/bootstrap.css +4 -92
  89. package/styles/drop-down-tree/bootstrap4.css +5 -99
  90. package/styles/drop-down-tree/bootstrap5-dark.css +5 -103
  91. package/styles/drop-down-tree/bootstrap5.css +5 -103
  92. package/styles/drop-down-tree/fabric-dark.css +4 -92
  93. package/styles/drop-down-tree/fabric.css +4 -92
  94. package/styles/drop-down-tree/fluent-dark.css +5 -105
  95. package/styles/drop-down-tree/fluent.css +5 -105
  96. package/styles/drop-down-tree/highcontrast-light.css +4 -97
  97. package/styles/drop-down-tree/highcontrast.css +4 -98
  98. package/styles/drop-down-tree/material-dark.css +11 -182
  99. package/styles/drop-down-tree/material.css +11 -184
  100. package/styles/drop-down-tree/tailwind-dark.css +4 -107
  101. package/styles/drop-down-tree/tailwind.css +4 -107
  102. package/styles/fabric-dark.css +62 -335
  103. package/styles/fabric.css +62 -335
  104. package/styles/fluent-dark.css +62 -342
  105. package/styles/fluent.css +62 -342
  106. package/styles/highcontrast-light.css +63 -375
  107. package/styles/highcontrast.css +63 -376
  108. package/styles/list-box/bootstrap-dark.css +11 -115
  109. package/styles/list-box/bootstrap.css +11 -115
  110. package/styles/list-box/bootstrap4.css +11 -120
  111. package/styles/list-box/bootstrap5-dark.css +11 -115
  112. package/styles/list-box/bootstrap5.css +11 -115
  113. package/styles/list-box/fabric-dark.css +11 -115
  114. package/styles/list-box/fabric.css +11 -115
  115. package/styles/list-box/fluent-dark.css +11 -115
  116. package/styles/list-box/fluent.css +11 -115
  117. package/styles/list-box/highcontrast-light.css +11 -120
  118. package/styles/list-box/highcontrast.css +11 -120
  119. package/styles/list-box/material-dark.css +11 -115
  120. package/styles/list-box/material.css +11 -115
  121. package/styles/list-box/tailwind-dark.css +12 -118
  122. package/styles/list-box/tailwind.css +12 -118
  123. package/styles/material-dark.css +103 -462
  124. package/styles/material.css +103 -466
  125. package/styles/multi-select/bootstrap-dark.css +28 -68
  126. package/styles/multi-select/bootstrap.css +28 -68
  127. package/styles/multi-select/bootstrap4.css +28 -68
  128. package/styles/multi-select/bootstrap5-dark.css +29 -69
  129. package/styles/multi-select/bootstrap5.css +29 -69
  130. package/styles/multi-select/fabric-dark.css +28 -68
  131. package/styles/multi-select/fabric.css +28 -68
  132. package/styles/multi-select/fluent-dark.css +29 -68
  133. package/styles/multi-select/fluent.css +29 -68
  134. package/styles/multi-select/highcontrast-light.css +31 -97
  135. package/styles/multi-select/highcontrast.css +31 -97
  136. package/styles/multi-select/material-dark.css +66 -115
  137. package/styles/multi-select/material.css +66 -116
  138. package/styles/multi-select/tailwind-dark.css +29 -69
  139. package/styles/multi-select/tailwind.css +29 -69
  140. package/styles/tailwind-dark.css +63 -348
  141. package/styles/tailwind.css +63 -348
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 20.1.51
3
+ * version : 20.1.56
4
4
  * Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-dropdowns@*",
3
- "_id": "@syncfusion/ej2-dropdowns@20.1.50",
3
+ "_id": "@syncfusion/ej2-dropdowns@20.1.55",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-42Na+hugdkCNsRVtXmVZOYhn0yKFOJSd5UZcM+Jp4nCAL/QINQ+d9Q8wGoUe6t5fQpa/LDnud77tKVzrBcs+KA==",
5
+ "_integrity": "sha512-g214RNBPi745vj8rFCbtCIhyTt8n4l135Kx9VDsIzI55uvvBN+0bjGaE2FwI/9EHlYdP6PCBXajFfcxo9a8w2A==",
6
6
  "_location": "/@syncfusion/ej2-dropdowns",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -33,8 +33,8 @@
33
33
  "/@syncfusion/ej2-spreadsheet",
34
34
  "/@syncfusion/ej2-vue-dropdowns"
35
35
  ],
36
- "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.1.50.tgz",
37
- "_shasum": "d83ce921a44211784a755b3f4fca309370e950d4",
36
+ "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.1.55.tgz",
37
+ "_shasum": "419731acc345965a34b619b56e650f7241c52284",
38
38
  "_spec": "@syncfusion/ej2-dropdowns@*",
39
39
  "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
40
40
  "author": {
@@ -42,12 +42,12 @@
42
42
  },
43
43
  "bundleDependencies": false,
44
44
  "dependencies": {
45
- "@syncfusion/ej2-base": "~20.1.50",
46
- "@syncfusion/ej2-data": "~20.1.47",
47
- "@syncfusion/ej2-inputs": "~20.1.48",
48
- "@syncfusion/ej2-lists": "~20.1.47",
49
- "@syncfusion/ej2-navigations": "~20.1.51",
50
- "@syncfusion/ej2-popups": "~20.1.47"
45
+ "@syncfusion/ej2-base": "~20.1.56",
46
+ "@syncfusion/ej2-data": "~20.1.55",
47
+ "@syncfusion/ej2-inputs": "~20.1.55",
48
+ "@syncfusion/ej2-lists": "~20.1.55",
49
+ "@syncfusion/ej2-navigations": "~20.1.56",
50
+ "@syncfusion/ej2-popups": "~20.1.55"
51
51
  },
52
52
  "deprecated": false,
53
53
  "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
72
72
  "module": "./index.js",
73
73
  "name": "@syncfusion/ej2-dropdowns",
74
74
  "typings": "index.d.ts",
75
- "version": "20.1.51",
75
+ "version": "20.1.56",
76
76
  "sideEffects": false
77
77
  }
@@ -202,7 +202,9 @@ var AutoComplete = /** @class */ (function (_super) {
202
202
  this.setScrollPosition(e);
203
203
  if (this.autofill && this.isPopupOpen) {
204
204
  this.preventAutoFill = false;
205
- _super.prototype.setAutoFill.call(this, li);
205
+ var isKeyNavigate = (e && e.action === 'down' || e.action === 'up' ||
206
+ e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
207
+ _super.prototype.setAutoFill.call(this, li, isKeyNavigate);
206
208
  }
207
209
  attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
208
210
  }
@@ -338,7 +338,7 @@ var ComboBox = /** @class */ (function (_super) {
338
338
  }
339
339
  }
340
340
  if (!this.isAndroidAutoFill(currentValue)) {
341
- this.setAutoFillSelection(currentValue);
341
+ this.setAutoFillSelection(currentValue, isHover);
342
342
  }
343
343
  }
344
344
  };
@@ -406,7 +406,8 @@ var ComboBox = /** @class */ (function (_super) {
406
406
  e.preventDefault();
407
407
  }
408
408
  };
409
- ComboBox.prototype.setAutoFillSelection = function (currentValue) {
409
+ ComboBox.prototype.setAutoFillSelection = function (currentValue, isKeyNavigate) {
410
+ if (isKeyNavigate === void 0) { isKeyNavigate = false; }
410
411
  var selection = this.getSelectionPoints();
411
412
  var value = this.inputElement.value.substr(0, selection.start);
412
413
  if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {
@@ -414,7 +415,7 @@ var ComboBox = /** @class */ (function (_super) {
414
415
  Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
415
416
  this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);
416
417
  }
417
- else {
418
+ else if (isKeyNavigate) {
418
419
  Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);
419
420
  this.inputElement.setSelectionRange(0, this.inputElement.value.length);
420
421
  }
@@ -84,7 +84,7 @@ export function Search(inputVal, items, searchType, ignoreCase) {
84
84
  for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
85
85
  var item = itemsData[i];
86
86
  var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
87
- 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))) {
87
+ 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))) {
88
88
  itemData.item = item;
89
89
  itemData.index = i;
90
90
  return { item: item, index: i };
@@ -159,7 +159,8 @@ var DropDownBase = /** @class */ (function (_super) {
159
159
  compareValue_1 = value;
160
160
  dataSource.filter(function (item) {
161
161
  var itemValue = getValue(fields.value, item);
162
- if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === compareValue_1.toString()) {
162
+ if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value)
163
+ && itemValue.toString() === compareValue_1.toString()) {
163
164
  value = getValue(fields.text, item);
164
165
  }
165
166
  });
@@ -585,7 +586,7 @@ var DropDownBase = /** @class */ (function (_super) {
585
586
  if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
586
587
  for (var i = 0; i < ulElement.childElementCount; i++) {
587
588
  if (ulElement.children[i].classList.contains('e-list-group-item')) {
588
- if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML == "") {
589
+ if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML === '') {
589
590
  addClass([ulElement.children[i]], HIDE_GROUPLIST);
590
591
  }
591
592
  }
@@ -1072,7 +1073,8 @@ var DropDownBase = /** @class */ (function (_super) {
1072
1073
  }
1073
1074
  if (this.itemTemplate && !isHeader) {
1074
1075
  var itemCheck = this.templateCompiler(this.itemTemplate);
1075
- var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
1076
+ var compiledString = itemCheck ?
1077
+ compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
1076
1078
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1077
1079
  var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
1078
1080
  if (addItemTemplate) {
@@ -1491,7 +1491,6 @@ var DropDownList = /** @class */ (function (_super) {
1491
1491
  if (this.initRemoteRender) {
1492
1492
  this.initial = true;
1493
1493
  this.activeIndex = this.index;
1494
- this.updateValues();
1495
1494
  this.initRemoteRender = false;
1496
1495
  this.initial = false;
1497
1496
  if (this.value && this.dataSource instanceof DataManager) {
@@ -1504,8 +1503,17 @@ var DropDownList = /** @class */ (function (_super) {
1504
1503
  _this.addItem(e.result, list.length);
1505
1504
  _this.updateValues();
1506
1505
  }
1506
+ else {
1507
+ _this.updateValues();
1508
+ }
1507
1509
  });
1508
1510
  }
1511
+ else {
1512
+ this.updateValues();
1513
+ }
1514
+ }
1515
+ else {
1516
+ this.updateValues();
1509
1517
  }
1510
1518
  }
1511
1519
  if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
@@ -2498,7 +2506,7 @@ var DropDownList = /** @class */ (function (_super) {
2498
2506
  if (!this.enabled) {
2499
2507
  return;
2500
2508
  }
2501
- if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&
2509
+ if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&
2502
2510
  this.actionData.list && this.actionData.ulElement) {
2503
2511
  this.actionCompleteData = this.actionData;
2504
2512
  this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);
@@ -172,7 +172,7 @@ export interface DropDownTreeModel extends ComponentModel{
172
172
  cssClass?: string;
173
173
 
174
174
  /**
175
- * This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is
175
+ * This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is
176
176
  * added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
177
177
  *
178
178
  * @default "${value.length} item(s) selected"
@@ -308,7 +308,7 @@ export interface DropDownTreeModel extends ComponentModel{
308
308
  * * Delimiter : Selected items will be visualized in the text content.
309
309
  * * Default : On focus in component will act in the box mode. On blur component will act in the delimiter mode.
310
310
  * * Custom : Selected items will be visualized with the given custom template value. The given custom template
311
- * is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
311
+ * is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
312
312
  */
313
313
  mode?: Mode;
314
314
 
@@ -2276,7 +2276,7 @@ var DropDownTree = /** @class */ (function (_super) {
2276
2276
  addClass([this.inputWrapper], SHOW_CHIP);
2277
2277
  }
2278
2278
  var chip = this.createElement('span', {
2279
- className: CHIP,
2279
+ className: CHIP
2280
2280
  });
2281
2281
  if (!this.inputEle.classList.contains(CHIP_INPUT)) {
2282
2282
  addClass([this.inputEle], CHIP_INPUT);
@@ -2413,7 +2413,7 @@ var DropDownTree = /** @class */ (function (_super) {
2413
2413
  this.ensurePlaceHolder();
2414
2414
  };
2415
2415
  DropDownTree.prototype.resetValue = function (isDynamicChange) {
2416
- if (this.value == [] && this.text == null) {
2416
+ if (this.value === [] && this.text === null) {
2417
2417
  return;
2418
2418
  }
2419
2419
  Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -2795,10 +2795,10 @@ var DropDownTree = /** @class */ (function (_super) {
2795
2795
  this.updateTreeSettings(newProp);
2796
2796
  break;
2797
2797
  case 'customTemplate':
2798
- if (this.mode !== "Custom") {
2798
+ if (this.mode !== 'Custom') {
2799
2799
  return;
2800
2800
  }
2801
- this.chipCollection.innerHTML = "";
2801
+ this.chipCollection.innerHTML = '';
2802
2802
  this.setTagValues();
2803
2803
  break;
2804
2804
  case 'sortOrder':
@@ -3015,7 +3015,7 @@ var DropDownTree = /** @class */ (function (_super) {
3015
3015
  Property('')
3016
3016
  ], DropDownTree.prototype, "cssClass", void 0);
3017
3017
  __decorate([
3018
- Property("${value.length} item(s) selected")
3018
+ Property('${value.length} item(s) selected')
3019
3019
  ], DropDownTree.prototype, "customTemplate", void 0);
3020
3020
  __decorate([
3021
3021
  Property(',')
@@ -426,10 +426,10 @@ var ListBox = /** @class */ (function (_super) {
426
426
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
427
427
  var event = args.event;
428
428
  var wrapper;
429
- if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
430
- || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
431
- if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
432
- || args.target.classList.contains("e-input-group")) {
429
+ if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
430
+ || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
431
+ if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
432
+ || args.target.classList.contains('e-input-group')) {
433
433
  wrapper = args.target.closest('.e-listbox-wrapper');
434
434
  }
435
435
  else {
@@ -484,7 +484,8 @@ var ListBox = /** @class */ (function (_super) {
484
484
  var getArgs = this.getDragArgs({ target: args.droppedElement }, true);
485
485
  var sourceArgs = { previousData: this.dataSource };
486
486
  var destArgs = { previousData: listObj.dataSource };
487
- var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource }, previousIndex: args.previousIndex, currentIndex: args.currentIndex });
487
+ var dragArgs = extend({}, getArgs, { target: args.target, source: { previousData: this.dataSource },
488
+ previousIndex: args.previousIndex, currentIndex: args.currentIndex });
488
489
  if (listObj !== this) {
489
490
  var sourceArgs1 = extend(sourceArgs, { currentData: this.listData });
490
491
  dragArgs = extend(dragArgs, { source: sourceArgs1, destination: destArgs });
@@ -615,7 +616,7 @@ var ListBox = /** @class */ (function (_super) {
615
616
  };
616
617
  ListBox.prototype.updateListItems = function (sourceElem, destElem) {
617
618
  var i = 0;
618
- destElem.innerHTML = "";
619
+ destElem.innerHTML = '';
619
620
  while (i < sourceElem.childNodes.length) {
620
621
  destElem.appendChild(sourceElem.childNodes[i]);
621
622
  }
@@ -804,6 +805,8 @@ var ListBox = /** @class */ (function (_super) {
804
805
  if (this.listData.length === 0) {
805
806
  this.l10nUpdate();
806
807
  }
808
+ this.value = null;
809
+ this.updateToolBarState();
807
810
  };
808
811
  /**
809
812
  * Gets the array of data Object that matches the given array of values.
@@ -1054,7 +1057,10 @@ var ListBox = /** @class */ (function (_super) {
1054
1057
  var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
1055
1058
  if (this.allowFiltering) {
1056
1059
  var filterType = this.inputString === '' ? 'contains' : this.filterType;
1057
- var dataType = this.typeOfData(this.jsonData).typeof;
1060
+ var dataType = this.typeOfData(this.dataSource).typeof;
1061
+ if (dataType === null) {
1062
+ dataType = this.typeOfData(this.jsonData).typeof;
1063
+ }
1058
1064
  if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
1059
1065
  filterQuery.where('', filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
1060
1066
  }
@@ -1650,7 +1656,7 @@ var ListBox = /** @class */ (function (_super) {
1650
1656
  }
1651
1657
  }
1652
1658
  }
1653
- else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
1659
+ else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== 'KeyA') {
1654
1660
  this.upDownKeyHandler(e);
1655
1661
  }
1656
1662
  }
@@ -1694,8 +1700,8 @@ var ListBox = /** @class */ (function (_super) {
1694
1700
  }
1695
1701
  if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
1696
1702
  var selectedidx = Array.prototype.indexOf.call(ul.children, fli);
1697
- var sidx = e.code === "Home" ? 0 : selectedidx;
1698
- var eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
1703
+ var sidx = e.code === 'Home' ? 0 : selectedidx;
1704
+ var eidx = e.code === 'Home' ? selectedidx : ul.children.length - 1;
1699
1705
  for (var i = sidx; i <= eidx; i++) {
1700
1706
  var item = ul.children[i];
1701
1707
  this.notify('updatelist', { li: item, e: {
@@ -450,7 +450,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
450
450
  *
451
451
  * @default false
452
452
  */
453
- addTagOnBlur?: boolean;
453
+ addTagOnBlur?: boolean;
454
454
 
455
455
  /**
456
456
  * Fires each time when selection changes happened in list items after model and input value get affected.
@@ -660,7 +660,7 @@ var MultiSelect = /** @class */ (function (_super) {
660
660
  var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
661
661
  if (this.backCommand) {
662
662
  this.remoteCustomValue = false;
663
- if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {
663
+ if (this.allowCustomValue && list.querySelectorAll('li').length === 0 && this.mainData.length > 0) {
664
664
  this.mainData = [];
665
665
  }
666
666
  this.onActionComplete(list, this.mainData);
@@ -1055,7 +1055,7 @@ var MultiSelect = /** @class */ (function (_super) {
1055
1055
  var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
1056
1056
  filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
1057
1057
  }
1058
- else if (this.mode == "CheckBox") {
1058
+ else if (this.mode === 'CheckBox') {
1059
1059
  this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
1060
1060
  }
1061
1061
  }
@@ -2467,8 +2467,13 @@ var MultiSelect = /** @class */ (function (_super) {
2467
2467
  MultiSelect.prototype.updateDataList = function () {
2468
2468
  if (this.mainList && this.ulElement) {
2469
2469
  var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
2470
- var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
2471
- var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
2470
+ var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
2471
+ this.ulElement.children[0].childElementCount > 0) &&
2472
+ (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
2473
+ var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0
2474
+ && !(this.ulElement.childElementCount < this.mainList.childElementCount)
2475
+ && (this.ulElement.children[0].childElementCount > 0
2476
+ || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
2472
2477
  if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
2473
2478
  //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
2474
2479
  this.mainList = this.ulElement;
@@ -3540,7 +3545,6 @@ var MultiSelect = /** @class */ (function (_super) {
3540
3545
  }
3541
3546
  return valuecheck;
3542
3547
  };
3543
- ;
3544
3548
  MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
3545
3549
  var _this = this;
3546
3550
  this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
@@ -3548,7 +3552,6 @@ var MultiSelect = /** @class */ (function (_super) {
3548
3552
  _this.updateActionList(ulElement, list, event);
3549
3553
  });
3550
3554
  };
3551
- ;
3552
3555
  MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
3553
3556
  if (!this.list) {
3554
3557
  this.onLoadSelect();
@@ -3561,7 +3564,7 @@ var MultiSelect = /** @class */ (function (_super) {
3561
3564
  if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
3562
3565
  valuecheck = this.presentItemValue(this.ulElement);
3563
3566
  }
3564
- if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
3567
+ if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
3565
3568
  && this.listData != null) {
3566
3569
  this.mainData = null;
3567
3570
  this.setDynValue = true;
@@ -3,11 +3,9 @@
3
3
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
4
4
  margin-top: 3px;
5
5
  }
6
-
7
6
  .e-popup.e-ddl .e-input-group {
8
7
  width: auto;
9
8
  }
10
-
11
9
  .e-popup.e-ddl .e-input-group input {
12
10
  line-height: 15px;
13
11
  }
@@ -21,7 +19,6 @@
21
19
  display: flex;
22
20
  width: auto;
23
21
  }
24
-
25
22
  .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
26
23
  border: 0;
27
24
  }
@@ -30,9 +27,7 @@
30
27
  margin-top: 0;
31
28
  }
32
29
 
33
- .e-bigger .e-popup.e-ddl .e-list-item,
34
- .e-bigger .e-popup.e-ddl .e-list-group-item,
35
- .e-bigger .e-popup.e-ddl .e-fixed-head {
30
+ .e-bigger .e-popup.e-ddl .e-list-item, .e-bigger .e-popup.e-ddl .e-list-group-item, .e-bigger .e-popup.e-ddl .e-fixed-head {
36
31
  font-size: 15px;
37
32
  line-height: 40px;
38
33
  padding-left: 0;
@@ -47,8 +42,7 @@
47
42
  padding: 4px 0;
48
43
  }
49
44
 
50
- .e-bigger .e-popup.e-ddl .e-input-group input,
51
- .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
45
+ .e-bigger .e-popup.e-ddl .e-input-group input, .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
52
46
  height: 38px;
53
47
  }
54
48
 
@@ -86,9 +80,7 @@
86
80
  border-bottom: 1px solid #484848;
87
81
  }
88
82
 
89
- .e-bigger.e-small .e-ddl.e-popup .e-list-item,
90
- .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
91
- .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
83
+ .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
92
84
  font-size: 14px;
93
85
  line-height: 34px;
94
86
  padding-left: 0;
@@ -103,11 +95,10 @@
103
95
  padding: 4px 0;
104
96
  }
105
97
 
106
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input,
107
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
98
+ .e-bigger.e-small .e-ddl.e-popup .e-input-group input, .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
108
99
  height: 30px;
109
100
  }
110
101
 
111
102
  .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
112
103
  min-height: 34px;
113
- }
104
+ }
@@ -3,11 +3,9 @@
3
3
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
4
4
  margin-top: 3px;
5
5
  }
6
-
7
6
  .e-popup.e-ddl .e-input-group {
8
7
  width: auto;
9
8
  }
10
-
11
9
  .e-popup.e-ddl .e-input-group input {
12
10
  line-height: 15px;
13
11
  }
@@ -21,7 +19,6 @@
21
19
  display: flex;
22
20
  width: auto;
23
21
  }
24
-
25
22
  .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
26
23
  border: 0;
27
24
  }
@@ -30,9 +27,7 @@
30
27
  margin-top: 0;
31
28
  }
32
29
 
33
- .e-bigger .e-popup.e-ddl .e-list-item,
34
- .e-bigger .e-popup.e-ddl .e-list-group-item,
35
- .e-bigger .e-popup.e-ddl .e-fixed-head {
30
+ .e-bigger .e-popup.e-ddl .e-list-item, .e-bigger .e-popup.e-ddl .e-list-group-item, .e-bigger .e-popup.e-ddl .e-fixed-head {
36
31
  font-size: 15px;
37
32
  line-height: 40px;
38
33
  padding-left: 0;
@@ -47,8 +42,7 @@
47
42
  padding: 4px 0;
48
43
  }
49
44
 
50
- .e-bigger .e-popup.e-ddl .e-input-group input,
51
- .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
45
+ .e-bigger .e-popup.e-ddl .e-input-group input, .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
52
46
  height: 38px;
53
47
  }
54
48
 
@@ -86,9 +80,7 @@
86
80
  border-bottom: 1px solid #ccc;
87
81
  }
88
82
 
89
- .e-bigger.e-small .e-ddl.e-popup .e-list-item,
90
- .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
91
- .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
83
+ .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
92
84
  font-size: 14px;
93
85
  line-height: 34px;
94
86
  padding-left: 0;
@@ -103,11 +95,10 @@
103
95
  padding: 4px 0;
104
96
  }
105
97
 
106
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input,
107
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
98
+ .e-bigger.e-small .e-ddl.e-popup .e-input-group input, .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
108
99
  height: 30px;
109
100
  }
110
101
 
111
102
  .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
112
103
  min-height: 34px;
113
- }
104
+ }
@@ -3,11 +3,9 @@
3
3
  box-shadow: none;
4
4
  margin-top: 3px;
5
5
  }
6
-
7
6
  .e-popup.e-ddl .e-input-group {
8
7
  width: auto;
9
8
  }
10
-
11
9
  .e-popup.e-ddl .e-input-group input {
12
10
  line-height: 15px;
13
11
  }
@@ -21,7 +19,6 @@
21
19
  display: flex;
22
20
  width: auto;
23
21
  }
24
-
25
22
  .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
26
23
  border: 0;
27
24
  }
@@ -37,8 +34,7 @@
37
34
  text-indent: 24px;
38
35
  }
39
36
 
40
- .e-bigger .e-popup.e-ddl .e-list-group-item,
41
- .e-bigger .e-popup.e-ddl .e-fixed-head {
37
+ .e-bigger .e-popup.e-ddl .e-list-group-item, .e-bigger .e-popup.e-ddl .e-fixed-head {
42
38
  font-size: 14px;
43
39
  line-height: 32px;
44
40
  padding-left: 0;
@@ -53,8 +49,7 @@
53
49
  padding: 4px 0;
54
50
  }
55
51
 
56
- .e-bigger .e-popup.e-ddl .e-input-group input,
57
- .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
52
+ .e-bigger .e-popup.e-ddl .e-input-group input, .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
58
53
  font-size: 16px;
59
54
  height: 36px;
60
55
  }
@@ -119,9 +114,7 @@
119
114
  font-size: 10px;
120
115
  }
121
116
 
122
- .e-bigger.e-small .e-ddl.e-popup .e-list-item,
123
- .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
124
- .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
117
+ .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
125
118
  font-size: 14px;
126
119
  line-height: 34px;
127
120
  padding-left: 0;
@@ -136,8 +129,7 @@
136
129
  padding: 4px 0;
137
130
  }
138
131
 
139
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input,
140
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
132
+ .e-bigger.e-small .e-ddl.e-popup .e-input-group input, .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
141
133
  height: 30px;
142
134
  }
143
135
 
@@ -151,4 +143,4 @@
151
143
 
152
144
  .e-bigger .e-input-group.e-ddl .e-control.e-autocomplete ~ .e-ddl-icon {
153
145
  font-size: 10px;
154
- }
146
+ }
@@ -3,11 +3,9 @@
3
3
  box-shadow: none;
4
4
  margin-top: 3px;
5
5
  }
6
-
7
6
  .e-popup.e-ddl .e-input-group {
8
7
  width: auto;
9
8
  }
10
-
11
9
  .e-popup.e-ddl .e-input-group input {
12
10
  line-height: 15px;
13
11
  }
@@ -21,7 +19,6 @@
21
19
  display: flex;
22
20
  width: auto;
23
21
  }
24
-
25
22
  .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
26
23
  border: 0;
27
24
  }
@@ -37,8 +34,7 @@
37
34
  text-indent: 16px;
38
35
  }
39
36
 
40
- .e-bigger .e-popup.e-ddl .e-list-group-item,
41
- .e-bigger .e-popup.e-ddl .e-fixed-head {
37
+ .e-bigger .e-popup.e-ddl .e-list-group-item, .e-bigger .e-popup.e-ddl .e-fixed-head {
42
38
  font-size: 14px;
43
39
  line-height: 32px;
44
40
  padding-left: 0;
@@ -49,8 +45,7 @@
49
45
  padding-left: 0;
50
46
  }
51
47
 
52
- .e-bigger .e-popup.e-ddl .e-input-group input,
53
- .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
48
+ .e-bigger .e-popup.e-ddl .e-input-group input, .e-bigger .e-popup.e-ddl .e-input-group input.e-input {
54
49
  font-size: 16px;
55
50
  height: 36px;
56
51
  }
@@ -130,9 +125,7 @@
130
125
  font-size: 16px;
131
126
  }
132
127
 
133
- .e-bigger.e-small .e-ddl.e-popup .e-list-item,
134
- .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
135
- .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
128
+ .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
136
129
  font-size: 14px;
137
130
  line-height: 34px;
138
131
  padding-left: 0;
@@ -143,11 +136,10 @@
143
136
  padding-left: 4px;
144
137
  }
145
138
 
146
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input,
147
- .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
139
+ .e-bigger.e-small .e-ddl.e-popup .e-input-group input, .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
148
140
  height: 30px;
149
141
  }
150
142
 
151
143
  .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
152
144
  min-height: 34px;
153
- }
145
+ }