@syncfusion/ej2-dropdowns 19.4.52 → 19.4.56
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 +16 -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 +44 -17
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +45 -17
- 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/combo-box/combo-box.js +4 -1
- package/src/drop-down-tree/drop-down-tree.js +6 -14
- package/src/list-box/list-box.js +32 -0
- package/src/multi-select/multi-select.js +3 -2
- package/styles/bootstrap-dark.css +17 -5
- package/styles/bootstrap.css +17 -5
- package/styles/bootstrap4.css +17 -5
- package/styles/bootstrap5-dark.css +17 -5
- package/styles/bootstrap5.css +17 -5
- package/styles/fabric-dark.css +17 -5
- package/styles/fabric.css +17 -5
- package/styles/highcontrast-light.css +17 -5
- package/styles/highcontrast.css +17 -5
- package/styles/list-box/_layout.scss +12 -4
- package/styles/list-box/bootstrap-dark.css +9 -5
- package/styles/list-box/bootstrap.css +9 -5
- package/styles/list-box/bootstrap4.css +9 -5
- package/styles/list-box/bootstrap5-dark.css +9 -5
- package/styles/list-box/bootstrap5.css +9 -5
- package/styles/list-box/fabric-dark.css +9 -5
- package/styles/list-box/fabric.css +9 -5
- package/styles/list-box/highcontrast-light.css +9 -5
- package/styles/list-box/highcontrast.css +9 -5
- package/styles/list-box/material-dark.css +9 -5
- package/styles/list-box/material.css +9 -5
- package/styles/list-box/tailwind-dark.css +9 -5
- package/styles/list-box/tailwind.css +9 -5
- package/styles/material-dark.css +17 -5
- package/styles/material.css +17 -5
- package/styles/multi-select/_layout.scss +8 -0
- package/styles/multi-select/bootstrap-dark.css +8 -0
- package/styles/multi-select/bootstrap.css +8 -0
- package/styles/multi-select/bootstrap4.css +8 -0
- package/styles/multi-select/bootstrap5-dark.css +8 -0
- package/styles/multi-select/bootstrap5.css +8 -0
- package/styles/multi-select/fabric-dark.css +8 -0
- package/styles/multi-select/fabric.css +8 -0
- package/styles/multi-select/highcontrast-light.css +8 -0
- package/styles/multi-select/highcontrast.css +8 -0
- package/styles/multi-select/material-dark.css +8 -0
- package/styles/multi-select/material.css +8 -0
- package/styles/multi-select/tailwind-dark.css +8 -0
- package/styles/multi-select/tailwind.css +8 -0
- package/styles/tailwind-dark.css +17 -5
- package/styles/tailwind.css +17 -5
|
@@ -5121,13 +5121,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5121
5121
|
var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
|
|
5122
5122
|
this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
|
|
5123
5123
|
var remainContent = this.l10n.getConstant('overflowCountTemplate');
|
|
5124
|
+
var totalContent = this.l10n.getConstant('totalCountTemplate');
|
|
5124
5125
|
var remainElement = this.createElement('span', { className: REMAIN_WRAPPER });
|
|
5125
|
-
// eslint-disable-next-line
|
|
5126
|
-
var compiledString = compile(remainContent);
|
|
5127
|
-
// eslint-disable-next-line
|
|
5128
|
-
var totalCompiledString = compile(this.l10n.getConstant('totalCountTemplate'));
|
|
5129
|
-
remainElement.appendChild(compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0]);
|
|
5130
5126
|
this.overFlowWrapper.appendChild(remainElement);
|
|
5127
|
+
remainElement.innerText = remainContent.replace('${count}', this.value.length.toString());
|
|
5131
5128
|
var remainSize = remainElement.offsetWidth;
|
|
5132
5129
|
remove(remainElement);
|
|
5133
5130
|
if (this.showDropDownIcon) {
|
|
@@ -5209,7 +5206,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5209
5206
|
}
|
|
5210
5207
|
}
|
|
5211
5208
|
if (remaining > 0) {
|
|
5212
|
-
this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining,
|
|
5209
|
+
this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
|
|
5213
5210
|
}
|
|
5214
5211
|
if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
|
|
5215
5212
|
addClass([remainElement], REMAIN_COUNT);
|
|
@@ -5221,19 +5218,14 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
|
|
|
5221
5218
|
}
|
|
5222
5219
|
this.updateDelimMode();
|
|
5223
5220
|
};
|
|
5224
|
-
DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining,
|
|
5225
|
-
// eslint-disable-next-line
|
|
5226
|
-
compiledString,
|
|
5227
|
-
// eslint-disable-next-line
|
|
5228
|
-
totalCompiledString) {
|
|
5221
|
+
DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, remainContent, totalContent) {
|
|
5229
5222
|
if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
|
|
5230
5223
|
this.overFlowWrapper.firstChild.nodeValue === '') {
|
|
5231
5224
|
this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
|
|
5232
5225
|
}
|
|
5233
5226
|
remainElement.innerHTML = '';
|
|
5234
|
-
remainElement.
|
|
5235
|
-
|
|
5236
|
-
totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate)[0]);
|
|
5227
|
+
remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
|
|
5228
|
+
remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());
|
|
5237
5229
|
if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {
|
|
5238
5230
|
removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
|
|
5239
5231
|
}
|
|
@@ -7594,12 +7586,15 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
7594
7586
|
};
|
|
7595
7587
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7596
7588
|
ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
|
|
7589
|
+
var _this = this;
|
|
7597
7590
|
_super.prototype.onActionComplete.call(this, ulElement, list, e);
|
|
7598
7591
|
if (this.isSelectCustom) {
|
|
7599
7592
|
this.removeSelection();
|
|
7600
7593
|
}
|
|
7601
7594
|
if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
|
|
7602
|
-
|
|
7595
|
+
setTimeout(function () {
|
|
7596
|
+
_this.inlineSearch();
|
|
7597
|
+
});
|
|
7603
7598
|
}
|
|
7604
7599
|
};
|
|
7605
7600
|
ComboBox.prototype.getFocusElement = function () {
|
|
@@ -9267,7 +9262,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
9267
9262
|
addClass([listEle[0]], dropDownBaseClasses.focus);
|
|
9268
9263
|
}
|
|
9269
9264
|
else {
|
|
9270
|
-
this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
|
|
9265
|
+
//EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
|
|
9271
9266
|
if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {
|
|
9272
9267
|
this.l10nUpdate();
|
|
9273
9268
|
addClass([this.list], dropDownBaseClasses.noData);
|
|
@@ -11246,7 +11241,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11246
11241
|
var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
|
|
11247
11242
|
var 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));
|
|
11248
11243
|
if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
|
|
11249
|
-
this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
|
|
11244
|
+
//EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
|
|
11245
|
+
this.mainList = this.ulElement;
|
|
11250
11246
|
}
|
|
11251
11247
|
}
|
|
11252
11248
|
};
|
|
@@ -13864,6 +13860,38 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
13864
13860
|
});
|
|
13865
13861
|
};
|
|
13866
13862
|
ListBox.prototype.triggerDrag = function (args) {
|
|
13863
|
+
var scrollParent;
|
|
13864
|
+
var boundRect;
|
|
13865
|
+
var scrollMoved = 36;
|
|
13866
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
13867
|
+
var event = args.event;
|
|
13868
|
+
var wrapper;
|
|
13869
|
+
if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
|
|
13870
|
+
|| args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
|
|
13871
|
+
if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
|
|
13872
|
+
|| args.target.classList.contains("e-input-group")) {
|
|
13873
|
+
wrapper = args.target.closest('.e-listbox-wrapper');
|
|
13874
|
+
}
|
|
13875
|
+
else {
|
|
13876
|
+
wrapper = args.target;
|
|
13877
|
+
}
|
|
13878
|
+
if (this.allowFiltering) {
|
|
13879
|
+
scrollParent = wrapper.querySelector('.e-list-parent');
|
|
13880
|
+
}
|
|
13881
|
+
else {
|
|
13882
|
+
scrollParent = wrapper;
|
|
13883
|
+
}
|
|
13884
|
+
boundRect = scrollParent.getBoundingClientRect();
|
|
13885
|
+
if ((boundRect.y + scrollParent.offsetHeight) - (event.pageY + scrollMoved) < 1) {
|
|
13886
|
+
scrollParent.scrollTop = scrollParent.scrollTop + 10;
|
|
13887
|
+
}
|
|
13888
|
+
else if ((event.pageY - scrollMoved) - boundRect.y < 1) {
|
|
13889
|
+
scrollParent.scrollTop = scrollParent.scrollTop - 10;
|
|
13890
|
+
}
|
|
13891
|
+
}
|
|
13892
|
+
if (args.target === null) {
|
|
13893
|
+
return;
|
|
13894
|
+
}
|
|
13867
13895
|
this.trigger('drag', this.getDragArgs(args));
|
|
13868
13896
|
var listObj = this.getComponent(args.target);
|
|
13869
13897
|
if (listObj && listObj.listData.length === 0) {
|