@syncfusion/ej2-dropdowns 23.1.44 → 23.2.4

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 (39) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/ej2-dropdowns.min.js +2 -2
  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 +23 -4
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +23 -3
  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 +12 -12
  13. package/src/drop-down-list/drop-down-list.js +4 -1
  14. package/src/list-box/list-box.d.ts +3 -0
  15. package/src/list-box/list-box.js +19 -2
  16. package/styles/bootstrap-dark.css +5 -0
  17. package/styles/bootstrap5-dark.css +2 -1
  18. package/styles/bootstrap5.css +2 -1
  19. package/styles/fabric-dark.css +5 -0
  20. package/styles/fluent-dark.css +2 -1
  21. package/styles/fluent.css +2 -1
  22. package/styles/highcontrast.css +5 -0
  23. package/styles/multi-select/_bootstrap-dark-definition.scss +5 -0
  24. package/styles/multi-select/_bootstrap5-definition.scss +2 -1
  25. package/styles/multi-select/_fabric-dark-definition.scss +5 -0
  26. package/styles/multi-select/_fluent-definition.scss +2 -1
  27. package/styles/multi-select/_highcontrast-definition.scss +5 -0
  28. package/styles/multi-select/_tailwind-definition.scss +2 -1
  29. package/styles/multi-select/bootstrap-dark.css +5 -0
  30. package/styles/multi-select/bootstrap5-dark.css +2 -1
  31. package/styles/multi-select/bootstrap5.css +2 -1
  32. package/styles/multi-select/fabric-dark.css +5 -0
  33. package/styles/multi-select/fluent-dark.css +2 -1
  34. package/styles/multi-select/fluent.css +2 -1
  35. package/styles/multi-select/highcontrast.css +5 -0
  36. package/styles/multi-select/tailwind-dark.css +2 -1
  37. package/styles/multi-select/tailwind.css +2 -1
  38. package/styles/tailwind-dark.css +2 -1
  39. package/styles/tailwind.css +2 -1
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 23.1.44
3
+ * version : 23.2.4
4
4
  * Copyright Syncfusion Inc. 2001 - 2023. 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@23.1.43",
3
+ "_id": "@syncfusion/ej2-dropdowns@23.1.44",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-Xr9PivtmGzoHdHTa7A/OdylJZvAicZq8KjyH32IBZmIu8LXxy4CnqwqZE4iArWew6cieHg2T4iisgBkXfhXM0w==",
5
+ "_integrity": "sha512-xpVvjJ33ptKhKUgN02wqfy9sn43M4pxtaw+6gAykd1J/vJltDtiCXlvb3ukUr47N4Y8s2gzz/ZGdAInhXs3ryQ==",
6
6
  "_location": "/@syncfusion/ej2-dropdowns",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -34,8 +34,8 @@
34
34
  "/@syncfusion/ej2-spreadsheet",
35
35
  "/@syncfusion/ej2-vue-dropdowns"
36
36
  ],
37
- "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-23.1.43.tgz",
38
- "_shasum": "387fcadf249d432ca74bb8349ea730b7bfe7e6b7",
37
+ "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-23.1.44.tgz",
38
+ "_shasum": "5a4a75b06bd073b401df9ed84e32f708df64431c",
39
39
  "_spec": "@syncfusion/ej2-dropdowns@*",
40
40
  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
41
41
  "author": {
@@ -43,13 +43,13 @@
43
43
  },
44
44
  "bundleDependencies": false,
45
45
  "dependencies": {
46
- "@syncfusion/ej2-base": "~23.1.41",
47
- "@syncfusion/ej2-data": "~23.1.44",
48
- "@syncfusion/ej2-inputs": "~23.1.43",
49
- "@syncfusion/ej2-lists": "~23.1.43",
50
- "@syncfusion/ej2-navigations": "~23.1.44",
51
- "@syncfusion/ej2-notifications": "~23.1.40",
52
- "@syncfusion/ej2-popups": "~23.1.44"
46
+ "@syncfusion/ej2-base": "~23.2.4",
47
+ "@syncfusion/ej2-data": "~23.2.4",
48
+ "@syncfusion/ej2-inputs": "~23.2.4",
49
+ "@syncfusion/ej2-lists": "~23.2.4",
50
+ "@syncfusion/ej2-navigations": "~23.2.4",
51
+ "@syncfusion/ej2-notifications": "~23.2.4",
52
+ "@syncfusion/ej2-popups": "~23.2.4"
53
53
  },
54
54
  "deprecated": false,
55
55
  "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
