@syncfusion/ej2-dropdowns 19.4.40 → 19.4.41
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/README.md +1 -1
- 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 +73 -32
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +74 -32
- 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 +8 -9
- package/src/combo-box/combo-box.js +2 -2
- package/src/common/incremental-search.d.ts +1 -1
- package/src/common/incremental-search.js +1 -1
- package/src/drop-down-base/drop-down-base.js +13 -1
- package/src/list-box/list-box.d.ts +0 -4
- package/src/list-box/list-box.js +0 -3
- package/src/multi-select/multi-select-model.d.ts +1 -1
- package/src/multi-select/multi-select.d.ts +2 -0
- package/src/multi-select/multi-select.js +58 -25
- package/styles/auto-complete/_fluent-definition.scss +2 -0
- package/styles/auto-complete/bootstrap5-dark.css +0 -1
- package/styles/auto-complete/bootstrap5.css +0 -1
- package/styles/bootstrap-dark.css +5 -0
- package/styles/bootstrap.css +5 -0
- package/styles/bootstrap4.css +5 -0
- package/styles/bootstrap5-dark.css +17 -6
- package/styles/bootstrap5.css +17 -6
- package/styles/combo-box/_fluent-definition.scss +2 -0
- package/styles/combo-box/bootstrap5-dark.css +0 -1
- package/styles/combo-box/bootstrap5.css +0 -1
- package/styles/drop-down-base/_fluent-definition.scss +109 -0
- package/styles/drop-down-list/_bootstrap5-definition.scss +0 -1
- package/styles/drop-down-list/_fluent-definition.scss +193 -0
- package/styles/drop-down-list/bootstrap5-dark.css +0 -1
- package/styles/drop-down-list/bootstrap5.css +0 -1
- package/styles/drop-down-list/icons/_bootstrap5.scss +0 -1
- package/styles/drop-down-list/icons/_fluent.scss +14 -0
- package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -58
- package/styles/drop-down-tree/_fluent-definition.scss +71 -0
- package/styles/drop-down-tree/_layout.scss +12 -4
- package/styles/drop-down-tree/_tailwind-definition.scss +1 -0
- package/styles/drop-down-tree/bootstrap5-dark.css +11 -4
- package/styles/drop-down-tree/bootstrap5.css +11 -4
- package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
- package/styles/drop-down-tree/icons/_fluent.scss +11 -0
- package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
- package/styles/drop-down-tree/tailwind-dark.css +1 -0
- package/styles/drop-down-tree/tailwind.css +1 -0
- package/styles/fabric-dark.css +5 -0
- package/styles/fabric.css +5 -0
- package/styles/highcontrast-light.css +5 -0
- package/styles/highcontrast.css +5 -0
- package/styles/list-box/_bootstrap5-definition.scss +2 -2
- package/styles/list-box/_fluent-definition.scss +115 -0
- package/styles/list-box/_layout.scss +1 -6
- package/styles/list-box/bootstrap5-dark.css +1 -1
- package/styles/list-box/bootstrap5.css +1 -1
- package/styles/list-box/icons/_fluent.scss +25 -0
- package/styles/list-box/icons/_tailwind-dark.scss +2 -2
- package/styles/list-box/tailwind-dark.css +3 -3
- package/styles/list-box/tailwind.css +1 -1
- package/styles/material-dark.css +5 -94
- package/styles/material.css +5 -94
- package/styles/multi-select/_bootstrap-dark-definition.scss +1 -0
- package/styles/multi-select/_bootstrap-definition.scss +1 -0
- package/styles/multi-select/_bootstrap4-definition.scss +1 -0
- package/styles/multi-select/_bootstrap5-definition.scss +1 -0
- package/styles/multi-select/_fabric-dark-definition.scss +1 -0
- package/styles/multi-select/_fabric-definition.scss +1 -0
- package/styles/multi-select/_fluent-definition.scss +215 -0
- package/styles/multi-select/_highcontrast-definition.scss +1 -0
- package/styles/multi-select/_highcontrast-light-definition.scss +1 -0
- package/styles/multi-select/_layout.scss +0 -116
- package/styles/multi-select/_material-dark-definition.scss +1 -22
- package/styles/multi-select/_material-definition.scss +1 -22
- package/styles/multi-select/_tailwind-definition.scss +1 -0
- package/styles/multi-select/_theme.scss +5 -0
- package/styles/multi-select/bootstrap-dark.css +5 -0
- package/styles/multi-select/bootstrap.css +5 -0
- package/styles/multi-select/bootstrap4.css +5 -0
- package/styles/multi-select/bootstrap5-dark.css +5 -0
- package/styles/multi-select/bootstrap5.css +5 -0
- package/styles/multi-select/fabric-dark.css +5 -0
- package/styles/multi-select/fabric.css +5 -0
- package/styles/multi-select/highcontrast-light.css +5 -0
- package/styles/multi-select/highcontrast.css +5 -0
- package/styles/multi-select/icons/_fluent.scss +27 -0
- package/styles/multi-select/material-dark.css +5 -94
- package/styles/multi-select/material.css +5 -94
- package/styles/multi-select/tailwind-dark.css +5 -0
- package/styles/multi-select/tailwind.css +5 -0
- package/styles/tailwind-dark.css +9 -3
- package/styles/tailwind.css +7 -1
- package/styles/_all.scss +0 -3
|
@@ -91,7 +91,7 @@ function Search(inputVal, items, searchType, ignoreCase) {
|
|
|
91
91
|
for (let i = 0, itemsData = listItems; i < itemsData.length; i++) {
|
|
92
92
|
const item = itemsData[i];
|
|
93
93
|
const text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
|
|
94
|
-
if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {
|
|
94
|
+
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))) {
|
|
95
95
|
itemData.item = item;
|
|
96
96
|
itemData.index = i;
|
|
97
97
|
return { item: item, index: i };
|
|
@@ -636,7 +636,7 @@ let DropDownBase = class DropDownBase extends Component {
|
|
|
636
636
|
}
|
|
637
637
|
this.bindChildItems(localDataArgs.result, ulElement, fields);
|
|
638
638
|
setTimeout(() => {
|
|
639
|
-
if (this.getModuleName() === 'multiselect' && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
|
|
639
|
+
if (this.getModuleName() === 'multiselect' && this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
|
|
640
640
|
this.updateDataList();
|
|
641
641
|
}
|
|
642
642
|
});
|
|
@@ -770,10 +770,22 @@ let DropDownBase = class DropDownBase extends Component {
|
|
|
770
770
|
const groupValue = select(this.groupTemplate, document).innerHTML.trim();
|
|
771
771
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
772
772
|
const tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
|
|
773
|
+
//EJ2-55168- Group checkbox is not working with group template
|
|
774
|
+
if (this.isGroupChecking) {
|
|
775
|
+
for (var i = 0; i < tempHeaders.length; i++) {
|
|
776
|
+
this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
|
|
777
|
+
}
|
|
778
|
+
}
|
|
773
779
|
}
|
|
774
780
|
else {
|
|
775
781
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
776
782
|
const tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
|
|
783
|
+
//EJ2-55168- Group checkbox is not working with group template
|
|
784
|
+
if (this.isGroupChecking) {
|
|
785
|
+
for (var i = 0; i < tempHeaders.length; i++) {
|
|
786
|
+
this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
|
|
787
|
+
}
|
|
788
|
+
}
|
|
777
789
|
}
|
|
778
790
|
this.renderReactTemplates();
|
|
779
791
|
}
|
|
@@ -7441,7 +7453,7 @@ let ComboBox = class ComboBox extends DropDownList {
|
|
|
7441
7453
|
if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
|
|
7442
7454
|
!isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
|
|
7443
7455
|
const inputValue = this.inputElement.value;
|
|
7444
|
-
const activeItem = Search(inputValue, this.liCollections,
|
|
7456
|
+
const activeItem = Search(inputValue, this.liCollections, this.filterType, true);
|
|
7445
7457
|
const activeElement = activeItem.item;
|
|
7446
7458
|
if (!isNullOrUndefined(activeElement)) {
|
|
7447
7459
|
const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
|
|
@@ -7598,7 +7610,7 @@ let ComboBox = class ComboBox extends DropDownList {
|
|
|
7598
7610
|
else {
|
|
7599
7611
|
this.activeIndex = null;
|
|
7600
7612
|
this.removeSelection();
|
|
7601
|
-
if (this.liCollections && this.liCollections.length
|
|
7613
|
+
if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
|
|
7602
7614
|
this.removeFocus();
|
|
7603
7615
|
}
|
|
7604
7616
|
}
|
|
@@ -8987,7 +8999,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
8987
8999
|
this.mainData = list;
|
|
8988
9000
|
this.mainListCollection = this.liCollections;
|
|
8989
9001
|
}
|
|
8990
|
-
else if (
|
|
9002
|
+
else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
|
|
8991
9003
|
this.mainData = list;
|
|
8992
9004
|
}
|
|
8993
9005
|
if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
|
|
@@ -11003,7 +11015,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11003
11015
|
updateActionCompleteData(li, item) {
|
|
11004
11016
|
if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
|
|
11005
11017
|
this.mainList = this.ulElement;
|
|
11006
|
-
|
|
11018
|
+
if (this.hideSelectedItem) {
|
|
11019
|
+
addClass([li], HIDE_LIST);
|
|
11020
|
+
}
|
|
11007
11021
|
}
|
|
11008
11022
|
}
|
|
11009
11023
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -11664,7 +11678,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11664
11678
|
'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
|
|
11665
11679
|
}
|
|
11666
11680
|
if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
|
|
11667
|
-
let target = (event ? event.target : null);
|
|
11681
|
+
let target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
|
|
11668
11682
|
target = (event && event.keyCode === 32) ? list : target;
|
|
11669
11683
|
target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
|
|
11670
11684
|
if (target && target.classList.contains('e-list-group-item')) {
|
|
@@ -12061,6 +12075,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
12061
12075
|
}
|
|
12062
12076
|
this.renderPopup();
|
|
12063
12077
|
}
|
|
12078
|
+
presentItemValue(ulElement) {
|
|
12079
|
+
let valuecheck = [];
|
|
12080
|
+
for (let i = 0; i < this.value.length; i++) {
|
|
12081
|
+
let checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
|
|
12082
|
+
if (!checkEle) {
|
|
12083
|
+
valuecheck.push(this.value[i]);
|
|
12084
|
+
}
|
|
12085
|
+
}
|
|
12086
|
+
return valuecheck;
|
|
12087
|
+
}
|
|
12088
|
+
;
|
|
12089
|
+
addNonPresentItems(valuecheck, ulElement, list, event) {
|
|
12090
|
+
this.dataSource.executeQuery(this.getForQuery(valuecheck)).then((e) => {
|
|
12091
|
+
this.addItem(e.result, list.length);
|
|
12092
|
+
this.updateActionList(ulElement, list, event);
|
|
12093
|
+
});
|
|
12094
|
+
}
|
|
12095
|
+
;
|
|
12064
12096
|
updateVal(newProp, oldProp, prop) {
|
|
12065
12097
|
if (!this.list) {
|
|
12066
12098
|
this.onLoadSelect();
|
|
@@ -12069,31 +12101,43 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
12069
12101
|
this.onLoadSelect();
|
|
12070
12102
|
}
|
|
12071
12103
|
else {
|
|
12072
|
-
|
|
12073
|
-
|
|
12074
|
-
|
|
12075
|
-
}
|
|
12076
|
-
if (isNullOrUndefined(this.value) || this.value.length === 0) {
|
|
12077
|
-
this.tempValues = oldProp;
|
|
12078
|
-
}
|
|
12079
|
-
// eslint-disable-next-line
|
|
12080
|
-
if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
|
|
12081
|
-
&& this.isPopupOpen() && this.mainData !== this.listData) {
|
|
12082
|
-
const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
|
|
12083
|
-
this.onActionComplete(list, this.mainData);
|
|
12104
|
+
let valuecheck = [];
|
|
12105
|
+
if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
|
|
12106
|
+
valuecheck = this.presentItemValue(this.ulElement);
|
|
12084
12107
|
}
|
|
12085
|
-
this.
|
|
12086
|
-
|
|
12087
|
-
this.
|
|
12108
|
+
if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
|
|
12109
|
+
&& this.listData != null) {
|
|
12110
|
+
this.mainData = null;
|
|
12111
|
+
this.setDynValue = true;
|
|
12112
|
+
this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
|
|
12088
12113
|
}
|
|
12089
|
-
|
|
12090
|
-
|
|
12091
|
-
|
|
12092
|
-
|
|
12093
|
-
|
|
12094
|
-
this.
|
|
12114
|
+
else {
|
|
12115
|
+
if (prop === 'text') {
|
|
12116
|
+
this.initialTextUpdate();
|
|
12117
|
+
newProp = this.value;
|
|
12118
|
+
}
|
|
12119
|
+
if (isNullOrUndefined(this.value) || this.value.length === 0) {
|
|
12120
|
+
this.tempValues = oldProp;
|
|
12121
|
+
}
|
|
12122
|
+
// eslint-disable-next-line
|
|
12123
|
+
if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
|
|
12124
|
+
&& this.isPopupOpen() && this.mainData !== this.listData) {
|
|
12125
|
+
const list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
|
|
12126
|
+
this.onActionComplete(list, this.mainData);
|
|
12127
|
+
}
|
|
12128
|
+
this.initialValueUpdate();
|
|
12129
|
+
if (this.mode !== 'Box' && !this.inputFocus) {
|
|
12130
|
+
this.updateDelimView();
|
|
12131
|
+
}
|
|
12132
|
+
if (!this.inputFocus) {
|
|
12133
|
+
this.refreshInputHight();
|
|
12134
|
+
}
|
|
12135
|
+
this.refreshPlaceHolder();
|
|
12136
|
+
if (this.mode !== 'CheckBox' && this.changeOnBlur) {
|
|
12137
|
+
this.updateValueState(null, newProp, oldProp);
|
|
12138
|
+
}
|
|
12139
|
+
this.checkPlaceholderSize();
|
|
12095
12140
|
}
|
|
12096
|
-
this.checkPlaceholderSize();
|
|
12097
12141
|
}
|
|
12098
12142
|
if (!this.changeOnBlur) {
|
|
12099
12143
|
this.updateValueState(null, newProp, oldProp);
|
|
@@ -13570,9 +13614,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
13570
13614
|
args.items = this.getDataByValues([dragValue]);
|
|
13571
13615
|
}
|
|
13572
13616
|
this.trigger('beforeDrop', args);
|
|
13573
|
-
if (args.isDragAll !== null) {
|
|
13574
|
-
this.allowDragAll = args.isDragAll;
|
|
13575
|
-
}
|
|
13576
13617
|
}
|
|
13577
13618
|
dragEnd(args) {
|
|
13578
13619
|
let listData;
|