@syncfusion/ej2-dropdowns 27.1.52 → 27.1.55
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/.eslintrc.json +261 -0
- package/dist/ej2-dropdowns.min.js +2 -2
- 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 +105 -37
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +105 -37
- 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 +9 -9
- package/src/drop-down-base/drop-down-base.js +4 -0
- package/src/drop-down-list/drop-down-list.js +2 -2
- package/src/drop-down-tree/drop-down-tree.js +1 -1
- package/src/list-box/list-box.js +8 -2
- package/src/multi-select/multi-select.js +90 -32
- package/styles/bootstrap-dark-lite.css +1 -0
- package/styles/bootstrap-dark.css +1 -0
- package/styles/bootstrap-lite.css +1 -0
- package/styles/bootstrap.css +1 -0
- package/styles/bootstrap4-lite.css +1 -0
- package/styles/bootstrap4.css +1 -0
- package/styles/bootstrap5-dark-lite.css +1 -0
- package/styles/bootstrap5-dark.css +1 -0
- package/styles/bootstrap5-lite.css +1 -0
- package/styles/bootstrap5.3-lite.css +1 -0
- package/styles/bootstrap5.3.css +1 -0
- package/styles/bootstrap5.css +1 -0
- package/styles/drop-down-list/_layout.scss +1 -0
- package/styles/drop-down-list/bootstrap-dark.css +1 -0
- package/styles/drop-down-list/bootstrap.css +1 -0
- package/styles/drop-down-list/bootstrap4.css +1 -0
- package/styles/drop-down-list/bootstrap5-dark.css +1 -0
- package/styles/drop-down-list/bootstrap5.3.css +1 -0
- package/styles/drop-down-list/bootstrap5.css +1 -0
- package/styles/drop-down-list/fabric-dark.css +1 -0
- package/styles/drop-down-list/fabric.css +1 -0
- package/styles/drop-down-list/fluent-dark.css +1 -0
- package/styles/drop-down-list/fluent.css +1 -0
- package/styles/drop-down-list/fluent2.css +1 -0
- package/styles/drop-down-list/highcontrast-light.css +1 -0
- package/styles/drop-down-list/highcontrast.css +1 -0
- package/styles/drop-down-list/material-dark.css +1 -0
- package/styles/drop-down-list/material.css +1 -0
- package/styles/drop-down-list/material3-dark.css +1 -0
- package/styles/drop-down-list/material3.css +1 -0
- package/styles/drop-down-list/tailwind-dark.css +1 -0
- package/styles/drop-down-list/tailwind.css +1 -0
- package/styles/fabric-dark-lite.css +1 -0
- package/styles/fabric-dark.css +1 -0
- package/styles/fabric-lite.css +1 -0
- package/styles/fabric.css +1 -0
- package/styles/fluent-dark-lite.css +1 -0
- package/styles/fluent-dark.css +1 -0
- package/styles/fluent-lite.css +1 -0
- package/styles/fluent.css +1 -0
- package/styles/fluent2-lite.css +1 -0
- package/styles/fluent2.css +1 -0
- package/styles/highcontrast-light-lite.css +1 -0
- package/styles/highcontrast-light.css +1 -0
- package/styles/highcontrast-lite.css +1 -0
- package/styles/highcontrast.css +1 -0
- package/styles/material-dark-lite.css +1 -0
- package/styles/material-dark.css +1 -0
- package/styles/material-lite.css +1 -0
- package/styles/material.css +1 -0
- package/styles/material3-dark-lite.css +1 -0
- package/styles/material3-dark.css +1 -0
- package/styles/material3-lite.css +1 -0
- package/styles/material3.css +1 -0
- package/styles/tailwind-dark-lite.css +1 -0
- package/styles/tailwind-dark.css +1 -0
- package/styles/tailwind-lite.css +1 -0
- package/styles/tailwind.css +1 -0
- package/tslint.json +111 -0
|
@@ -1957,6 +1957,10 @@ let DropDownBase = class DropDownBase extends Component {
|
|
|
1957
1957
|
renderItems(listData, fields, isCheckBoxUpdate) {
|
|
1958
1958
|
let ulElement;
|
|
1959
1959
|
if (this.itemTemplate && listData) {
|
|
1960
|
+
if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
|
|
1961
|
+
this.virtualSelectAllData = listData;
|
|
1962
|
+
listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
|
|
1963
|
+
}
|
|
1960
1964
|
let dataSource = listData;
|
|
1961
1965
|
if (dataSource && fields.groupBy) {
|
|
1962
1966
|
if (this.sortOrder !== 'None') {
|
|
@@ -5009,7 +5013,7 @@ let DropDownList = class DropDownList extends DropDownBase {
|
|
|
5009
5013
|
if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
|
|
5010
5014
|
const value = this.getItemData().value;
|
|
5011
5015
|
const isExist = listData.some((data) => {
|
|
5012
|
-
return (((typeof data === 'string' || typeof data === 'number') && data === value) ||
|
|
5016
|
+
return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value) ||
|
|
5013
5017
|
(getValue(this.fields.value, data) === value));
|
|
5014
5018
|
});
|
|
5015
5019
|
if (!isExist) {
|
|
@@ -5310,7 +5314,7 @@ let DropDownList = class DropDownList extends DropDownBase {
|
|
|
5310
5314
|
this.isNotSearchList = false;
|
|
5311
5315
|
this.isDocumentClick = false;
|
|
5312
5316
|
this.destroyPopup();
|
|
5313
|
-
if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list
|
|
5317
|
+
if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.length > 0) {
|
|
5314
5318
|
this.isActive = true;
|
|
5315
5319
|
if (this.enableVirtualization) {
|
|
5316
5320
|
this.onActionComplete(this.ulElement, this.listData, null, true);
|
|
@@ -8988,7 +8992,7 @@ let DropDownTree = class DropDownTree extends Component {
|
|
|
8988
8992
|
const id = getValue('id', args.data[0]).toString();
|
|
8989
8993
|
this.removeSelectedData(id, true);
|
|
8990
8994
|
}
|
|
8991
|
-
if (!this.isChipDelete && args.isInteracted) {
|
|
8995
|
+
if (!this.isChipDelete && args.isInteracted || (!this.isFilteredData && args.action === 'check' && this.isFromFilterChange)) {
|
|
8992
8996
|
this.setMultiSelect();
|
|
8993
8997
|
this.ensurePlaceHolder();
|
|
8994
8998
|
}
|
|
@@ -14645,7 +14649,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
14645
14649
|
const value = this.allowObjectBinding ?
|
|
14646
14650
|
getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
|
|
14647
14651
|
this.value[this.value.length - 1];
|
|
14648
|
-
const temp =
|
|
14652
|
+
const temp = text;
|
|
14649
14653
|
const textValues = this.text != null && this.text !== '' ? this.text + ',' + temp : temp;
|
|
14650
14654
|
currentText.push(textValues);
|
|
14651
14655
|
this.setProperties({ text: currentText.toString() }, true);
|
|
@@ -14682,11 +14686,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
14682
14686
|
removeClass(collection, 'e-disable');
|
|
14683
14687
|
}
|
|
14684
14688
|
}
|
|
14685
|
-
dispatchSelect(value, eve, element, isNotTrigger, length) {
|
|
14689
|
+
dispatchSelect(value, eve, element, isNotTrigger, length, dataValue, text) {
|
|
14686
14690
|
const list = this.listData;
|
|
14687
14691
|
if (this.initStatus && !isNotTrigger) {
|
|
14688
14692
|
value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
|
|
14689
|
-
const val = this.getDataByValue(value);
|
|
14693
|
+
const val = dataValue ? dataValue : this.getDataByValue(value);
|
|
14690
14694
|
const eventArgs = {
|
|
14691
14695
|
e: eve,
|
|
14692
14696
|
item: element,
|
|
@@ -14720,16 +14724,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
14720
14724
|
this.selectedListData = [(this.getDataByValue(value))];
|
|
14721
14725
|
}
|
|
14722
14726
|
else {
|
|
14723
|
-
if (
|
|
14724
|
-
|
|
14727
|
+
if (dataValue) {
|
|
14728
|
+
if (Array.isArray(this.selectedListData)) {
|
|
14729
|
+
this.selectedListData.push(dataValue);
|
|
14730
|
+
}
|
|
14731
|
+
else {
|
|
14732
|
+
this.selectedListData = [this.selectedListData, dataValue];
|
|
14733
|
+
}
|
|
14725
14734
|
}
|
|
14726
14735
|
else {
|
|
14727
|
-
|
|
14736
|
+
if (Array.isArray(this.selectedListData)) {
|
|
14737
|
+
this.selectedListData.push((this.getDataByValue(value)));
|
|
14738
|
+
}
|
|
14739
|
+
else {
|
|
14740
|
+
this.selectedListData = [this.selectedListData, (this.getDataByValue(value))];
|
|
14741
|
+
}
|
|
14728
14742
|
}
|
|
14729
14743
|
}
|
|
14730
14744
|
}
|
|
14731
14745
|
if ((this.enableVirtualization && value) || !this.enableVirtualization) {
|
|
14732
|
-
this.updateListSelectEventCallback(value, element, eve);
|
|
14746
|
+
this.updateListSelectEventCallback(value, element, eve, text);
|
|
14733
14747
|
}
|
|
14734
14748
|
if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox') {
|
|
14735
14749
|
super.scrollStop();
|
|
@@ -15831,9 +15845,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
15831
15845
|
this.removeValue(value, e, length);
|
|
15832
15846
|
}
|
|
15833
15847
|
}
|
|
15834
|
-
updateListSelectEventCallback(value, li, e) {
|
|
15848
|
+
updateListSelectEventCallback(value, li, e, currentText) {
|
|
15835
15849
|
value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
|
|
15836
|
-
const text = this.getTextByValue(value);
|
|
15850
|
+
const text = currentText ? currentText : this.getTextByValue(value);
|
|
15837
15851
|
if ((this.allowCustomValue || this.allowFiltering) &&
|
|
15838
15852
|
!this.findListElement(this.mainList, 'li', 'data-value', value) &&
|
|
15839
15853
|
(!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
|
|
@@ -16678,7 +16692,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
16678
16692
|
if (this.value && obj[this.fields.value] != null && Array.isArray(this.value) &&
|
|
16679
16693
|
((!this.allowObjectBinding && this.value.indexOf(obj[this.fields.value]) < 0) ||
|
|
16680
16694
|
(this.allowObjectBinding && !this.isObjectInArray(obj[this.fields.value], this.value)))) {
|
|
16681
|
-
|
|
16695
|
+
const value = obj[this.fields.value];
|
|
16696
|
+
const text = (obj[this.fields.text]).toString();
|
|
16697
|
+
this.dispatchSelect(value, event, null, false, length, obj, text);
|
|
16682
16698
|
}
|
|
16683
16699
|
});
|
|
16684
16700
|
}
|
|
@@ -16688,7 +16704,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
16688
16704
|
this.updateValueState(event, this.value, this.tempValues);
|
|
16689
16705
|
this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
|
|
16690
16706
|
}
|
|
16691
|
-
this.updateHiddenElement();
|
|
16707
|
+
this.updateHiddenElement(true);
|
|
16692
16708
|
if (this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
|
|
16693
16709
|
const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
|
|
16694
16710
|
if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
|
|
@@ -16857,7 +16873,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
16857
16873
|
}
|
|
16858
16874
|
}
|
|
16859
16875
|
}
|
|
16860
|
-
updateHiddenElement() {
|
|
16876
|
+
updateHiddenElement(isVirtualSelectAll) {
|
|
16861
16877
|
let hiddenValue = '';
|
|
16862
16878
|
let wrapperText = '';
|
|
16863
16879
|
let data = '';
|
|
@@ -16865,20 +16881,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
16865
16881
|
if (this.mode === 'CheckBox') {
|
|
16866
16882
|
this.value.map((value, index) => {
|
|
16867
16883
|
hiddenValue += '<option selected value ="' + value + '">' + index + '</option>';
|
|
16868
|
-
if (
|
|
16869
|
-
|
|
16870
|
-
|
|
16871
|
-
|
|
16872
|
-
|
|
16884
|
+
if (!isVirtualSelectAll) {
|
|
16885
|
+
if (this.listData) {
|
|
16886
|
+
data = this.getTextByValue(value);
|
|
16887
|
+
}
|
|
16888
|
+
else {
|
|
16889
|
+
data = value;
|
|
16890
|
+
}
|
|
16891
|
+
wrapperText += data + this.delimiterChar + ' ';
|
|
16892
|
+
text.push(data);
|
|
16873
16893
|
}
|
|
16874
|
-
wrapperText += data + this.delimiterChar + ' ';
|
|
16875
|
-
text.push(data);
|
|
16876
16894
|
});
|
|
16877
16895
|
this.hiddenElement.innerHTML = hiddenValue;
|
|
16878
|
-
|
|
16896
|
+
if (!isVirtualSelectAll) {
|
|
16897
|
+
this.updateWrapperText(this.delimiterWrapper, wrapperText);
|
|
16898
|
+
this.setProperties({ text: text.toString() }, true);
|
|
16899
|
+
}
|
|
16879
16900
|
this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
|
|
16880
16901
|
this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);
|
|
16881
|
-
this.setProperties({ text: text.toString() }, true);
|
|
16882
16902
|
this.refreshInputHight();
|
|
16883
16903
|
this.refreshPlaceHolder();
|
|
16884
16904
|
}
|
|
@@ -17898,20 +17918,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
17898
17918
|
if (this.isReact) {
|
|
17899
17919
|
this.clearTemplate();
|
|
17900
17920
|
}
|
|
17901
|
-
if (this.popupObj) {
|
|
17921
|
+
if (!isNullOrUndefined(this.popupObj)) {
|
|
17902
17922
|
this.popupObj.hide();
|
|
17923
|
+
this.popupObj.destroy();
|
|
17903
17924
|
}
|
|
17904
17925
|
this.notify(destroy, {});
|
|
17905
17926
|
this.unwireListEvents();
|
|
17906
17927
|
this.unWireEvent();
|
|
17907
|
-
this.list = null;
|
|
17908
|
-
this.popupObj = null;
|
|
17909
|
-
this.mainList = null;
|
|
17910
|
-
this.mainData = null;
|
|
17911
|
-
this.filterParent = null;
|
|
17912
|
-
this.ulElement = null;
|
|
17913
|
-
this.mainListCollection = null;
|
|
17914
|
-
super.destroy();
|
|
17915
17928
|
const temp = ['readonly', 'aria-disabled', 'placeholder', 'aria-label', 'aria-expanded'];
|
|
17916
17929
|
let length = temp.length;
|
|
17917
17930
|
if (!isNullOrUndefined(this.inputElement)) {
|
|
@@ -17933,6 +17946,56 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
17933
17946
|
remove(this.overAllWrapper);
|
|
17934
17947
|
}
|
|
17935
17948
|
}
|
|
17949
|
+
if (this.popupWrapper && this.popupWrapper.parentElement) {
|
|
17950
|
+
this.popupWrapper.parentElement.remove();
|
|
17951
|
+
}
|
|
17952
|
+
while (this.searchWrapper && this.searchWrapper.firstChild) {
|
|
17953
|
+
this.searchWrapper.removeChild(this.searchWrapper.firstChild);
|
|
17954
|
+
}
|
|
17955
|
+
if (this.searchWrapper && this.searchWrapper.parentElement) {
|
|
17956
|
+
this.searchWrapper.parentElement.remove();
|
|
17957
|
+
}
|
|
17958
|
+
if (this.viewWrapper && this.viewWrapper.parentElement) {
|
|
17959
|
+
this.viewWrapper.parentElement.remove();
|
|
17960
|
+
}
|
|
17961
|
+
if (this.overAllClear && this.overAllClear.parentElement) {
|
|
17962
|
+
this.overAllClear.parentElement.remove();
|
|
17963
|
+
}
|
|
17964
|
+
if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {
|
|
17965
|
+
this.delimiterWrapper.parentElement.remove();
|
|
17966
|
+
}
|
|
17967
|
+
// Remove the select element if it exists
|
|
17968
|
+
const selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
|
|
17969
|
+
if (selectElement && selectElement.parentElement) {
|
|
17970
|
+
selectElement.parentElement.remove();
|
|
17971
|
+
}
|
|
17972
|
+
while (this.componentWrapper && this.componentWrapper.firstChild) {
|
|
17973
|
+
this.componentWrapper.removeChild(this.componentWrapper.firstChild);
|
|
17974
|
+
}
|
|
17975
|
+
if (this.componentWrapper && this.componentWrapper.parentElement) {
|
|
17976
|
+
this.componentWrapper.removeAttribute('class');
|
|
17977
|
+
this.componentWrapper.parentElement.remove();
|
|
17978
|
+
}
|
|
17979
|
+
while (this.popupWrapper && this.popupWrapper.firstChild) {
|
|
17980
|
+
this.popupWrapper.removeChild(this.popupWrapper.firstChild);
|
|
17981
|
+
}
|
|
17982
|
+
if (this.inputElement) {
|
|
17983
|
+
const attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
|
|
17984
|
+
'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
|
|
17985
|
+
'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',
|
|
17986
|
+
'aria-describedby', 'size', 'role', 'type', 'class'];
|
|
17987
|
+
for (let i = 0; i < attrArray.length; i++) {
|
|
17988
|
+
this.inputElement.removeAttribute(attrArray[i]);
|
|
17989
|
+
}
|
|
17990
|
+
}
|
|
17991
|
+
if (this.inputElement) {
|
|
17992
|
+
this.inputElement.remove();
|
|
17993
|
+
}
|
|
17994
|
+
this.list = null;
|
|
17995
|
+
this.popupObj = null;
|
|
17996
|
+
this.mainData = null;
|
|
17997
|
+
this.filterParent = null;
|
|
17998
|
+
this.ulElement = null;
|
|
17936
17999
|
this.componentWrapper = null;
|
|
17937
18000
|
this.overAllClear = null;
|
|
17938
18001
|
this.overAllWrapper = null;
|
|
@@ -17944,14 +18007,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
17944
18007
|
this.popupWrapper = null;
|
|
17945
18008
|
this.inputElement = null;
|
|
17946
18009
|
this.delimiterWrapper = null;
|
|
17947
|
-
this.popupObj = null;
|
|
17948
|
-
this.popupWrapper = null;
|
|
17949
18010
|
this.liCollections = null;
|
|
17950
18011
|
this.header = null;
|
|
17951
18012
|
this.mainList = null;
|
|
17952
18013
|
this.mainListCollection = null;
|
|
17953
18014
|
this.footer = null;
|
|
17954
18015
|
this.selectAllEventEle = null;
|
|
18016
|
+
super.destroy();
|
|
17955
18017
|
}
|
|
17956
18018
|
};
|
|
17957
18019
|
__decorate$5([
|
|
@@ -19363,6 +19425,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
19363
19425
|
liCollElem[i].classList.remove('e-grabbed');
|
|
19364
19426
|
}
|
|
19365
19427
|
}
|
|
19428
|
+
if (this.toolbarSettings.items.length > 0) {
|
|
19429
|
+
this.updateToolBarState();
|
|
19430
|
+
}
|
|
19431
|
+
else if (this.tBListBox && this.tBListBox.toolbarSettings.items.length > 0) {
|
|
19432
|
+
this.tBListBox.updateToolBarState();
|
|
19433
|
+
}
|
|
19366
19434
|
}
|
|
19367
19435
|
updateListItems(sourceElem, destElem) {
|
|
19368
19436
|
destElem.innerHTML = '';
|
|
@@ -19446,9 +19514,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
19446
19514
|
li.setAttribute('aria-disabled', 'true');
|
|
19447
19515
|
}
|
|
19448
19516
|
});
|
|
19449
|
-
if (this.allowFiltering && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {
|
|
19517
|
+
if (this.allowFiltering && this.filterInput && this.filterInput.value !== '' && this.toolbarSettings.items.length > 0) {
|
|
19450
19518
|
let canDisable = false;
|
|
19451
|
-
this.
|
|
19519
|
+
this.ulElement.childNodes.forEach((li) => { if (!li.classList.contains('e-disabled')) {
|
|
19452
19520
|
canDisable = true;
|
|
19453
19521
|
} });
|
|
19454
19522
|
if (!canDisable) {
|