@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51
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.
- package/CHANGELOG.md +4 -20
- package/dist/ej2-dropdowns.umd.min.js +2 -2
- package/dist/ej2-dropdowns.umd.min.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es2015.js +32 -6
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +31 -5
- package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
- package/dist/global/ej2-dropdowns.min.js +2 -2
- package/dist/global/ej2-dropdowns.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +11 -11
- package/src/common/incremental-search.d.ts +1 -0
- package/src/common/incremental-search.js +4 -0
- package/src/drop-down-base/drop-down-base.js +1 -0
- package/src/drop-down-tree/drop-down-tree.js +4 -0
- package/src/list-box/list-box.js +20 -3
- package/src/multi-select/multi-select.js +1 -1
- package/styles/auto-complete/_fluent-dark-definition.scss +1 -0
- package/styles/auto-complete/bootstrap5-dark.css +7 -0
- package/styles/auto-complete/bootstrap5.css +7 -0
- package/styles/auto-complete/fluent-dark.css +132 -0
- package/styles/auto-complete/fluent-dark.scss +4 -0
- package/styles/auto-complete/fluent.css +132 -0
- package/styles/auto-complete/fluent.scss +4 -0
- package/styles/auto-complete/tailwind-dark.css +1 -57
- package/styles/auto-complete/tailwind.css +1 -57
- package/styles/bootstrap-dark.css +56 -30
- package/styles/bootstrap.css +56 -30
- package/styles/bootstrap4.css +56 -30
- package/styles/bootstrap5-dark.css +116 -40
- package/styles/bootstrap5.css +116 -40
- package/styles/combo-box/_fluent-dark-definition.scss +1 -0
- package/styles/combo-box/bootstrap5-dark.css +7 -0
- package/styles/combo-box/bootstrap5.css +7 -0
- package/styles/combo-box/fluent-dark.css +132 -0
- package/styles/combo-box/fluent-dark.scss +4 -0
- package/styles/combo-box/fluent.css +132 -0
- package/styles/combo-box/fluent.scss +4 -0
- package/styles/combo-box/tailwind-dark.css +1 -57
- package/styles/combo-box/tailwind.css +1 -57
- package/styles/drop-down-base/_bootstrap-dark-definition.scss +2 -0
- package/styles/drop-down-base/_bootstrap-definition.scss +2 -0
- package/styles/drop-down-base/_bootstrap4-definition.scss +2 -0
- package/styles/drop-down-base/_bootstrap5-definition.scss +2 -0
- package/styles/drop-down-base/_fabric-dark-definition.scss +2 -0
- package/styles/drop-down-base/_fabric-definition.scss +2 -0
- package/styles/drop-down-base/_fluent-dark-definition.scss +1 -0
- package/styles/drop-down-base/_fluent-definition.scss +12 -7
- package/styles/drop-down-base/_highcontrast-definition.scss +2 -0
- package/styles/drop-down-base/_highcontrast-light-definition.scss +2 -0
- package/styles/drop-down-base/_layout.scss +40 -4
- package/styles/drop-down-base/_material-dark-definition.scss +2 -0
- package/styles/drop-down-base/_material-definition.scss +2 -0
- package/styles/drop-down-base/_tailwind-definition.scss +17 -8
- package/styles/drop-down-base/_theme.scss +82 -3
- package/styles/drop-down-base/bootstrap-dark.css +7 -2
- package/styles/drop-down-base/bootstrap.css +7 -2
- package/styles/drop-down-base/bootstrap4.css +7 -2
- package/styles/drop-down-base/bootstrap5-dark.css +12 -3
- package/styles/drop-down-base/bootstrap5.css +12 -3
- package/styles/drop-down-base/fabric-dark.css +7 -2
- package/styles/drop-down-base/fabric.css +7 -2
- package/styles/drop-down-base/fluent-dark.css +397 -0
- package/styles/drop-down-base/fluent-dark.scss +3 -0
- package/styles/drop-down-base/fluent.css +397 -0
- package/styles/drop-down-base/fluent.scss +3 -0
- package/styles/drop-down-base/highcontrast-light.css +7 -2
- package/styles/drop-down-base/highcontrast.css +7 -2
- package/styles/drop-down-base/material-dark.css +7 -2
- package/styles/drop-down-base/material.css +7 -2
- package/styles/drop-down-base/tailwind-dark.css +103 -14
- package/styles/drop-down-base/tailwind.css +103 -14
- package/styles/drop-down-list/_bootstrap-dark-definition.scss +1 -1
- package/styles/drop-down-list/_bootstrap-definition.scss +1 -1
- package/styles/drop-down-list/_bootstrap4-definition.scss +1 -1
- package/styles/drop-down-list/_bootstrap5-definition.scss +10 -2
- package/styles/drop-down-list/_fabric-dark-definition.scss +1 -1
- package/styles/drop-down-list/_fabric-definition.scss +1 -1
- package/styles/drop-down-list/_fluent-dark-definition.scss +1 -0
- package/styles/drop-down-list/_fluent-definition.scss +10 -19
- package/styles/drop-down-list/_highcontrast-definition.scss +1 -1
- package/styles/drop-down-list/_highcontrast-light-definition.scss +1 -1
- package/styles/drop-down-list/_layout.scss +52 -15
- package/styles/drop-down-list/_material-dark-definition.scss +1 -1
- package/styles/drop-down-list/_material-definition.scss +1 -1
- package/styles/drop-down-list/_tailwind-definition.scss +6 -61
- package/styles/drop-down-list/bootstrap-dark.css +28 -6
- package/styles/drop-down-list/bootstrap.css +28 -6
- package/styles/drop-down-list/bootstrap4.css +28 -6
- package/styles/drop-down-list/bootstrap5-dark.css +35 -6
- package/styles/drop-down-list/bootstrap5.css +35 -6
- package/styles/drop-down-list/fabric-dark.css +28 -6
- package/styles/drop-down-list/fabric.css +28 -6
- package/styles/drop-down-list/fluent-dark.css +447 -0
- package/styles/drop-down-list/fluent-dark.scss +8 -0
- package/styles/drop-down-list/fluent.css +447 -0
- package/styles/drop-down-list/fluent.scss +8 -0
- package/styles/drop-down-list/highcontrast-light.css +28 -6
- package/styles/drop-down-list/highcontrast.css +28 -6
- package/styles/drop-down-list/icons/_fluent-dark.scss +1 -0
- package/styles/drop-down-list/icons/_fluent.scss +1 -1
- package/styles/drop-down-list/icons/_tailwind.scss +3 -4
- package/styles/drop-down-list/material-dark.css +28 -6
- package/styles/drop-down-list/material.css +28 -6
- package/styles/drop-down-list/tailwind-dark.css +20 -95
- package/styles/drop-down-list/tailwind.css +20 -95
- package/styles/drop-down-tree/_bootstrap5-definition.scss +1 -1
- package/styles/drop-down-tree/_fluent-dark-definition.scss +1 -0
- package/styles/drop-down-tree/_fluent-definition.scss +25 -30
- package/styles/drop-down-tree/_layout.scss +94 -27
- package/styles/drop-down-tree/_tailwind-definition.scss +2 -1
- package/styles/drop-down-tree/_theme.scss +9 -4
- package/styles/drop-down-tree/bootstrap5-dark.css +6 -2
- package/styles/drop-down-tree/bootstrap5.css +6 -2
- package/styles/drop-down-tree/fluent-dark.css +599 -0
- package/styles/drop-down-tree/fluent-dark.scss +9 -0
- package/styles/drop-down-tree/fluent.css +599 -0
- package/styles/drop-down-tree/fluent.scss +9 -0
- package/styles/drop-down-tree/icons/_fluent-dark.scss +1 -0
- package/styles/drop-down-tree/icons/_fluent.scss +1 -1
- package/styles/drop-down-tree/icons/_tailwind-dark.scss +2 -2
- package/styles/drop-down-tree/icons/_tailwind.scss +2 -2
- package/styles/drop-down-tree/tailwind-dark.css +15 -6
- package/styles/drop-down-tree/tailwind.css +15 -6
- package/styles/fabric-dark.css +56 -30
- package/styles/fabric.css +56 -30
- package/styles/fluent-dark.css +3602 -0
- package/styles/fluent-dark.scss +7 -0
- package/styles/fluent.css +3602 -0
- package/styles/fluent.scss +7 -0
- package/styles/highcontrast-light.css +58 -31
- package/styles/highcontrast.css +58 -31
- package/styles/list-box/_bootstrap-dark-definition.scss +98 -102
- package/styles/list-box/_bootstrap-definition.scss +94 -98
- package/styles/list-box/_bootstrap4-definition.scss +98 -102
- package/styles/list-box/_bootstrap5-definition.scss +94 -99
- package/styles/list-box/_fabric-dark-definition.scss +98 -102
- package/styles/list-box/_fabric-definition.scss +94 -98
- package/styles/list-box/_fluent-dark-definition.scss +1 -0
- package/styles/list-box/_fluent-definition.scss +95 -100
- package/styles/list-box/_highcontrast-definition.scss +94 -98
- package/styles/list-box/_highcontrast-light-definition.scss +98 -102
- package/styles/list-box/_layout.scss +37 -37
- package/styles/list-box/_material-dark-definition.scss +98 -102
- package/styles/list-box/_material-definition.scss +94 -98
- package/styles/list-box/_tailwind-definition.scss +95 -99
- package/styles/list-box/_theme.scss +77 -85
- package/styles/list-box/bootstrap-dark.css +2 -12
- package/styles/list-box/bootstrap.css +2 -12
- package/styles/list-box/bootstrap4.css +2 -12
- package/styles/list-box/bootstrap5-dark.css +5 -15
- package/styles/list-box/bootstrap5.css +5 -15
- package/styles/list-box/fabric-dark.css +2 -12
- package/styles/list-box/fabric.css +2 -12
- package/styles/list-box/fluent-dark.css +895 -0
- package/styles/list-box/fluent-dark.scss +5 -0
- package/styles/list-box/fluent.css +895 -0
- package/styles/list-box/fluent.scss +5 -0
- package/styles/list-box/highcontrast-light.css +2 -12
- package/styles/list-box/highcontrast.css +2 -12
- package/styles/list-box/icons/_fluent-dark.scss +1 -0
- package/styles/list-box/icons/_tailwind-dark.scss +7 -7
- package/styles/list-box/icons/_tailwind.scss +7 -7
- package/styles/list-box/material-dark.css +4 -14
- package/styles/list-box/material.css +4 -14
- package/styles/list-box/tailwind-dark.css +17 -24
- package/styles/list-box/tailwind.css +17 -24
- package/styles/material-dark.css +58 -32
- package/styles/material.css +58 -32
- package/styles/multi-select/_bootstrap5-definition.scss +8 -4
- package/styles/multi-select/_fluent-dark-definition.scss +1 -0
- package/styles/multi-select/_fluent-definition.scss +30 -16
- package/styles/multi-select/_layout.scss +276 -25
- package/styles/multi-select/_tailwind-definition.scss +61 -43
- package/styles/multi-select/_theme.scss +79 -15
- package/styles/multi-select/bootstrap-dark.css +19 -10
- package/styles/multi-select/bootstrap.css +19 -10
- package/styles/multi-select/bootstrap4.css +19 -10
- package/styles/multi-select/bootstrap5-dark.css +58 -14
- package/styles/multi-select/bootstrap5.css +58 -14
- package/styles/multi-select/fabric-dark.css +19 -10
- package/styles/multi-select/fabric.css +19 -10
- package/styles/multi-select/fluent-dark.css +1416 -0
- package/styles/multi-select/fluent-dark.scss +9 -0
- package/styles/multi-select/fluent.css +1416 -0
- package/styles/multi-select/fluent.scss +9 -0
- package/styles/multi-select/highcontrast-light.css +21 -11
- package/styles/multi-select/highcontrast.css +21 -11
- package/styles/multi-select/icons/_fluent-dark.scss +1 -0
- package/styles/multi-select/icons/_fluent.scss +32 -3
- package/styles/multi-select/icons/_tailwind.scss +3 -3
- package/styles/multi-select/material-dark.css +19 -10
- package/styles/multi-select/material.css +19 -10
- package/styles/multi-select/tailwind-dark.css +166 -126
- package/styles/multi-select/tailwind.css +166 -126
- package/styles/tailwind-dark.css +297 -253
- 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
|
-
|
|
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 = '';
|
|
@@ -1030,6 +1034,7 @@ let DropDownBase = class DropDownBase extends Component {
|
|
|
1030
1034
|
dataSource = this.selectData;
|
|
1031
1035
|
}
|
|
1032
1036
|
}
|
|
1037
|
+
dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length ? this.selectData : dataSource;
|
|
1033
1038
|
this.setListData(dataSource, fields, query);
|
|
1034
1039
|
}
|
|
1035
1040
|
}
|
|
@@ -5579,6 +5584,7 @@ let DropDownTree = class DropDownTree extends Component {
|
|
|
5579
5584
|
nodeSelecting: this.onBeforeSelect.bind(this),
|
|
5580
5585
|
nodeTemplate: this.itemTemplate
|
|
5581
5586
|
});
|
|
5587
|
+
this.treeObj.root = this.root ? this.root : this;
|
|
5582
5588
|
this.treeObj.appendTo('#' + this.tree.id);
|
|
5583
5589
|
}
|
|
5584
5590
|
/* To render the popup element */
|
|
@@ -6454,6 +6460,9 @@ let DropDownTree = class DropDownTree extends Component {
|
|
|
6454
6460
|
if (document.querySelectorAll(template).length) {
|
|
6455
6461
|
return compile(document.querySelector(template).innerHTML.trim());
|
|
6456
6462
|
}
|
|
6463
|
+
else {
|
|
6464
|
+
return compile(template);
|
|
6465
|
+
}
|
|
6457
6466
|
}
|
|
6458
6467
|
catch (e) {
|
|
6459
6468
|
return compile(template);
|
|
@@ -11077,7 +11086,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11077
11086
|
if (this.mainList && this.ulElement) {
|
|
11078
11087
|
let isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
|
|
11079
11088
|
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));
|
|
11089
|
+
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
11090
|
if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
|
|
11082
11091
|
//EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
|
|
11083
11092
|
this.mainList = this.ulElement;
|
|
@@ -14275,7 +14284,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
14275
14284
|
let filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
|
|
14276
14285
|
if (this.allowFiltering) {
|
|
14277
14286
|
const filterType = this.inputString === '' ? 'contains' : this.filterType;
|
|
14278
|
-
const dataType = this.typeOfData(this.
|
|
14287
|
+
const dataType = this.typeOfData(this.jsonData).typeof;
|
|
14279
14288
|
if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
|
|
14280
14289
|
filterQuery.where('', filterType, this.inputString, this.ignoreCase, this.ignoreAccent);
|
|
14281
14290
|
}
|
|
@@ -14380,6 +14389,11 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
14380
14389
|
});
|
|
14381
14390
|
this.list.setAttribute('aria-activedescendant', li.id);
|
|
14382
14391
|
}
|
|
14392
|
+
else {
|
|
14393
|
+
selectedLi.forEach((ele) => {
|
|
14394
|
+
ele.setAttribute('aria-selected', 'false');
|
|
14395
|
+
});
|
|
14396
|
+
}
|
|
14383
14397
|
if (!isKey && (this.maximumSelectionLength > (this.value && this.value.length) || !isSelect) &&
|
|
14384
14398
|
(this.maximumSelectionLength >= (this.value && this.value.length) || !isSelect) &&
|
|
14385
14399
|
!(this.maximumSelectionLength < (this.value && this.value.length))) {
|
|
@@ -14860,7 +14874,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
14860
14874
|
}
|
|
14861
14875
|
}
|
|
14862
14876
|
}
|
|
14863
|
-
else if (e.keyCode !== 37 && e.keyCode !== 39) {
|
|
14877
|
+
else if (e.keyCode !== 37 && e.keyCode !== 39 && e.code !== "KeyA") {
|
|
14864
14878
|
this.upDownKeyHandler(e);
|
|
14865
14879
|
}
|
|
14866
14880
|
}
|
|
@@ -14899,9 +14913,21 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
14899
14913
|
}
|
|
14900
14914
|
ul.children[fliIdx].focus();
|
|
14901
14915
|
ul.children[fliIdx].classList.add('e-focused');
|
|
14902
|
-
if (!e.ctrlKey) {
|
|
14916
|
+
if (!e.ctrlKey || !this.selectionSettings.showCheckbox && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
|
|
14903
14917
|
this.selectHandler({ target: ul.children[fliIdx], ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, true);
|
|
14904
14918
|
}
|
|
14919
|
+
if (this.selectionSettings.showCheckbox && e.ctrlKey && e.shiftKey && (e.keyCode === 36 || e.keyCode === 35)) {
|
|
14920
|
+
let selectedidx = Array.prototype.indexOf.call(ul.children, fli);
|
|
14921
|
+
let sidx = e.code === "Home" ? 0 : selectedidx;
|
|
14922
|
+
let eidx = e.code === "Home" ? selectedidx : ul.children.length - 1;
|
|
14923
|
+
for (let i = sidx; i <= eidx; i++) {
|
|
14924
|
+
const item = ul.children[i];
|
|
14925
|
+
this.notify('updatelist', { li: item, e: {
|
|
14926
|
+
target: this.ulElement.getElementsByClassName('e-focused')[0],
|
|
14927
|
+
ctrlKey: e.ctrlKey, shiftKey: e.shiftKey
|
|
14928
|
+
}, module: 'listbox' });
|
|
14929
|
+
}
|
|
14930
|
+
}
|
|
14905
14931
|
}
|
|
14906
14932
|
}
|
|
14907
14933
|
KeyUp(e) {
|
|
@@ -15468,5 +15494,5 @@ const listBoxClasses = {
|
|
|
15468
15494
|
* export all modules from current location
|
|
15469
15495
|
*/
|
|
15470
15496
|
|
|
15471
|
-
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 };
|
|
15497
|
+
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 };
|
|
15472
15498
|
//# sourceMappingURL=ej2-dropdowns.es2015.js.map
|