@syncfusion/ej2-dropdowns 19.4.42 → 19.4.52

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 (69) 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 +73 -20
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +150 -92
  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/drop-down-base/drop-down-base.js +18 -6
  14. package/src/drop-down-list/drop-down-list.js +107 -72
  15. package/src/list-box/list-box.js +4 -3
  16. package/src/multi-select/multi-select.js +18 -8
  17. package/styles/bootstrap-dark.css +18 -4
  18. package/styles/bootstrap.css +18 -4
  19. package/styles/bootstrap4.css +18 -4
  20. package/styles/bootstrap5-dark.css +18 -4
  21. package/styles/bootstrap5.css +18 -4
  22. package/styles/fabric-dark.css +18 -4
  23. package/styles/fabric.css +18 -4
  24. package/styles/highcontrast-light.css +18 -4
  25. package/styles/highcontrast.css +18 -4
  26. package/styles/list-box/_bootstrap-dark-definition.scss +3 -0
  27. package/styles/list-box/_bootstrap-definition.scss +3 -0
  28. package/styles/list-box/_bootstrap4-definition.scss +3 -0
  29. package/styles/list-box/_bootstrap5-definition.scss +3 -0
  30. package/styles/list-box/_fabric-dark-definition.scss +3 -0
  31. package/styles/list-box/_fabric-definition.scss +3 -0
  32. package/styles/list-box/_fluent-definition.scss +3 -0
  33. package/styles/list-box/_highcontrast-definition.scss +3 -0
  34. package/styles/list-box/_highcontrast-light-definition.scss +3 -0
  35. package/styles/list-box/_material-dark-definition.scss +3 -0
  36. package/styles/list-box/_material-definition.scss +3 -0
  37. package/styles/list-box/_tailwind-definition.scss +3 -0
  38. package/styles/list-box/_theme.scss +8 -0
  39. package/styles/list-box/bootstrap-dark.css +10 -0
  40. package/styles/list-box/bootstrap.css +10 -0
  41. package/styles/list-box/bootstrap4.css +10 -0
  42. package/styles/list-box/bootstrap5-dark.css +10 -0
  43. package/styles/list-box/bootstrap5.css +10 -0
  44. package/styles/list-box/fabric-dark.css +10 -0
  45. package/styles/list-box/fabric.css +10 -0
  46. package/styles/list-box/highcontrast-light.css +10 -0
  47. package/styles/list-box/highcontrast.css +10 -0
  48. package/styles/list-box/material-dark.css +10 -0
  49. package/styles/list-box/material.css +10 -0
  50. package/styles/list-box/tailwind-dark.css +10 -0
  51. package/styles/list-box/tailwind.css +10 -0
  52. package/styles/material-dark.css +18 -4
  53. package/styles/material.css +18 -4
  54. package/styles/multi-select/_layout.scss +6 -4
  55. package/styles/multi-select/bootstrap-dark.css +8 -4
  56. package/styles/multi-select/bootstrap.css +8 -4
  57. package/styles/multi-select/bootstrap4.css +8 -4
  58. package/styles/multi-select/bootstrap5-dark.css +8 -4
  59. package/styles/multi-select/bootstrap5.css +8 -4
  60. package/styles/multi-select/fabric-dark.css +8 -4
  61. package/styles/multi-select/fabric.css +8 -4
  62. package/styles/multi-select/highcontrast-light.css +8 -4
  63. package/styles/multi-select/highcontrast.css +8 -4
  64. package/styles/multi-select/material-dark.css +8 -4
  65. package/styles/multi-select/material.css +8 -4
  66. package/styles/multi-select/tailwind-dark.css +8 -4
  67. package/styles/multi-select/tailwind.css +8 -4
  68. package/styles/tailwind-dark.css +18 -4
  69. package/styles/tailwind.css +18 -4
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 19.4.42
3
+ * version : 19.4.52
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@19.4.41",
3
+ "_id": "@syncfusion/ej2-dropdowns@19.4.50",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-Yuv3de+d1eJKKmRoNiuf3a5Yu5EgXmWJbvVDcxbARI3pAqdEyOVwc9lXgcYN4uSQQA6KMGbXenbXvyO79EaeuA==",
5
+ "_integrity": "sha512-QGOybqNswXLGfBBVUE/0SV+yldUhsGaD7afKpCsXy7IUVChGACHOc4UM0tXjg8pzUt34IEeE/2UqidkskhFoVw==",
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-19.4.41.tgz",
37
- "_shasum": "ba3120b9f02ccfcd166cce3ac57f58699e62165a",
36
+ "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.4.50.tgz",
37
+ "_shasum": "a96bfa5151c3c55ebf48b93efa6ee4610536d2ec",
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": "~19.4.42",
46
- "@syncfusion/ej2-data": "~19.4.42",
47
- "@syncfusion/ej2-inputs": "~19.4.42",
48
- "@syncfusion/ej2-lists": "~19.4.38",
49
- "@syncfusion/ej2-navigations": "~19.4.41",
50
- "@syncfusion/ej2-popups": "~19.4.41"
45
+ "@syncfusion/ej2-base": "~19.4.52",
46
+ "@syncfusion/ej2-data": "~19.4.52",
47
+ "@syncfusion/ej2-inputs": "~19.4.52",
48
+ "@syncfusion/ej2-lists": "~19.4.52",
49
+ "@syncfusion/ej2-navigations": "~19.4.52",
50
+ "@syncfusion/ej2-popups": "~19.4.52"
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": "19.4.42",
75
+ "version": "19.4.52",
76
76
  "sideEffects": false
