@syncfusion/ej2-dropdowns 19.4.55 → 20.1.50

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 (196) hide show
  1. package/CHANGELOG.md +2 -24
  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 +32 -6
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +31 -5
  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/common/incremental-search.d.ts +1 -0
  13. package/src/common/incremental-search.js +4 -0
  14. package/src/drop-down-tree/drop-down-tree.js +4 -0
  15. package/src/list-box/list-box.js +19 -2
  16. package/src/multi-select/multi-select.js +3 -2
  17. package/styles/auto-complete/_fluent-dark-definition.scss +1 -0
  18. package/styles/auto-complete/bootstrap5-dark.css +7 -0
  19. package/styles/auto-complete/bootstrap5.css +7 -0
  20. package/styles/auto-complete/fluent-dark.css +132 -0
  21. package/styles/auto-complete/fluent-dark.scss +4 -0
  22. package/styles/auto-complete/fluent.css +132 -0
  23. package/styles/auto-complete/fluent.scss +4 -0
  24. package/styles/auto-complete/tailwind-dark.css +1 -57
  25. package/styles/auto-complete/tailwind.css +1 -57
  26. package/styles/bootstrap-dark.css +56 -30
  27. package/styles/bootstrap.css +56 -30
  28. package/styles/bootstrap4.css +56 -30
  29. package/styles/bootstrap5-dark.css +116 -40
  30. package/styles/bootstrap5.css +116 -40
  31. package/styles/combo-box/_fluent-dark-definition.scss +1 -0
  32. package/styles/combo-box/bootstrap5-dark.css +7 -0
  33. package/styles/combo-box/bootstrap5.css +7 -0
  34. package/styles/combo-box/fluent-dark.css +132 -0
  35. package/styles/combo-box/fluent-dark.scss +4 -0
  36. package/styles/combo-box/fluent.css +132 -0
  37. package/styles/combo-box/fluent.scss +4 -0
  38. package/styles/combo-box/tailwind-dark.css +1 -57
  39. package/styles/combo-box/tailwind.css +1 -57
  40. package/styles/drop-down-base/_bootstrap-dark-definition.scss +2 -0
  41. package/styles/drop-down-base/_bootstrap-definition.scss +2 -0
  42. package/styles/drop-down-base/_bootstrap4-definition.scss +2 -0
  43. package/styles/drop-down-base/_bootstrap5-definition.scss +2 -0
  44. package/styles/drop-down-base/_fabric-dark-definition.scss +2 -0
  45. package/styles/drop-down-base/_fabric-definition.scss +2 -0
  46. package/styles/drop-down-base/_fluent-dark-definition.scss +1 -0
  47. package/styles/drop-down-base/_fluent-definition.scss +12 -7
  48. package/styles/drop-down-base/_highcontrast-definition.scss +2 -0
  49. package/styles/drop-down-base/_highcontrast-light-definition.scss +2 -0
  50. package/styles/drop-down-base/_layout.scss +40 -4
  51. package/styles/drop-down-base/_material-dark-definition.scss +2 -0
  52. package/styles/drop-down-base/_material-definition.scss +2 -0
  53. package/styles/drop-down-base/_tailwind-definition.scss +17 -8
  54. package/styles/drop-down-base/_theme.scss +82 -3
  55. package/styles/drop-down-base/bootstrap-dark.css +7 -2
  56. package/styles/drop-down-base/bootstrap.css +7 -2
  57. package/styles/drop-down-base/bootstrap4.css +7 -2
  58. package/styles/drop-down-base/bootstrap5-dark.css +12 -3
  59. package/styles/drop-down-base/bootstrap5.css +12 -3
  60. package/styles/drop-down-base/fabric-dark.css +7 -2
  61. package/styles/drop-down-base/fabric.css +7 -2
  62. package/styles/drop-down-base/fluent-dark.css +397 -0
  63. package/styles/drop-down-base/fluent-dark.scss +3 -0
  64. package/styles/drop-down-base/fluent.css +397 -0
  65. package/styles/drop-down-base/fluent.scss +3 -0
  66. package/styles/drop-down-base/highcontrast-light.css +7 -2
  67. package/styles/drop-down-base/highcontrast.css +7 -2
  68. package/styles/drop-down-base/material-dark.css +7 -2
  69. package/styles/drop-down-base/material.css +7 -2
  70. package/styles/drop-down-base/tailwind-dark.css +103 -14
  71. package/styles/drop-down-base/tailwind.css +103 -14
  72. package/styles/drop-down-list/_bootstrap-dark-definition.scss +1 -1
  73. package/styles/drop-down-list/_bootstrap-definition.scss +1 -1
  74. package/styles/drop-down-list/_bootstrap4-definition.scss +1 -1
  75. package/styles/drop-down-list/_bootstrap5-definition.scss +10 -2
  76. package/styles/drop-down-list/_fabric-dark-definition.scss +1 -1
  77. package/styles/drop-down-list/_fabric-definition.scss +1 -1
  78. package/styles/drop-down-list/_fluent-dark-definition.scss +1 -0
  79. package/styles/drop-down-list/_fluent-definition.scss +10 -19
  80. package/styles/drop-down-list/_highcontrast-definition.scss +1 -1
  81. package/styles/drop-down-list/_highcontrast-light-definition.scss +1 -1
  82. package/styles/drop-down-list/_layout.scss +52 -15
  83. package/styles/drop-down-list/_material-dark-definition.scss +1 -1
  84. package/styles/drop-down-list/_material-definition.scss +1 -1
  85. package/styles/drop-down-list/_tailwind-definition.scss +6 -61
  86. package/styles/drop-down-list/bootstrap-dark.css +28 -6
  87. package/styles/drop-down-list/bootstrap.css +28 -6
  88. package/styles/drop-down-list/bootstrap4.css +28 -6
  89. package/styles/drop-down-list/bootstrap5-dark.css +35 -6
  90. package/styles/drop-down-list/bootstrap5.css +35 -6
  91. package/styles/drop-down-list/fabric-dark.css +28 -6
  92. package/styles/drop-down-list/fabric.css +28 -6
  93. package/styles/drop-down-list/fluent-dark.css +447 -0
  94. package/styles/drop-down-list/fluent-dark.scss +8 -0
  95. package/styles/drop-down-list/fluent.css +447 -0
  96. package/styles/drop-down-list/fluent.scss +8 -0
  97. package/styles/drop-down-list/highcontrast-light.css +28 -6
  98. package/styles/drop-down-list/highcontrast.css +28 -6
  99. package/styles/drop-down-list/icons/_fluent-dark.scss +1 -0
  100. package/styles/drop-down-list/icons/_fluent.scss +1 -1
  101. package/styles/drop-down-list/icons/_tailwind.scss +3 -4
  102. package/styles/drop-down-list/material-dark.css +28 -6
  103. package/styles/drop-down-list/material.css +28 -6
  104. package/styles/drop-down-list/tailwind-dark.css +20 -95
  105. package/styles/drop-down-list/tailwind.css +20 -95
  106. package/styles/drop-down-tree/_bootstrap5-definition.scss +1 -1
  107. package/styles/drop-down-tree/_fluent-dark-definition.scss +1 -0
  108. package/styles/drop-down-tree/_fluent-definition.scss +25 -30
  109. package/styles/drop-down-tree/_layout.scss +94 -27
  110. package/styles/drop-down-tree/_tailwind-definition.scss +2 -1
  111. package/styles/drop-down-tree/_theme.scss +9 -4
  112. package/styles/drop-down-tree/bootstrap5-dark.css +6 -2
  113. package/styles/drop-down-tree/bootstrap5.css +6 -2
  114. package/styles/drop-down-tree/fluent-dark.css +599 -0
  115. package/styles/drop-down-tree/fluent-dark.scss +9 -0
  116. package/styles/drop-down-tree/fluent.css +599 -0
  117. package/styles/drop-down-tree/fluent.scss +9 -0
  118. package/styles/drop-down-tree/icons/_fluent-dark.scss +1 -0
  119. package/styles/drop-down-tree/icons/_fluent.scss +1 -1
  120. package/styles/drop-down-tree/icons/_tailwind-dark.scss +2 -2
  121. package/styles/drop-down-tree/icons/_tailwind.scss +2 -2
  122. package/styles/drop-down-tree/tailwind-dark.css +15 -6
  123. package/styles/drop-down-tree/tailwind.css +15 -6
  124. package/styles/fabric-dark.css +56 -30
  125. package/styles/fabric.css +56 -30
  126. package/styles/fluent-dark.css +3602 -0
  127. package/styles/fluent-dark.scss +7 -0
  128. package/styles/fluent.css +3602 -0
  129. package/styles/fluent.scss +7 -0
  130. package/styles/highcontrast-light.css +58 -31
  131. package/styles/highcontrast.css +58 -31
  132. package/styles/list-box/_bootstrap-dark-definition.scss +98 -102
  133. package/styles/list-box/_bootstrap-definition.scss +94 -98
  134. package/styles/list-box/_bootstrap4-definition.scss +98 -102
  135. package/styles/list-box/_bootstrap5-definition.scss +94 -99
  136. package/styles/list-box/_fabric-dark-definition.scss +98 -102
  137. package/styles/list-box/_fabric-definition.scss +94 -98
  138. package/styles/list-box/_fluent-dark-definition.scss +1 -0
  139. package/styles/list-box/_fluent-definition.scss +95 -100
  140. package/styles/list-box/_highcontrast-definition.scss +94 -98
  141. package/styles/list-box/_highcontrast-light-definition.scss +98 -102
  142. package/styles/list-box/_layout.scss +37 -37
  143. package/styles/list-box/_material-dark-definition.scss +98 -102
  144. package/styles/list-box/_material-definition.scss +94 -98
  145. package/styles/list-box/_tailwind-definition.scss +95 -99
  146. package/styles/list-box/_theme.scss +77 -85
  147. package/styles/list-box/bootstrap-dark.css +2 -12
  148. package/styles/list-box/bootstrap.css +2 -12
  149. package/styles/list-box/bootstrap4.css +2 -12
  150. package/styles/list-box/bootstrap5-dark.css +5 -15
  151. package/styles/list-box/bootstrap5.css +5 -15
  152. package/styles/list-box/fabric-dark.css +2 -12
  153. package/styles/list-box/fabric.css +2 -12
  154. package/styles/list-box/fluent-dark.css +895 -0
  155. package/styles/list-box/fluent-dark.scss +5 -0
  156. package/styles/list-box/fluent.css +895 -0
  157. package/styles/list-box/fluent.scss +5 -0
  158. package/styles/list-box/highcontrast-light.css +2 -12
  159. package/styles/list-box/highcontrast.css +2 -12
  160. package/styles/list-box/icons/_fluent-dark.scss +1 -0
  161. package/styles/list-box/icons/_tailwind-dark.scss +7 -7
  162. package/styles/list-box/icons/_tailwind.scss +7 -7
  163. package/styles/list-box/material-dark.css +4 -14
  164. package/styles/list-box/material.css +4 -14
  165. package/styles/list-box/tailwind-dark.css +17 -24
  166. package/styles/list-box/tailwind.css +17 -24
  167. package/styles/material-dark.css +58 -32
  168. package/styles/material.css +58 -32
  169. package/styles/multi-select/_bootstrap5-definition.scss +8 -4
  170. package/styles/multi-select/_fluent-dark-definition.scss +1 -0
  171. package/styles/multi-select/_fluent-definition.scss +30 -16
  172. package/styles/multi-select/_layout.scss +276 -25
  173. package/styles/multi-select/_tailwind-definition.scss +61 -43
  174. package/styles/multi-select/_theme.scss +79 -15
  175. package/styles/multi-select/bootstrap-dark.css +19 -10
  176. package/styles/multi-select/bootstrap.css +19 -10
  177. package/styles/multi-select/bootstrap4.css +19 -10
  178. package/styles/multi-select/bootstrap5-dark.css +58 -14
  179. package/styles/multi-select/bootstrap5.css +58 -14
  180. package/styles/multi-select/fabric-dark.css +19 -10
  181. package/styles/multi-select/fabric.css +19 -10
  182. package/styles/multi-select/fluent-dark.css +1416 -0
  183. package/styles/multi-select/fluent-dark.scss +9 -0
  184. package/styles/multi-select/fluent.css +1416 -0
  185. package/styles/multi-select/fluent.scss +9 -0
  186. package/styles/multi-select/highcontrast-light.css +21 -11
  187. package/styles/multi-select/highcontrast.css +21 -11
  188. package/styles/multi-select/icons/_fluent-dark.scss +1 -0
  189. package/styles/multi-select/icons/_fluent.scss +32 -3
  190. package/styles/multi-select/icons/_tailwind.scss +3 -3
  191. package/styles/multi-select/material-dark.css +19 -10
  192. package/styles/multi-select/material.css +19 -10
  193. package/styles/multi-select/tailwind-dark.css +166 -126
  194. package/styles/multi-select/tailwind.css +166 -126
  195. package/styles/tailwind-dark.css +297 -253
  196. package/styles/tailwind.css +297 -253
