@syncfusion/ej2-dropdowns 24.1.47 → 24.2.4
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 +20 -6
- 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 +57 -10
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +57 -10
- 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 +12 -12
- package/src/drop-down-base/drop-down-base.js +1 -1
- package/src/drop-down-list/drop-down-list.js +16 -0
- package/src/drop-down-tree/drop-down-tree.js +0 -3
- package/src/list-box/list-box-model.d.ts +1 -1
- package/src/list-box/list-box.js +8 -1
- package/src/mention/mention.js +1 -0
- package/src/multi-select/multi-select-model.d.ts +1 -1
- package/src/multi-select/multi-select.d.ts +3 -1
- package/src/multi-select/multi-select.js +32 -6
- package/styles/bootstrap-dark.css +0 -5
- package/styles/bootstrap.css +0 -5
- package/styles/bootstrap4.css +0 -5
- package/styles/bootstrap5-dark.css +0 -5
- package/styles/bootstrap5.css +0 -5
- package/styles/drop-down-base/_layout.scss +0 -5
- package/styles/drop-down-base/bootstrap-dark.css +0 -5
- package/styles/drop-down-base/bootstrap.css +0 -5
- package/styles/drop-down-base/bootstrap4.css +0 -5
- package/styles/drop-down-base/bootstrap5-dark.css +0 -5
- package/styles/drop-down-base/bootstrap5.css +0 -5
- package/styles/drop-down-base/fabric-dark.css +0 -5
- package/styles/drop-down-base/fabric.css +0 -5
- package/styles/drop-down-base/fluent-dark.css +0 -5
- package/styles/drop-down-base/fluent.css +0 -5
- package/styles/drop-down-base/highcontrast-light.css +0 -5
- package/styles/drop-down-base/highcontrast.css +0 -5
- package/styles/drop-down-base/material-dark.css +0 -5
- package/styles/drop-down-base/material.css +0 -5
- package/styles/drop-down-base/material3-dark.css +0 -5
- package/styles/drop-down-base/material3.css +0 -5
- package/styles/drop-down-base/tailwind-dark.css +0 -5
- package/styles/drop-down-base/tailwind.css +0 -5
- package/styles/fabric-dark.css +0 -5
- package/styles/fabric.css +0 -5
- package/styles/fluent-dark.css +0 -5
- package/styles/fluent.css +0 -5
- package/styles/highcontrast-light.css +0 -5
- package/styles/highcontrast.css +0 -5
- package/styles/material-dark.css +0 -5
- package/styles/material.css +0 -5
- package/styles/material3-dark.css +0 -5
- package/styles/material3.css +0 -5
- package/styles/tailwind-dark.css +0 -5
- package/styles/tailwind.css +0 -5
|
@@ -842,7 +842,7 @@ let DropDownBase = class DropDownBase extends Component {
|
|
|
842
842
|
}
|
|
843
843
|
}
|
|
844
844
|
else {
|
|
845
|
-
if (noDataElement[i] instanceof HTMLElement) {
|
|
845
|
+
if (noDataElement[i] instanceof HTMLElement || noDataElement[i] instanceof Text) {
|
|
846
846
|
ele.appendChild(noDataElement[i]);
|
|
847
847
|
}
|
|
848
848
|
}
|
|
@@ -3339,6 +3339,9 @@ let DropDownList = class DropDownList extends DropDownBase {
|
|
|
3339
3339
|
if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
|
|
3340
3340
|
this.isDocumentClick = true;
|
|
3341
3341
|
const isActive = this.isRequested;
|
|
3342
|
+
if (this.getModuleName() === 'combobox' && this.isTyped) {
|
|
3343
|
+
this.isInteracted = false;
|
|
3344
|
+
}
|
|
3342
3345
|
this.hidePopup(e);
|
|
3343
3346
|
this.isInteracted = false;
|
|
3344
3347
|
if (!isActive) {
|
|
@@ -4024,6 +4027,11 @@ let DropDownList = class DropDownList extends DropDownBase {
|
|
|
4024
4027
|
this.virtualListInfo = null;
|
|
4025
4028
|
}
|
|
4026
4029
|
this.resetList(dataSource, fields, query);
|
|
4030
|
+
if (this.getModuleName() === 'dropdownlist' && this.list.classList.contains(dropDownBaseClasses.noData)) {
|
|
4031
|
+
this.popupContentElement.setAttribute('role', 'status');
|
|
4032
|
+
this.popupContentElement.setAttribute('id', 'no-record');
|
|
4033
|
+
attributes(this.filterInputObj.container, { 'aria-activedescendant': 'no-record' });
|
|
4034
|
+
}
|
|
4027
4035
|
if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
|
|
4028
4036
|
if (!this.list.querySelector('.e-virtual-ddl-content')) {
|
|
4029
4037
|
this.list.appendChild(this.createElement('div', {
|
|
@@ -4564,6 +4572,11 @@ let DropDownList = class DropDownList extends DropDownBase {
|
|
|
4564
4572
|
}, 5);
|
|
4565
4573
|
}
|
|
4566
4574
|
attributes(this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': this.element.id + '_popup', 'aria-controls': this.element.id });
|
|
4575
|
+
if (this.getModuleName() !== 'dropdownlist' && this.list.classList.contains('e-nodata')) {
|
|
4576
|
+
attributes(this.targetElement(), { 'aria-activedescendant': 'no-record' });
|
|
4577
|
+
this.popupContentElement.setAttribute('role', 'status');
|
|
4578
|
+
this.popupContentElement.setAttribute('id', 'no-record');
|
|
4579
|
+
}
|
|
4567
4580
|
this.inputElement.setAttribute('aria-expanded', 'true');
|
|
4568
4581
|
this.inputElement.setAttribute('aria-controls', this.element.id);
|
|
4569
4582
|
const inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;
|
|
@@ -5850,6 +5863,9 @@ let DropDownList = class DropDownList extends DropDownBase {
|
|
|
5850
5863
|
this.clearTemplate();
|
|
5851
5864
|
}
|
|
5852
5865
|
this.hidePopup();
|
|
5866
|
+
if (this.popupObj) {
|
|
5867
|
+
this.popupObj.hide();
|
|
5868
|
+
}
|
|
5853
5869
|
this.unWireEvent();
|
|
5854
5870
|
if (this.list) {
|
|
5855
5871
|
this.unWireListEvents();
|
|
@@ -7922,9 +7938,6 @@ let DropDownTree = class DropDownTree extends Component {
|
|
|
7922
7938
|
if (this.value === null) {
|
|
7923
7939
|
this.setProperties({ value: [] }, true);
|
|
7924
7940
|
}
|
|
7925
|
-
if (args.node.classList.contains("e-active")) {
|
|
7926
|
-
this.hidePopup();
|
|
7927
|
-
}
|
|
7928
7941
|
}
|
|
7929
7942
|
}
|
|
7930
7943
|
updateHiddenValue() {
|
|
@@ -11222,6 +11235,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11222
11235
|
else {
|
|
11223
11236
|
this.updateActionList(ulElement, list, e);
|
|
11224
11237
|
}
|
|
11238
|
+
if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered && this.inputElement.value && this.inputElement.value !== '') {
|
|
11239
|
+
let query = new Query();
|
|
11240
|
+
query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
|
|
11241
|
+
this.checkForCustomValue(query, this.fields);
|
|
11242
|
+
this.isCustomRendered = true;
|
|
11243
|
+
}
|
|
11225
11244
|
if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
|
|
11226
11245
|
this.removeFocus();
|
|
11227
11246
|
}
|
|
@@ -11243,7 +11262,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11243
11262
|
if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
|
|
11244
11263
|
this.inputElement.value && this.inputElement.value !== '') {
|
|
11245
11264
|
this.checkForCustomValue(this.tempQuery, this.fields);
|
|
11246
|
-
|
|
11265
|
+
if (this.isCustomRendered) {
|
|
11266
|
+
return;
|
|
11267
|
+
}
|
|
11247
11268
|
}
|
|
11248
11269
|
if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
|
|
11249
11270
|
this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
|
|
@@ -11510,12 +11531,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11510
11531
|
}
|
|
11511
11532
|
checkForCustomValue(query, fields) {
|
|
11512
11533
|
const dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
|
|
11534
|
+
const field = fields ? fields : this.fields;
|
|
11513
11535
|
if (this.allowCustomValue && dataChecks) {
|
|
11514
11536
|
const value = this.inputElement.value;
|
|
11515
|
-
const field = fields ? fields : this.fields;
|
|
11516
11537
|
const customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
|
|
11517
11538
|
this.mainData[0] : this.mainData;
|
|
11518
|
-
if (typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
|
|
11539
|
+
if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
|
|
11519
11540
|
const dataItem = {};
|
|
11520
11541
|
setValue(field.text, value, dataItem);
|
|
11521
11542
|
if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
|
|
@@ -11529,7 +11550,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11529
11550
|
tempData.splice(0, 0, dataItem);
|
|
11530
11551
|
this.resetList(tempData, field, query);
|
|
11531
11552
|
}
|
|
11532
|
-
else {
|
|
11553
|
+
else if (this.listData) {
|
|
11533
11554
|
const tempData = JSON.parse(JSON.stringify(this.listData));
|
|
11534
11555
|
tempData.splice(0, 0, this.inputElement.value);
|
|
11535
11556
|
tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?
|
|
@@ -11539,6 +11560,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
11539
11560
|
this.resetList(tempData, field);
|
|
11540
11561
|
}
|
|
11541
11562
|
}
|
|
11563
|
+
else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
|
|
11564
|
+
if (this.allowFiltering && this.isRemoteSelection && this.remoteCustomValue) {
|
|
11565
|
+
this.isRemoteSelection = false;
|
|
11566
|
+
this.resetList(this.listData, field, query);
|
|
11567
|
+
}
|
|
11568
|
+
else if (!this.allowFiltering && this.list) {
|
|
11569
|
+
const liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
|
|
11570
|
+
const activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
|
|
11571
|
+
if (activeElement && activeElement.item !== null) {
|
|
11572
|
+
this.addListFocus(activeElement.item);
|
|
11573
|
+
}
|
|
11574
|
+
}
|
|
11575
|
+
}
|
|
11542
11576
|
if (this.value && this.value.length) {
|
|
11543
11577
|
this.refreshSelection();
|
|
11544
11578
|
}
|
|
@@ -13159,6 +13193,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
13159
13193
|
else {
|
|
13160
13194
|
const text = this.targetElement();
|
|
13161
13195
|
if (this.allowFiltering) {
|
|
13196
|
+
if (this.allowCustomValue) {
|
|
13197
|
+
this.isRemoteSelection = true;
|
|
13198
|
+
}
|
|
13162
13199
|
const eventArgs = {
|
|
13163
13200
|
preventDefaultAction: false,
|
|
13164
13201
|
text: this.targetElement(),
|
|
@@ -13184,7 +13221,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
13184
13221
|
}
|
|
13185
13222
|
else if (this.allowCustomValue) {
|
|
13186
13223
|
let query = new Query();
|
|
13187
|
-
query = (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
|
|
13224
|
+
query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
|
|
13188
13225
|
this.dataUpdater(this.mainData, query, this.fields);
|
|
13189
13226
|
}
|
|
13190
13227
|
else {
|
|
@@ -13226,6 +13263,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
|
|
|
13226
13263
|
this.focused = true;
|
|
13227
13264
|
this.initial = true;
|
|
13228
13265
|
this.backCommand = true;
|
|
13266
|
+
this.isCustomRendered = false;
|
|
13267
|
+
this.isRemoteSelection = false;
|
|
13229
13268
|
}
|
|
13230
13269
|
updateData(delimiterChar, e) {
|
|
13231
13270
|
let data = '';
|
|
@@ -14997,7 +15036,7 @@ __decorate$5([
|
|
|
14997
15036
|
Property(true)
|
|
14998
15037
|
], MultiSelect.prototype, "enabled", void 0);
|
|
14999
15038
|
__decorate$5([
|
|
15000
|
-
Property(
|
|
15039
|
+
Property(true)
|
|
15001
15040
|
], MultiSelect.prototype, "enableHtmlSanitizer", void 0);
|
|
15002
15041
|
__decorate$5([
|
|
15003
15042
|
Property([])
|
|
@@ -15765,6 +15804,13 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
|
|
|
15765
15804
|
* @returns {void}
|
|
15766
15805
|
*/
|
|
15767
15806
|
render() {
|
|
15807
|
+
if (this.isAngular && this.allowFiltering) {
|
|
15808
|
+
const originalElement = this.element;
|
|
15809
|
+
const clonedElement = originalElement.cloneNode(true);
|
|
15810
|
+
originalElement.parentNode.replaceChild(clonedElement, originalElement);
|
|
15811
|
+
this.element = clonedElement;
|
|
15812
|
+
setValue('ej2_instances', [this], this.element);
|
|
15813
|
+
}
|
|
15768
15814
|
this.inputString = '';
|
|
15769
15815
|
this.initLoad = true;
|
|
15770
15816
|
this.isCustomFiltering = false;
|
|
@@ -18772,6 +18818,7 @@ let Mention = class Mention extends DropDownBase {
|
|
|
18772
18818
|
this.inputElement.parentElement.parentElement.classList.contains('e-richtexteditor')) {
|
|
18773
18819
|
if (popupEle.firstElementChild && popupEle.firstElementChild.childElementCount > 0) {
|
|
18774
18820
|
popupEle.firstElementChild.setAttribute('aria-owns', this.inputElement.parentElement.parentElement.id);
|
|
18821
|
+
addClass([popupEle], 'e-rte-elements');
|
|
18775
18822
|
}
|
|
18776
18823
|
}
|
|
18777
18824
|
if ((!this.popupObj || !document.body.contains(this.popupObj.element)) ||
|