77
77
  }
@@ -67,6 +67,7 @@ var HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
67
67
  var FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';
68
68
  var NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';
69
69
  var ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';
70
+ var HIDE_GROUPLIST = 'e-hide-group-header';
70
71
  /**
71
72
  * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components
72
73
  */
@@ -493,7 +494,7 @@ var DropDownBase = /** @class */ (function (_super) {
493
494
  }
494
495
  _this.bindChildItems(localDataArgs.result, ulElement, fields);
495
496
  setTimeout(function () {
496
- if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
497
+ if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
497
498
  _this.updateDataList();
498
499
  }
499
500
  });
@@ -580,12 +581,23 @@ var DropDownBase = /** @class */ (function (_super) {
580
581
  if (this.isReact) {
581
582
  this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
582
583
  }
583
- this.list.innerHTML = '';
584
584
  this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
585
- this.list.appendChild(ulElement);
586
- this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
587
- this.ulElement = this.list.querySelector('ul');
588
- this.postRender(this.list, list, this.bindEvent);
585
+ if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
586
+ for (var i = 0; i < ulElement.childElementCount; i++) {
587
+ if (ulElement.children[i].classList.contains('e-list-group-item')) {
588
+ if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML == "") {
589
+ addClass([ulElement.children[i]], HIDE_GROUPLIST);
590
+ }
591
+ }
592
+ }
593
+ }
594
+ if (!isNullOrUndefined(this.list)) {
595
+ this.list.innerHTML = '';
596
+ this.list.appendChild(ulElement);
597
+ this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
598
+ this.ulElement = this.list.querySelector('ul');
599
+ this.postRender(this.list, list, this.bindEvent);
600
+ }
589
601
  };
590
602
  /* eslint-disable @typescript-eslint/no-unused-vars */