@@ -87,7 +87,8 @@ function Search(inputVal, items, searchType, ignoreCase) {
87
87
  const itemData = { item: null, index: null };
88
88
  if (inputVal && inputVal.length) {
89
89
  const strLength = inputVal.length;
90
- const queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
90
+ let queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
91
+ queryStr = escapeCharRegExp(queryStr);
91
92
  for (let i = 0, itemsData = listItems; i < itemsData.length; i++) {
92
93
  const item = itemsData[i];
93
94
  const text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
@@ -101,6 +102,9 @@ function Search(inputVal, items, searchType, ignoreCase) {
101
102
  }
102
103
  return itemData;
103
104
  }
105
+ function escapeCharRegExp(value) {
106
+ return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
107
+ }
104
108
  function resetIncrementalSearchValues(elementId) {
105
109
  if (prevElementId === elementId) {
106
110
  prevElementId = '';
@@ -5579,6 +5583,7 @@ let DropDownTree = class DropDownTree extends Component {
5579
5583
  nodeSelecting: this.onBeforeSelect.bind(this),
5580
5584
  nodeTemplate: this.itemTemplate
5581
5585
  });
5586
+ this.treeObj.root = this.root ? this.root : this;
5582
5587
  this.treeObj.appendTo('#' + this.tree.id);
5583
5588
  }
5584
5589
  /* To render the popup element */
@@ -6454,6 +6459,9 @@ let DropDownTree = class DropDownTree extends Component {
6454
6459
  if (document.querySelectorAll(template).length) {
6455
6460
  return compile(document.querySelector(template).innerHTML.trim());
6456
6461
  }
6462
+ else {
6463
+ return compile(template);
6464
+ }
6457
6465
  }
6458
6466
  catch (e) {
6459
6467
  return compile(template);
@@ -11077,9 +11085,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
11077
11085
  if (this.mainList && this.ulElement) {
11078
11086
  let isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
11079
11087
  let isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
11080
- let 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));
11088
+ let 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));
11081
11089
  if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
