@syncfusion/ej2-dropdowns 19.3.46 → 19.3.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/CHANGELOG.md +32 -0
- 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 +37 -28
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +37 -28
- 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/drop-down-list/drop-down-list.js +1 -1
- package/src/drop-down-tree/drop-down-tree.d.ts +1 -0
- package/src/drop-down-tree/drop-down-tree.js +9 -8
- package/src/multi-select/checkbox-selection.js +1 -1
- package/src/multi-select/multi-select-model.d.ts +9 -0
- package/src/multi-select/multi-select.d.ts +8 -0
- package/src/multi-select/multi-select.js +26 -18
- package/styles/auto-complete/bootstrap5-dark.css +1 -0
- package/styles/auto-complete/bootstrap5.css +1 -0
- package/styles/bootstrap5-dark.css +1 -0
- package/styles/bootstrap5.css +1 -0
- package/styles/combo-box/bootstrap5-dark.css +1 -0
- package/styles/combo-box/bootstrap5.css +1 -0
- package/styles/drop-down-list/_bootstrap5-definition.scss +1 -0
- package/styles/drop-down-list/bootstrap5-dark.css +1 -0
- package/styles/drop-down-list/bootstrap5.css +1 -0
|
@@ -2129,7 +2129,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
|
|
|
2129
2129
|
if (this.isSelectFocusItem(focusEle)) {
|
|
2130
2130
|
this.setSelection(focusEle, e);
|
|
2131
2131
|
}
|
|
2132
|
-
else {
|
|
2132
|
+
else if (!isNullOrUndefined(this.liCollections)) {
|
|
2133
2133
|
var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
|
|
2134
2134
|
var startIndex = 0;
|
|
2135
2135
|
if (this.getModuleName() === 'autocomplete') {
|
|
@@ -4319,6 +4319,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
4319
4319
|
// eslint-disable-next-line
|
|
4320
4320
|
_this.selectedData = [];
|
|
4321
4321
|
_this.filterDelayTime = 300;
|
|
4322
|
+
_this.isClicked = false;
|
|
4322
4323
|
return _this;
|
|
4323
4324
|
}
|
|
4324
4325
|
/**
|
|
@@ -4734,9 +4735,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
4734
4735
|
this.isClearButtonClick = false;
|
|
4735
4736
|
return;
|
|
4736
4737
|
}
|
|
4737
|
-
if (!this.wrapText && e.target.classList.contains(CHIP_CLOSE)) {
|
|
4738
|
-
this.removeChip(e);
|
|
4739
|
-
}
|
|
4740
4738
|
if (this.isPopupOpen) {
|
|
4741
4739
|
this.hidePopup();
|
|
4742
4740
|
}
|
|
@@ -4807,7 +4805,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
4807
4805
|
this.trigger('blur');
|
|
4808
4806
|
};
|
|
4809
4807
|
DropDownTree.prototype.updateView = function () {
|
|
4810
|
-
if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom') {
|
|
4808
|
+
if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom' || this.inputFocus) {
|
|
4811
4809
|
return;
|
|
4812
4810
|
}
|
|
4813
4811
|
if (this.mode !== 'Box') {
|
|
@@ -5249,10 +5247,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5249
5247
|
this.inputWrapper.insertBefore(this.chipWrapper, this.hiddenElement);
|
|
5250
5248
|
addClass([this.inputWrapper], SHOW_CHIP);
|
|
5251
5249
|
var isValid = this.getValidMode();
|
|
5252
|
-
if (isValid && this.value !== null) {
|
|
5250
|
+
if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
|
|
5253
5251
|
addClass([this.inputEle], CHIP_INPUT);
|
|
5254
5252
|
}
|
|
5255
|
-
else if (this.value === null) {
|
|
5253
|
+
else if (this.value === null || (this.value && this.value.length === 0)) {
|
|
5256
5254
|
addClass([this.chipWrapper], HIDEICON);
|
|
5257
5255
|
}
|
|
5258
5256
|
}
|
|
@@ -5293,8 +5291,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5293
5291
|
}
|
|
5294
5292
|
this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);
|
|
5295
5293
|
if (!isNullOrUndefined(this.checkWrapper)) {
|
|
5294
|
+
this.isClicked = true;
|
|
5296
5295
|
var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);
|
|
5297
5296
|
this.changeState(this.checkWrapper, checkElement.classList.contains(CHECK) ? 'uncheck' : 'check', e);
|
|
5297
|
+
this.isClicked = false;
|
|
5298
5298
|
}
|
|
5299
5299
|
e.preventDefault();
|
|
5300
5300
|
};
|
|
@@ -5526,7 +5526,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5526
5526
|
else {
|
|
5527
5527
|
if (this.showCheckBox) {
|
|
5528
5528
|
this.treeObj.checkedNodes = this.value.slice();
|
|
5529
|
-
setValue('selectedNodes', [], this.treeObj);
|
|
5530
5529
|
this.treeObj.dataBind();
|
|
5531
5530
|
this.setMultiSelect();
|
|
5532
5531
|
}
|
|
@@ -5994,7 +5993,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5994
5993
|
}
|
|
5995
5994
|
var eventArgs = {
|
|
5996
5995
|
action: this.showCheckBox ? state : args.action,
|
|
5997
|
-
isInteracted: args.isInteracted,
|
|
5996
|
+
isInteracted: this.isClicked ? true : args.isInteracted,
|
|
5998
5997
|
item: args.node,
|
|
5999
5998
|
itemData: this.showCheckBox ? checkData[0] : selectData
|
|
6000
5999
|
};
|
|
@@ -6065,6 +6064,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
6065
6064
|
}
|
|
6066
6065
|
var target = args.event.target;
|
|
6067
6066
|
if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {
|
|
6067
|
+
this.isClicked = true;
|
|
6068
6068
|
// eslint-disable-next-line
|
|
6069
6069
|
var getNodeDetails = this.treeObj.getNode(args.node);
|
|
6070
6070
|
if (getNodeDetails.isChecked === 'true') {
|
|
@@ -6073,6 +6073,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
6073
6073
|
else {
|
|
6074
6074
|
this.treeObj.checkAll([args.node]);
|
|
6075
6075
|
}
|
|
6076
|
+
this.isClicked = false;
|
|
6076
6077
|
this.setMultiSelect();
|
|
6077
6078
|
this.ensurePlaceHolder();
|
|
6078
6079
|
}
|
|
@@ -9515,6 +9516,18 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
9515
9516
|
}
|
|
9516
9517
|
this.inputFocus = false;
|
|
9517
9518
|
this.overAllWrapper.classList.remove(FOCUS);
|
|
9519
|
+
if (this.addTagOnBlur) {
|
|
9520
|
+
var dataChecks = this.getValueByText(this.inputElement.value, this.ignoreCase, this.ignoreAccent);
|
|
9521
|
+
var listLiElement = this.findListElement(this.list, 'li', 'data-value', dataChecks);
|
|
9522
|
+
var className = this.hideSelectedItem ? HIDE_LIST : dropDownBaseClasses.selected;
|
|
9523
|
+
var allowChipAddition = (listLiElement && !listLiElement.classList.contains(className)) ? true : false;
|
|
9524
|
+
if (allowChipAddition) {
|
|
9525
|
+
this.updateListSelection(listLiElement, eve);
|
|
9526
|
+
if (this.mode === 'Delimiter') {
|
|
9527
|
+
this.updateDelimeter(this.delimiterChar);
|
|
9528
|
+
}
|
|
9529
|
+
}
|
|
9530
|
+
}
|
|
9518
9531
|
this.refreshListItems(null);
|
|
9519
9532
|
if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
|
|
9520
9533
|
this.updateDelimView();
|
|
@@ -11621,16 +11634,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11621
11634
|
l10n = new L10n('dropdowns', l10nLocale, this.locale);
|
|
11622
11635
|
}
|
|
11623
11636
|
var remainContent = l10n.getConstant('overflowCountTemplate');
|
|
11637
|
+
var totalContent = l10n.getConstant('totalCountTemplate');
|
|
11624
11638
|
var raminElement = this.createElement('span', {
|
|
11625
11639
|
className: REMAIN_WRAPPER$1
|
|
11626
11640
|
});
|
|
11627
|
-
var
|
|
11628
|
-
|
|
11629
|
-
// eslint-disable-next-line
|
|
11630
|
-
var remainCompildTemp = compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);
|
|
11631
|
-
if (remainCompildTemp && remainCompildTemp.length > 0) {
|
|
11632
|
-
raminElement.appendChild(remainCompildTemp[0]);
|
|
11633
|
-
}
|
|
11641
|
+
var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
|
|
11642
|
+
raminElement.innerText = remainCompildTemp;
|
|
11634
11643
|
this.viewWrapper.appendChild(raminElement);
|
|
11635
11644
|
this.renderReactTemplates();
|
|
11636
11645
|
var remainSize = raminElement.offsetWidth;
|
|
@@ -11682,9 +11691,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11682
11691
|
}
|
|
11683
11692
|
if (remaining > 0) {
|
|
11684
11693
|
var totalWidth = overAllContainer - downIconWidth - this.clearIconWidth;
|
|
11685
|
-
this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining,
|
|
11694
|
+
this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth));
|
|
11686
11695
|
this.updateRemainWidth(this.viewWrapper, totalWidth);
|
|
11687
|
-
this.updateRemainingText(raminElement, downIconWidth, remaining,
|
|
11696
|
+
this.updateRemainingText(raminElement, downIconWidth, remaining, remainContent, totalContent);
|
|
11688
11697
|
}
|
|
11689
11698
|
}
|
|
11690
11699
|
else {
|
|
@@ -11704,17 +11713,14 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11704
11713
|
viewWrapper.style.width = totalWidth + 'px';
|
|
11705
11714
|
}
|
|
11706
11715
|
};
|
|
11707
|
-
MultiSelect.prototype.updateRemainTemplate = function (raminElement, viewWrapper, remaining,
|
|
11716
|
+
MultiSelect.prototype.updateRemainTemplate = function (raminElement, viewWrapper, remaining, remainContent, totalContent, totalWidth) {
|
|
11708
11717
|
if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3 && viewWrapper.firstChild.nodeValue === '') {
|
|
11709
11718
|
viewWrapper.removeChild(viewWrapper.firstChild);
|
|
11710
11719
|
}
|
|
11711
11720
|
raminElement.innerHTML = '';
|
|
11712
|
-
|
|
11713
|
-
var
|
|
11714
|
-
|
|
11715
|
-
var totalTemp = totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate, null, raminElement);
|
|
11716
|
-
raminElement.appendChild((viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ?
|
|
11717
|
-
remainTemp && remainTemp[0] : totalTemp && totalTemp[0]);
|
|
11721
|
+
var remainTemp = remainContent.replace('${count}', remaining.toString());
|
|
11722
|
+
var totalTemp = totalContent.replace('${count}', remaining.toString());
|
|
11723
|
+
raminElement.innerText = (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ? remainTemp : totalTemp;
|
|
11718
11724
|
if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) {
|
|
11719
11725
|
viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
|
|
11720
11726
|
}
|
|
@@ -11724,7 +11730,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11724
11730
|
}
|
|
11725
11731
|
return raminElement;
|
|
11726
11732
|
};
|
|
11727
|
-
MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining,
|
|
11733
|
+
MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining, remainContent, totalContent) {
|
|
11728
11734
|
var overAllContainer = this.componentWrapper.offsetWidth -
|
|
11729
11735
|
parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
|
|
11730
11736
|
parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
|
|
@@ -11743,7 +11749,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11743
11749
|
wrapperleng = this.viewWrapper.offsetWidth;
|
|
11744
11750
|
}
|
|
11745
11751
|
var totalWidth = overAllContainer - downIconWidth;
|
|
11746
|
-
this.updateRemainTemplate(raminElement, this.viewWrapper, remaining,
|
|
11752
|
+
this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth);
|
|
11747
11753
|
}
|
|
11748
11754
|
};
|
|
11749
11755
|
MultiSelect.prototype.getOverflowVal = function (index) {
|
|
@@ -12749,6 +12755,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12749
12755
|
__decorate$5([
|
|
12750
12756
|
Property(true)
|
|
12751
12757
|
], MultiSelect.prototype, "openOnClick", void 0);
|
|
12758
|
+
__decorate$5([
|
|
12759
|
+
Property(false)
|
|
12760
|
+
], MultiSelect.prototype, "addTagOnBlur", void 0);
|
|
12752
12761
|
__decorate$5([
|
|
12753
12762
|
Event()
|
|
12754
12763
|
], MultiSelect.prototype, "change", void 0);
|
|
@@ -12942,7 +12951,7 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
|
|
|
12942
12951
|
}
|
|
12943
12952
|
if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 &&
|
|
12944
12953
|
!(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&
|
|
12945
|
-
|
|
12954
|
+
this.parent.listData && this.parent.listData.length <= 1)) {
|
|
12946
12955
|
this.checkAllParent.style.display = 'none';
|
|
12947
12956
|
}
|
|
12948
12957
|
else {
|