74
74
  "module": "./index.js",
75
75
  "name": "@syncfusion/ej2-dropdowns",
76
76
  "typings": "index.d.ts",
77
- "version": "23.1.44",
77
+ "version": "23.2.4",
78
78
  "sideEffects": false,
79
79
  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
80
80
  }
@@ -807,6 +807,9 @@ var DropDownList = /** @class */ (function (_super) {
807
807
  DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
808
808
  if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
809
809
  var value_1 = this.getItemData().value;
810
+ if (isNullOrUndefined(value_1)) {
811
+ value_1 = 'null';
812
+ }
810
813
  var filterIndex = this.getIndexByValue(value_1);
811
814
  if (!isNullOrUndefined(filterIndex)) {
812
815
  this.activeIndex = filterIndex;
@@ -1035,7 +1038,6 @@ var DropDownList = /** @class */ (function (_super) {
1035
1038
  if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
1036
1039
  this.isDocumentClick = true;
1037
1040
  var isActive = this.isRequested;
1038
- this.isInteracted = false;
1039
1041
  this.hidePopup(e);
1040
1042
  if (!isActive) {
1041
1043
  this.onFocusOut();
@@ -3392,6 +3394,7 @@ var DropDownList = /** @class */ (function (_super) {
3392
3394
  this.isSelectCustom = false;
3393
3395
  this.clearAll(e);
3394
3396
  }
3397
+ this.isInteracted = false;
3395
3398
  };
3396
3399
  /* eslint-disable valid-jsdoc, jsdoc/require-param */
3397
3400
  /**
@@ -133,6 +133,7 @@ export declare class ListBox extends DropDownBase {
133
133
  private isDataSourceUpdate;
134
134
  private dragValue;
135
135
  private customDraggedItem;
136
+ private timer;
136
137
  /**
137
138
  * Sets the CSS classes to root element of this component, which helps to customize the
138
139
  * complete styles.
@@ -364,6 +365,8 @@ export declare class ListBox extends DropDownBase {
364
365
  private initToolbarAndStyles;
365
366
  private triggerDragStart;
366
367
  private triggerDrag;
368
+ private setScrollDown;
369
+ private stopTimer;
367
370
  private beforeDragEnd;
368
371
  private dragEnd;
369
372
  private updateListItems;
@@ -422,6 +422,7 @@ var ListBox = /** @class */ (function (_super) {
422
422
  });
423
423
  };
424
424
  ListBox.prototype.triggerDrag = function (args) {
425
+ var _this = this;
425
426
  var scrollParent;
426
427
  var boundRect;
427
428
  var scrollMoved = 36;
@@ -441,6 +442,7 @@ var ListBox = /** @class */ (function (_super) {
441
442
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
442
443
  var event = args.event;
443
444
  var wrapper;
445
+ this.stopTimer();
444
446
  if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
445
447
  || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')
446
448
  || args.target.closest('.e-list-item'))) {
@@ -460,10 +462,10 @@ var ListBox = /** @class */ (function (_super) {
460
462
  }
461
463
  boundRect = scrollParent.getBoundingClientRect();
462
464
  if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
463
- scrollParent.scrollTop = scrollParent.scrollTop + scrollHeight;
465
+ this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
464
466
  }
465
467
  else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
466
- scrollParent.scrollTop = scrollParent.scrollTop - scrollHeight;
468
+ this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
467
469
  }
468
470
  }
469
471
  if (args.target === null) {
@@ -471,7 +473,19 @@ var ListBox = /** @class */ (function (_super) {
471
473
  }
472
474
  this.trigger('drag', this.getDragArgs(args));
473
475
  };
476
+ ListBox.prototype.setScrollDown = function (scrollElem, scrollPixel, isScrollDown) {
477
+ if (isScrollDown) {
478
+ scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;
479
+ }
480
+ else {
481
+ scrollElem.scrollTop = scrollElem.scrollTop - scrollPixel;
482
+ }
483
+ };
484
+ ListBox.prototype.stopTimer = function () {
485
+ window.clearInterval(this.timer);
486
+ };
474
487
  ListBox.prototype.beforeDragEnd = function (args) {
488
+ this.stopTimer();
475
489
  var items = [];
476
490
  this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
477
491
  if (this.value.indexOf(this.dragValue) > -1) {
@@ -1922,6 +1936,9 @@ var ListBox = /** @class */ (function (_super) {
1922
1936
  var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
1923
1937
  if (backCommand) {
1924
1938
  this.remoteCustomValue = false;
1939
+ if (this.isAngular && this.itemTemplate) {
1940
+ list = this.renderItems(this.listData, fields);
1941
+ }
1925
1942
  this.onActionComplete(list, this.jsonData);
1926
1943
  this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.selectionSettings.showCheckbox, e: this });
1927
1944
  }
@@ -1218,6 +1218,11 @@ ejs-dropdownlist {
1218
1218
  width: 40px;
1219
1219
  }
1220
1220
 
1221
+ .e-multi-select-wrapper .e-searcher input[type=text],
1222
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1223
+ color: #fff;
1224
+ }
1225
+
1221
1226
  .e-multiselect.e-input-group .e-ddl-icon::before {
1222
1227
  content: "\e969";
1223
1228
  font-family: "e-icons";
@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
1331
1331
  width: 24px;
1332
1332
  }
1333
1333
 
1334
- .e-multi-select-wrapper .e-searcher input[type=text] {
1334
+ .e-multi-select-wrapper .e-searcher input[type=text],
1335
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1335
1336
  color: #fff;
1336
1337
  height: 100%;
1337
1338
  }
@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
1331
1331
  width: 24px;
1332
1332
  }
1333
1333
 
1334
- .e-multi-select-wrapper .e-searcher input[type=text] {
1334
+ .e-multi-select-wrapper .e-searcher input[type=text],
1335
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1335
1336
  color: #212529;
1336
1337
  height: 100%;
1337
1338
  }
@@ -1187,6 +1187,11 @@ ejs-dropdownlist {
1187
1187
  margin: 2px 2px 2px 0;
1188
1188
  }
1189
1189
 
1190
+ .e-multi-select-wrapper .e-searcher input[type=text],
1191
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1192
+ color: #fff;
1193
+ }
1194
+
1190
1195
  .e-multiselect.e-input-group .e-ddl-icon::before {
1191
1196
  content: "\e966";
1192
1197
  font-family: "e-icons";
@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
1331
1331
  width: 24px;
1332
1332
  }
1333
1333
 
1334
- .e-multi-select-wrapper .e-searcher input[type=text] {
1334
+ .e-multi-select-wrapper .e-searcher input[type=text],
1335
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1335
1336
  color: #f3f2f1;
1336
1337
  height: 100%;
1337
1338
  }
package/styles/fluent.css CHANGED
@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
1331
1331
  width: 24px;
1332
1332
  }
1333
1333
 
1334
- .e-multi-select-wrapper .e-searcher input[type=text] {
1334
+ .e-multi-select-wrapper .e-searcher input[type=text],
1335
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1335
1336
  color: #201f1e;
1336
1337
  height: 100%;
1337
1338
  }
@@ -1285,6 +1285,11 @@ ejs-dropdownlist {
1285
1285
  width: 30px;
1286
1286
  }
1287
1287
 
1288
+ .e-multi-select-wrapper .e-searcher input[type=text],
1289
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1290
+ color: #fff;
1291
+ }
1292
+
1288
1293
  .e-multiselect.e-input-group .e-ddl-icon::before {
1289
1294
  content: "\e966";
1290
1295
  font-family: "e-icons";
@@ -195,4 +195,9 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
195
195
  height: $ddl-chip-hooker-square;
196
196
  width: $ddl-chip-hooker-square;
197
197
  }
198
+
199
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
200
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
201
+ color: $grey-light-font;
202
+ }
198
203
  }
@@ -218,7 +218,8 @@ $ddl-close-down-icon-left: 35px !default;
218
218
  width: $ddl-chip-hooker-square;
219
219
  }