591
603
  DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {
@@ -2222,7 +2222,7 @@ var DropDownList = /** @class */ (function (_super) {
2222
2222
  DropDownList.prototype.checkCustomValue = function () {
2223
2223
  this.itemData = this.getDataByValue(this.value);
2224
2224
  var dataItem = this.getItemData();
2225
- this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });
2225
+ this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
2226
2226
  };
2227
2227
  DropDownList.prototype.updateInputFields = function () {
2228
2228
  if (this.getModuleName() === 'dropdownlist') {
@@ -2238,160 +2238,195 @@ var DropDownList = /** @class */ (function (_super) {
2238
2238
  * @returns {void}
2239
2239
  */
2240
2240
  DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {
2241
+ var _this = this;
2241
2242
  if (this.getModuleName() === 'dropdownlist') {
2242
2243
  this.checkData(newProp);
2243
2244
  this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
2244
2245
  }
2245
- for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
2246
- var prop = _a[_i];
2246
+ var _loop_1 = function (prop) {
2247
2247
  switch (prop) {
2248
2248
  case 'query':
2249
2249
  case 'dataSource': break;
2250
2250
  case 'htmlAttributes':
2251
- this.setHTMLAttributes();
2251
+ this_1.setHTMLAttributes();
2252
2252
  break;
2253
2253
  case 'width':
2254
- this.setEleWidth(newProp.width);
2254
+ this_1.setEleWidth(newProp.width);
2255
2255
  break;
2256
2256
  case 'placeholder':
2257
- Input.setPlaceholder(newProp.placeholder, this.inputElement);
2257
+ Input.setPlaceholder(newProp.placeholder, this_1.inputElement);
2258
2258
  break;
2259
2259
  case 'filterBarPlaceholder':
2260
- if (this.filterInput) {
2261
- Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);
2260
+ if (this_1.filterInput) {
2261
+ Input.setPlaceholder(newProp.filterBarPlaceholder, this_1.filterInput);
2262
2262
  }
2263
2263
  break;
2264
2264
  case 'readonly':
2265
- if (this.getModuleName() !== 'dropdownlist') {
2266
- Input.setReadonly(newProp.readonly, this.inputElement);
2265
+ if (this_1.getModuleName() !== 'dropdownlist') {
2266
+ Input.setReadonly(newProp.readonly, this_1.inputElement);
2267
2267
  }
2268
- this.setReadOnly();
2268
+ this_1.setReadOnly();
2269
2269
  break;
2270
2270
  case 'cssClass':
2271
- this.setCssClass(newProp.cssClass, oldProp.cssClass);
2271
+ this_1.setCssClass(newProp.cssClass, oldProp.cssClass);
2272
2272
  break;
2273
2273
  case 'enableRtl':
2274
- this.setEnableRtl();
2274
+ this_1.setEnableRtl();
2275
2275
  break;
2276
2276
  case 'enabled':
2277
- this.setEnable();
2277
+ this_1.setEnable();
2278
2278
  break;
2279
2279
  case 'text':
2280
2280
  if (newProp.text === null) {
2281
- this.clearAll();
2281
+ this_1.clearAll();
2282
2282
  break;
2283
2283
  }
2284
- if (!this.list) {
2285
- if (this.dataSource instanceof DataManager) {
2286
- this.initRemoteRender = true;
2284
+ if (!this_1.list) {
2285
+ if (this_1.dataSource instanceof DataManager) {
2286
+ this_1.initRemoteRender = true;
2287
2287
  }
2288
- this.renderList();
2288
+ this_1.renderList();
2289
2289
  }
2290
- if (!this.initRemoteRender) {
2291
- var li = this.getElementByText(newProp.text);
2292
- if (!this.checkValidLi(li)) {
2293
- if (this.liCollections && this.liCollections.length === 100 &&
2294
- this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
2295
- this.setSelectionData(newProp.text, oldProp.text, 'text');
2290
+ if (!this_1.initRemoteRender) {
2291
+ var li = this_1.getElementByText(newProp.text);
2292
+ if (!this_1.checkValidLi(li)) {
2293
+ if (this_1.liCollections && this_1.liCollections.length === 100 &&
2294
+ this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
2295
+ this_1.setSelectionData(newProp.text, oldProp.text, 'text');
2296
+ }
2297
+ else if (newProp.text && this_1.dataSource instanceof DataManager) {
2298
+ var listLength_1 = this_1.getItems().length;
2299
+ var checkField = isNullOrUndefined(this_1.fields.text) ? this_1.fields.value : this_1.fields.text;
2300
+ this_1.typedString = '';
2301
+ this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.text)))
2302
+ .then(function (e) {
2303
+ if (e.result.length > 0) {
2304
+ _this.addItem(e.result, listLength_1);
2305
+ _this.updateValues();
2306
+ }
2307
+ else {
2308
+ _this.setOldText(oldProp.text);
2309
+ }
2310
+ });
2296
2311
  }
2297
2312
  else {
2298
- this.setOldText(oldProp.text);
2313
+ this_1.setOldText(oldProp.text);
2299
2314
  }
2300
2315
  }
2301
- this.updateInputFields();
2316
+ this_1.updateInputFields();
2302
2317
  }
2303
2318
  break;
2304
2319
  case 'value':
2305
2320
  if (newProp.value === null) {
2306
- this.clearAll();
2321
+ this_1.clearAll();
2307
2322
  break;
2308
2323
  }
2309
- this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
2310
- if (!this.list) {
2311
- if (this.dataSource instanceof DataManager) {
2312
- this.initRemoteRender = true;
2324
+ this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
2325
+ if (!this_1.list) {
2326
+ if (this_1.dataSource instanceof DataManager) {
2327
+ this_1.initRemoteRender = true;
2313
2328
  }
2314
- this.renderList();
2329
+ this_1.renderList();
2315
2330
  }
2316
- if (!this.initRemoteRender) {
2317
- var item = this.getElementByValue(newProp.value);
2318
- if (!this.checkValidLi(item)) {
2319
- if (this.liCollections && this.liCollections.length === 100 &&
2320
- this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
2321
- this.setSelectionData(newProp.value, oldProp.value, 'value');
2331
+ if (!this_1.initRemoteRender) {
2332
+ var item = this_1.getElementByValue(newProp.value);
2333
+ if (!this_1.checkValidLi(item)) {
2334
+ if (this_1.liCollections && this_1.liCollections.length === 100 &&
2335
+ this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
2336
+ this_1.setSelectionData(newProp.value, oldProp.value, 'value');
2337
+ }
2338
+ else if (newProp.value && this_1.dataSource instanceof DataManager) {
2339
+ var listLength_2 = this_1.getItems().length;
2340
+ var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
2341
+ this_1.typedString = '';
2342
+ this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.value)))
2343
+ .then(function (e) {
2344
+ if (e.result.length > 0) {
2345
+ _this.addItem(e.result, listLength_2);
2346
+ _this.updateValues();
2347
+ }
2348
+ else {
2349
+ _this.setOldValue(oldProp.value);
2350
+ }
2351
+ });
2322
2352
  }
2323
2353
  else {
2324
- this.setOldValue(oldProp.value);
2354
+ this_1.setOldValue(oldProp.value);
2325
2355
  }
2326
2356
  }
2327
- this.updateInputFields();
2328
- this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
2357
+ this_1.updateInputFields();
2358
+ this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;
2329
2359
  }
2330
2360
  break;
2331
2361
  case 'index':
2332
2362
  if (newProp.index === null) {
2333
- this.clearAll();
2363
+ this_1.clearAll();
2334
2364
  break;
2335
2365
  }
2336
- if (!this.list) {
2337
- if (this.dataSource instanceof DataManager) {
2338
- this.initRemoteRender = true;
2366
+ if (!this_1.list) {
2367
+ if (this_1.dataSource instanceof DataManager) {
2368
+ this_1.initRemoteRender = true;
2339
2369
  }
2340
- this.renderList();
2370
+ this_1.renderList();
2341
2371
  }
2342
- if (!this.initRemoteRender && this.liCollections) {
2343
- var element = this.liCollections[newProp.index];
2344
- if (!this.checkValidLi(element)) {
2345
- if (this.liCollections && this.liCollections.length === 100 &&
2346
- this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
2347
- this.setSelectionData(newProp.index, oldProp.index, 'index');
2372
+ if (!this_1.initRemoteRender && this_1.liCollections) {
2373
+ var element = this_1.liCollections[newProp.index];
2374
+ if (!this_1.checkValidLi(element)) {
2375
+ if (this_1.liCollections && this_1.liCollections.length === 100 &&
2376
+ this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
2377
+ this_1.setSelectionData(newProp.index, oldProp.index, 'index');
2348
2378
  }
2349
2379
  else {
2350
- this.index = oldProp.index;
2380
+ this_1.index = oldProp.index;
2351
2381
  }
2352
2382
  }
2353
- this.updateInputFields();
2383
+ this_1.updateInputFields();
2354
2384
  }
2355
2385
  break;
2356
2386
  case 'footerTemplate':
2357
- if (this.popupObj) {
2358
- this.setFooterTemplate(this.popupObj.element);
2387
+ if (this_1.popupObj) {
2388
+ this_1.setFooterTemplate(this_1.popupObj.element);
2359
2389
  }
2360
2390
  break;
2361
2391
  case 'headerTemplate':
2362
- if (this.popupObj) {
2363
- this.setHeaderTemplate(this.popupObj.element);
2392
+ if (this_1.popupObj) {
2393
+ this_1.setHeaderTemplate(this_1.popupObj.element);
2364
2394
  }
2365
2395
  break;
2366
2396
  case 'valueTemplate':
2367
- if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {
2368
- this.setValueTemplate();
2397
+ if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate != null) {
2398
+ this_1.setValueTemplate();
2369
2399
  }
2370
2400
  break;
2371
2401
  case 'allowFiltering':
2372
- if (this.allowFiltering) {
2373
- this.actionCompleteData = { ulElement: this.ulElement,
2374
- list: this.listData, isUpdated: true };
2375
- this.actionData = this.actionCompleteData;
2376
- this.updateSelectElementData(this.allowFiltering);
2402
+ if (this_1.allowFiltering) {
2403
+ this_1.actionCompleteData = { ulElement: this_1.ulElement,
2404
+ list: this_1.listData, isUpdated: true };
2405
+ this_1.actionData = this_1.actionCompleteData;
2406
+ this_1.updateSelectElementData(this_1.allowFiltering);
2377
2407
  }
2378
2408
  break;
2379
2409
  case 'floatLabelType':
2380
- Input.removeFloating(this.inputWrapper);
2381
- Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder, this.createElement);
2410
+ Input.removeFloating(this_1.inputWrapper);
2411
+ Input.addFloating(this_1.inputElement, newProp.floatLabelType, this_1.placeholder, this_1.createElement);
2382
2412
  break;
2383
2413
  case 'showClearButton':
2384
- Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper, null, this.createElement);
2385
- this.bindClearEvent();
2414
+ Input.setClearButton(newProp.showClearButton, this_1.inputElement, this_1.inputWrapper, null, this_1.createElement);
2415
+ this_1.bindClearEvent();
2386
2416
  break;
2387
2417
  default:
2388
2418
  {
2389
2419
  // eslint-disable-next-line max-len
2390
- var ddlProps = this.getPropObject(prop, newProp, oldProp);
2391
- _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);
2420
+ var ddlProps = this_1.getPropObject(prop, newProp, oldProp);
2421
+ _super.prototype.onPropertyChanged.call(this_1, ddlProps.newProperty, ddlProps.oldProperty);
2392
2422
  }
2393
2423
  break;
2394
2424
  }
2425
+ };
2426
+ var this_1 = this;
2427
+ for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
2428
+ var prop = _a[_i];
2429
+ _loop_1(prop);
2395
2430
  }
2396
2431
  };
2397
2432
  DropDownList.prototype.checkValidLi = function (element) {
@@ -742,9 +742,10 @@ var ListBox = /** @class */ (function (_super) {
742
742
  }
743
743
  if (objValue === dataValue) {
744
744
  itemIdx = this.getIndexByValue(dataValue);
745
- liCollections.push(liElement[itemIdx]);
746
- removeIdxes.push(i);
747
- removeLiIdxes.push(itemIdx);
745
+ var idx = itemIdx === i ? itemIdx : i;
746
+ liCollections.push(liElement[idx]);
747
+ removeIdxes.push(idx);
748
+ removeLiIdxes.push(idx);
748
749
  }
749
750
  }
750
751
  }
@@ -329,7 +329,9 @@ var MultiSelect = /** @class */ (function (_super) {
329
329
  return ariaAttributes;
330
330
  };
331
331
  MultiSelect.prototype.updateListARIA = function () {
332
- attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
332
+ if (!isNullOrUndefined(this.ulElement)) {
333
+ attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
334
+ }
333
335
  var disableStatus = (this.inputElement.disabled) ? true : false;
334
336
  attributes(this.inputElement, this.getAriaAttributes());
335
337
  if (disableStatus) {
@@ -2463,8 +2465,13 @@ var MultiSelect = /** @class */ (function (_super) {
2463
2465
  }
2464
2466
  };
2465
2467
  MultiSelect.prototype.updateDataList = function () {
2466
- 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)))) {
2467
- this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
2468
+ if (this.mainList && this.ulElement) {
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.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
2472
+ if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
2473
+ this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
2474
+ }
2468
2475
  }
2469
2476
  };
2470
2477
  MultiSelect.prototype.isValidLI = function (li) {
@@ -2813,11 +2820,13 @@ var MultiSelect = /** @class */ (function (_super) {
2813
2820
  }
2814
2821
  };
2815
2822
  MultiSelect.prototype.wireListEvents = function () {
2816
- EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
2817
- EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);
2818
- EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);
2819
- EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
2820
- EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
2823
+ if (!isNullOrUndefined(this.list)) {
2824
+ EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
2825
+ EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);
2826
+ EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);
2827
+ EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
2828
+ EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
2829
+ }
2821
2830
  };
2822
2831
  MultiSelect.prototype.unwireListEvents = function () {
2823
2832
  EventHandler.remove(document, 'mousedown', this.onDocumentClick);
@@ -3947,6 +3956,7 @@ var MultiSelect = /** @class */ (function (_super) {
3947
3956
  this.mainData = null;
3948
3957
  this.filterParent = null;
3949
3958
  this.ulElement = null;
3959
+ this.mainListCollection = null;
3950
3960
  _super.prototype.destroy.call(this);
3951
3961
  var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
3952
3962
  var length = temp.length;
@@ -1339,11 +1339,13 @@ ejs-dropdownlist {
1339
1339
  padding: 13px 0 13px 0;
1340
1340
  }
1341
1341
 
1342
- .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
1342
+ .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
1343
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
1343
1344
  width: 0;
1344
1345
  }
1345
1346
 
1346
- .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
1347
+ .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
1348
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
1347
1349
  height: 1px;
1348
1350
  min-height: 1px;
1349
1351
  }
@@ -1471,7 +1473,8 @@ ejs-dropdownlist {
1471
1473
  word-wrap: initial;
1472
1474
  }
1473
1475
 
1474
- .e-multiselect.e-input-group .e-searcher .e-label-top {
1476
+ .e-multiselect.e-input-group .e-searcher .e-label-top,
1477
+ .e-multiselect.e-input-group .e-multi-searcher .e-label-top {
1475
1478
  top: 17px;
1476
1479
  }
1477
1480
 
@@ -1671,7 +1674,8 @@ ejs-dropdownlist {
1671
1674
  padding-left: 6px;
1672
1675
  }
1673
1676
 
1674
- .e-multi-select-list-wrapper .e-hide-listitem {
1677
+ .e-multi-select-list-wrapper .e-hide-listitem,
1678
+ .e-multi-select-list-wrapper .e-hide-group-header {
1675
1679
  display: none;
1676
1680
  }
1677
1681
 
@@ -3056,6 +3060,16 @@ ejs-listbox {
3056
3060
  height: calc(100% - 52px);
3057
3061
  }
3058
3062
 
3063
+ .e-listbox-wrapper.e-select-all .e-list-parent,
3064
+ .e-listbox-container.e-select-all .e-list-parent {
3065
+ height: calc(100% - 40px);
3066
+ }
3067
+
3068
+ .e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
3069
+ .e-listbox-container.e-filter-list.e-select-all .e-list-parent {
3070
+ height: calc(100% - 92px);
3071
+ }
3072
+
3059
3073
  .e-listbox-wrapper .e-icons,
3060
3074
  .e-listbox-container .e-icons {
3061
3075
  color: #f0f0f0;
@@ -1338,11 +1338,13 @@ ejs-dropdownlist {
1338
1338
  padding: 13px 0 13px 0;
1339
1339
  }
1340
1340
 
1341
- .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
1341
+ .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
1342
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
1342
1343
  width: 0;
1343
1344
  }
1344
1345
 
1345
- .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
1346
+ .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
1347
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
1346
1348
  height: 1px;
1347
1349
  min-height: 1px;
1348
1350
  }
@@ -1470,7 +1472,8 @@ ejs-dropdownlist {
1470
1472
  word-wrap: initial;
1471
1473
  }
1472
1474
 
1473
- .e-multiselect.e-input-group .e-searcher .e-label-top {
1475
+ .e-multiselect.e-input-group .e-searcher .e-label-top,
1476
+ .e-multiselect.e-input-group .e-multi-searcher .e-label-top {
1474
1477
  top: 16px;
1475
1478
  }
1476
1479
 
@@ -1670,7 +1673,8 @@ ejs-dropdownlist {
1670
1673
  padding-left: 6px;
1671
1674
  }
1672
1675
 
1673
- .e-multi-select-list-wrapper .e-hide-listitem {
1676
+ .e-multi-select-list-wrapper .e-hide-listitem,
1677
+ .e-multi-select-list-wrapper .e-hide-group-header {
1674
1678
  display: none;
1675
1679
  }
1676
1680
 
@@ -3055,6 +3059,16 @@ ejs-listbox {
3055
3059
  height: calc(100% - 52px);
3056
3060
  }
3057
3061
 
3062
+ .e-listbox-wrapper.e-select-all .e-list-parent,
3063
+ .e-listbox-container.e-select-all .e-list-parent {
3064
+ height: calc(100% - 40px);
3065
+ }
3066
+
3067
+ .e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
3068
+ .e-listbox-container.e-filter-list.e-select-all .e-list-parent {
3069
+ height: calc(100% - 92px);
3070
+ }
3071
+
3058
3072
  .e-listbox-wrapper .e-icons,
3059
3073
  .e-listbox-container .e-icons {
3060
3074
  color: rgba(0, 0, 0, 0.75);
@@ -1475,11 +1475,13 @@ ejs-dropdownlist {
1475
1475
  padding: 13px 0 13px 0;
1476
1476
  }
1477
1477
 
1478
- .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
1478
+ .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
1479
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
1479
1480
  width: 0;
1480
1481
  }
1481
1482
 
1482
- .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
1483
+ .e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
1484
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
1483
1485
  height: 1px;
1484
1486
  min-height: 1px;
1485
1487
  }
@@ -1609,7 +1611,8 @@ ejs-dropdownlist {
1609
1611
  word-wrap: initial;
1610
1612
  }
1611
1613
 
1612
- .e-multiselect.e-input-group .e-searcher .e-label-top {
1614
+ .e-multiselect.e-input-group .e-searcher .e-label-top,
1615
+ .e-multiselect.e-input-group .e-multi-searcher .e-label-top {
1613
1616
  top: 15px;
1614
1617
  }
1615
1618
 
@@ -1824,7 +1827,8 @@ ejs-dropdownlist {
1824
1827
  padding-left: 12px;
1825
1828
  }
1826
1829
 
1827
- .e-multi-select-list-wrapper .e-hide-listitem {
1830
+ .e-multi-select-list-wrapper .e-hide-listitem,
1831
+ .e-multi-select-list-wrapper .e-hide-group-header {
1828
1832
  display: none;
1829
1833
  }
1830
1834
 
@@ -3288,6 +3292,16 @@ ejs-listbox {
3288
3292
  height: calc(100% - 39px);
3289
3293
  }
3290
3294
 
3295
+ .e-listbox-wrapper.e-select-all .e-list-parent,
3296
+ .e-listbox-container.e-select-all .e-list-parent {
3297
+ height: calc(100% - 40px);
3298
+ }
3299
+
3300
+ .e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
3301
+ .e-listbox-container.e-filter-list.e-select-all .e-list-parent {
3302
+ height: calc(100% - 79px);
3303
+ }
3304
+
3291
3305
  .e-listbox-wrapper .e-icons,
3292
3306
  .e-listbox-container .e-icons {
3293
3307
  color: #212529;