11082
- this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
11090
+ //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
11091
+ this.mainList = this.ulElement;
11083
11092
  }
11084
11093
  }
11085
11094
  }
@@ -14379,6 +14388,11 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
14379
14388
  });
14380
14389
  this.list.setAttribute('aria-activedescendant', li.id);
14381
14390
  }
14391
+ else {
14392
+ selectedLi.forEach((ele) => {
14393
+ ele.setAttribute('aria-selected', 'false');
14394
+ });
14395
+ }
14382
14396
  if (!isKey && (this.maximumSelectionLength > (this.value && this.value.length) || !isSelect) &&
14383
14397
  (this.maximumSelectionLength >= (this.value && this.value.length) || !isSelect) &&
14384
14398
  !(this.maximumSelectionLength < (this.value && this.value.length))) {
@@ -14859,7 +14873,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
14859
14873
  }
14860
14874
  }
14861
14875
  }
14862
- else if (e.keyCode !== 37 && e.keyCode !== 39) {
14876
+ else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
14863
14877
  this.upDownKeyHandler(e);
14864
14878
  }
14865
14879
  }
@@ -14898,9 +14912,21 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
14898
14912
  }
14899
14913
  ul.children[fliIdx].focus();
14900
14914
  ul.children[fliIdx].classList.add('e-focused');
14901
- if (!e.ctrlKey) {
14915
+ if (!e.ctrlKey || !this.selectionSettings.showCheckbox && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
14902
14916
  this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
14903
14917
  }
14918
+ if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
14919
+ let selectedidx = Array.prototype.indexOf.call(ul.children, fli);
14920
+ let sidx = e.code === "Home" ? 0 : selectedidx;
14921
+ let eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
14922
+ for (let i = sidx; i <= eidx; i++) {
14923
+ const item = ul.children[i];
14924
+ this.notify('updatelist', { li: item, e: {
14925
+ target: this.ulElement.getElementsByClassName('e-focused')[0],
14926
+ ctrlKey: e.ctrlKey, shiftKey: e.shiftKey
14927
+ }, module: 'listbox' });
14928
+ }
14929
+ }
14904
14930
  }
14905
14931
  }
14906
14932
  KeyUp(e) {
@@ -15467,5 +15493,5 @@ const listBoxClasses = {
15467
15493
  * export all modules from current location
15468
15494
  */
15469
15495
 
15470
- export { incrementalSearch, Search, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox };
15496
+ export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox };
15471
15497
  //# sourceMappingURL=ej2-dropdowns.es2015.js.map