220
220
 
221
- .e-multi-select-wrapper .e-searcher input[type = 'text'] {
221
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
222
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
222
223
  color: $content-text-color;
223
224
  height: 100%;
224
225
  }
@@ -184,4 +184,9 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
184
184
  .e-small .e-multi-select-wrapper .e-chips {
185
185
  margin: 2px 2px 2px 0;
186
186
  }
187
+
188
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
189
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
190
+ color: #fff;
191
+ }
187
192
  }
@@ -229,7 +229,8 @@ $ddl-small-clear-icon-width: 12px !default;
229
229
  width: $ddl-chip-hooker-square;
230
230
  }
231
231
 
232
- .e-multi-select-wrapper .e-searcher input[type = 'text'] {
232
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
233
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
233
234
  color: $content-text-color;
234
235
  height: 100%;
235
236
  }
@@ -295,4 +295,9 @@ $ddl-closer-margin-top-bigger-small: -3.4em !default;
295
295
  height: 30px;
296
296
  width: 30px;
297
297
  }
298
+
299
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
300
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
301
+ color: #fff;
302
+ }
298
303
  }
@@ -227,7 +227,8 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
227
227
  width: $ddl-chip-hooker-square;
228
228
  }
229
229
 
230
- .e-multi-select-wrapper .e-searcher input[type = 'text'] {
230
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
231
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
231
232
  color: $content-text-color;
232
233
  height: 100%;
233
234
  }
@@ -57,6 +57,11 @@
57
57
  width: 40px;
58
58
  }
59
59
 
60
+ .e-multi-select-wrapper .e-searcher input[type=text],
61
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
62
+ color: #fff;
63
+ }
64
+
60
65
  .e-multiselect.e-input-group .e-ddl-icon::before {
61
66
  content: "\e969";
62
67
  font-family: "e-icons";
@@ -82,7 +82,8 @@
82
82
  width: 24px;
83
83
  }
84
84
 
85
- .e-multi-select-wrapper .e-searcher input[type=text] {
85
+ .e-multi-select-wrapper .e-searcher input[type=text],
86
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
86
87
  color: #fff;
87
88
  height: 100%;
88
89
  }
@@ -82,7 +82,8 @@
82
82
  width: 24px;
83
83
  }
84
84
 
85
- .e-multi-select-wrapper .e-searcher input[type=text] {
85
+ .e-multi-select-wrapper .e-searcher input[type=text],
86
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
86
87
  color: #212529;
87
88
  height: 100%;
88
89
  }
@@ -48,6 +48,11 @@
48
48
  margin: 2px 2px 2px 0;
49
49
  }
50
50
 
51
+ .e-multi-select-wrapper .e-searcher input[type=text],
52
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
53
+ color: #fff;
54
+ }
55
+
51
56
  .e-multiselect.e-input-group .e-ddl-icon::before {
52
57
  content: "\e966";
53
58
  font-family: "e-icons";
@@ -82,7 +82,8 @@
82
82
  width: 24px;
83
83
  }
84
84
 
85
- .e-multi-select-wrapper .e-searcher input[type=text] {
85
+ .e-multi-select-wrapper .e-searcher input[type=text],
86
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
86
87
  color: #f3f2f1;
87
88
  height: 100%;
88
89
  }
@@ -82,7 +82,8 @@
82
82
  width: 24px;
83
83
  }
84
84
 
85
- .e-multi-select-wrapper .e-searcher input[type=text] {
85
+ .e-multi-select-wrapper .e-searcher input[type=text],
86
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
86
87
  color: #201f1e;
87
88
  height: 100%;
88
89
  }
@@ -144,6 +144,11 @@
144
144
  width: 30px;
145
145
  }
146
146
 
147
+ .e-multi-select-wrapper .e-searcher input[type=text],
148
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
149
+ color: #fff;
150
+ }
151
+
147
152
  .e-multiselect.e-input-group .e-ddl-icon::before {
148
153
  content: "\e966";
149
154
  font-family: "e-icons";
@@ -91,7 +91,8 @@
91
91
  width: 28px;
92
92
  }
93
93
 
94
- .e-multi-select-wrapper .e-searcher input[type=text] {
94
+ .e-multi-select-wrapper .e-searcher input[type=text],
95
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
95
96
  color: #fff;
96
97
  height: 100%;
97
98
  }
@@ -91,7 +91,8 @@
91
91
  width: 28px;
92
92
  }
93
93
 
94
- .e-multi-select-wrapper .e-searcher input[type=text] {
94
+ .e-multi-select-wrapper .e-searcher input[type=text],
95
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
95
96
  color: #111827;
96
97
  height: 100%;
97
98
  }
@@ -1347,7 +1347,8 @@ ejs-dropdownlist {
1347
1347
  width: 28px;
1348
1348
  }
1349
1349
 
1350
- .e-multi-select-wrapper .e-searcher input[type=text] {
1350
+ .e-multi-select-wrapper .e-searcher input[type=text],
1351
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1351
1352
  color: #fff;
1352
1353
  height: 100%;
1353
1354
  }
@@ -1347,7 +1347,8 @@ ejs-dropdownlist {
1347
1347
  width: 28px;
1348
1348
  }
1349
1349
 
1350
- .e-multi-select-wrapper .e-searcher input[type=text] {
1350
+ .e-multi-select-wrapper .e-searcher input[type=text],
1351
+ .e-multi-select-wrapper .e-multi-searcher input[type=text] {
1351
1352
  color: #111827;
1352
1353
  height: 100%;
1353
1354
  }