@syncfusion/ej2-dropdowns 19.3.56 → 19.4.42
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 +8 -0
- 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 +91 -33
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +92 -33
- 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/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 +19 -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 +70 -26
- 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 (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
|
|
92
92
|
var item = itemsData[i];
|
|
93
93
|
var 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 };
|
|
@@ -659,6 +659,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
659
659
|
_this.renderGroupTemplate(ulElement);
|
|
660
660
|
}
|
|
661
661
|
_this.bindChildItems(localDataArgs.result, ulElement, fields);
|
|
662
|
+
setTimeout(function () {
|
|
663
|
+
if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
|
|
664
|
+
_this.updateDataList();
|
|
665
|
+
}
|
|
666
|
+
});
|
|
662
667
|
}
|
|
663
668
|
});
|
|
664
669
|
}
|
|
@@ -790,10 +795,22 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
790
795
|
var groupValue = select(this.groupTemplate, document).innerHTML.trim();
|
|
791
796
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
792
797
|
var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
|
|
798
|
+
//EJ2-55168- Group checkbox is not working with group template
|
|
799
|
+
if (this.isGroupChecking) {
|
|
800
|
+
for (var i = 0; i < tempHeaders.length; i++) {
|
|
801
|
+
this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
|
|
802
|
+
}
|
|
803
|
+
}
|
|
793
804
|
}
|
|
794
805
|
else {
|
|
795
806
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
796
807
|
var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
|
|
808
|
+
//EJ2-55168- Group checkbox is not working with group template
|
|
809
|
+
if (this.isGroupChecking) {
|
|
810
|
+
for (var i = 0; i < tempHeaders.length; i++) {
|
|
811
|
+
this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
|
|
812
|
+
}
|
|
813
|
+
}
|
|
797
814
|
}
|
|
798
815
|
this.renderReactTemplates();
|
|
799
816
|
}
|
|
@@ -1208,7 +1225,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
1208
1225
|
li.innerText = itemText;
|
|
1209
1226
|
}
|
|
1210
1227
|
if (this.itemTemplate && !isHeader) {
|
|
1211
|
-
var
|
|
1228
|
+
var itemCheck = this.templateCompiler(this.itemTemplate);
|
|
1229
|
+
var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
|
|
1212
1230
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1213
1231
|
var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
|
|
1214
1232
|
if (addItemTemplate) {
|
|
@@ -7547,7 +7565,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
7547
7565
|
if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
|
|
7548
7566
|
!isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
|
|
7549
7567
|
var inputValue = this.inputElement.value;
|
|
7550
|
-
var activeItem = Search(inputValue, this.liCollections,
|
|
7568
|
+
var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
|
|
7551
7569
|
var activeElement = activeItem.item;
|
|
7552
7570
|
if (!isNullOrUndefined(activeElement)) {
|
|
7553
7571
|
var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
|
|
@@ -7704,7 +7722,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
7704
7722
|
else {
|
|
7705
7723
|
this.activeIndex = null;
|
|
7706
7724
|
this.removeSelection();
|
|
7707
|
-
if (this.liCollections && this.liCollections.length
|
|
7725
|
+
if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
|
|
7708
7726
|
this.removeFocus();
|
|
7709
7727
|
}
|
|
7710
7728
|
}
|
|
@@ -9132,7 +9150,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
9132
9150
|
this.mainData = list;
|
|
9133
9151
|
this.mainListCollection = this.liCollections;
|
|
9134
9152
|
}
|
|
9135
|
-
else if (
|
|
9153
|
+
else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
|
|
9136
9154
|
this.mainData = list;
|
|
9137
9155
|
}
|
|
9138
9156
|
if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
|
|
@@ -11154,7 +11172,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11154
11172
|
MultiSelect.prototype.updateActionCompleteData = function (li, item) {
|
|
11155
11173
|
if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
|
|
11156
11174
|
this.mainList = this.ulElement;
|
|
11157
|
-
|
|
11175
|
+
if (this.hideSelectedItem) {
|
|
11176
|
+
addClass([li], HIDE_LIST);
|
|
11177
|
+
}
|
|
11158
11178
|
}
|
|
11159
11179
|
};
|
|
11160
11180
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -11172,7 +11192,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11172
11192
|
}
|
|
11173
11193
|
};
|
|
11174
11194
|
MultiSelect.prototype.updateDataList = function () {
|
|
11175
|
-
if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {
|
|
11195
|
+
if (this.mainList && this.ulElement && (this.mainList.childElementCount < this.ulElement.childElementCount || ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)))) {
|
|
11176
11196
|
this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
|
|
11177
11197
|
}
|
|
11178
11198
|
};
|
|
@@ -11817,7 +11837,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11817
11837
|
'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
|
|
11818
11838
|
}
|
|
11819
11839
|
if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
|
|
11820
|
-
var target = (event ? event.target : null);
|
|
11840
|
+
var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
|
|
11821
11841
|
target = (event && event.keyCode === 32) ? list : target;
|
|
11822
11842
|
target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
|
|
11823
11843
|
if (target && target.classList.contains('e-list-group-item')) {
|
|
@@ -12191,6 +12211,17 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12191
12211
|
this.notify('selectAllText', false);
|
|
12192
12212
|
break;
|
|
12193
12213
|
case 'popupHeight':
|
|
12214
|
+
if (this.popupObj) {
|
|
12215
|
+
var overAllHeight = parseInt(this.popupHeight, 10);
|
|
12216
|
+
if (this.popupHeight !== 'auto') {
|
|
12217
|
+
this.list.style.maxHeight = formatUnit(overAllHeight);
|
|
12218
|
+
this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
|
|
12219
|
+
}
|
|
12220
|
+
else {
|
|
12221
|
+
this.list.style.maxHeight = formatUnit(this.popupHeight);
|
|
12222
|
+
}
|
|
12223
|
+
}
|
|
12224
|
+
break;
|
|
12194
12225
|
case 'headerTemplate':
|
|
12195
12226
|
case 'footerTemplate':
|
|
12196
12227
|
this.reInitializePoup();
|
|
@@ -12218,6 +12249,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12218
12249
|
}
|
|
12219
12250
|
this.renderPopup();
|
|
12220
12251
|
};
|
|
12252
|
+
MultiSelect.prototype.presentItemValue = function (ulElement) {
|
|
12253
|
+
var valuecheck = [];
|
|
12254
|
+
for (var i = 0; i < this.value.length; i++) {
|
|
12255
|
+
var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
|
|
12256
|
+
if (!checkEle) {
|
|
12257
|
+
valuecheck.push(this.value[i]);
|
|
12258
|
+
}
|
|
12259
|
+
}
|
|
12260
|
+
return valuecheck;
|
|
12261
|
+
};
|
|
12262
|
+
|
|
12263
|
+
MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
|
|
12264
|
+
var _this = this;
|
|
12265
|
+
this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
|
|
12266
|
+
_this.addItem(e.result, list.length);
|
|
12267
|
+
_this.updateActionList(ulElement, list, event);
|
|
12268
|
+
});
|
|
12269
|
+
};
|
|
12270
|
+
|
|
12221
12271
|
MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
|
|
12222
12272
|
if (!this.list) {
|
|
12223
12273
|
this.onLoadSelect();
|
|
@@ -12226,31 +12276,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12226
12276
|
this.onLoadSelect();
|
|
12227
12277
|
}
|
|
12228
12278
|
else {
|
|
12229
|
-
|
|
12230
|
-
|
|
12231
|
-
|
|
12232
|
-
}
|
|
12233
|
-
if (isNullOrUndefined(this.value) || this.value.length === 0) {
|
|
12234
|
-
this.tempValues = oldProp;
|
|
12279
|
+
var valuecheck = [];
|
|
12280
|
+
if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
|
|
12281
|
+
valuecheck = this.presentItemValue(this.ulElement);
|
|
12235
12282
|
}
|
|
12236
|
-
|
|
12237
|
-
|
|
12238
|
-
|
|
12239
|
-
|
|
12240
|
-
this.
|
|
12283
|
+
if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
|
|
12284
|
+
&& this.listData != null) {
|
|
12285
|
+
this.mainData = null;
|
|
12286
|
+
this.setDynValue = true;
|
|
12287
|
+
this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
|
|
12241
12288
|
}
|
|
12242
|
-
|
|
12243
|
-
|
|
12244
|
-
|
|
12245
|
-
|
|
12246
|
-
|
|
12247
|
-
this.
|
|
12248
|
-
|
|
12249
|
-
|
|
12250
|
-
|
|
12251
|
-
this.
|
|
12289
|
+
else {
|
|
12290
|
+
if (prop === 'text') {
|
|
12291
|
+
this.initialTextUpdate();
|
|
12292
|
+
newProp = this.value;
|
|
12293
|
+
}
|
|
12294
|
+
if (isNullOrUndefined(this.value) || this.value.length === 0) {
|
|
12295
|
+
this.tempValues = oldProp;
|
|
12296
|
+
}
|
|
12297
|
+
// eslint-disable-next-line
|
|
12298
|
+
if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
|
|
12299
|
+
&& this.isPopupOpen() && this.mainData !== this.listData) {
|
|
12300
|
+
var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
|
|
12301
|
+
this.onActionComplete(list, this.mainData);
|
|
12302
|
+
}
|
|
12303
|
+
this.initialValueUpdate();
|
|
12304
|
+
if (this.mode !== 'Box' && !this.inputFocus) {
|
|
12305
|
+
this.updateDelimView();
|
|
12306
|
+
}
|
|
12307
|
+
if (!this.inputFocus) {
|
|
12308
|
+
this.refreshInputHight();
|
|
12309
|
+
}
|
|
12310
|
+
this.refreshPlaceHolder();
|
|
12311
|
+
if (this.mode !== 'CheckBox' && this.changeOnBlur) {
|
|
12312
|
+
this.updateValueState(null, newProp, oldProp);
|
|
12313
|
+
}
|
|
12314
|
+
this.checkPlaceholderSize();
|
|
12252
12315
|
}
|
|
12253
|
-
this.checkPlaceholderSize();
|
|
12254
12316
|
}
|
|
12255
12317
|
if (!this.changeOnBlur) {
|
|
12256
12318
|
this.updateValueState(null, newProp, oldProp);
|
|
@@ -13763,9 +13825,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
13763
13825
|
args.items = this.getDataByValues([dragValue]);
|
|
13764
13826
|
}
|
|
13765
13827
|
this.trigger('beforeDrop', args);
|
|
13766
|
-
if (args.isDragAll !== null) {
|
|
13767
|
-
this.allowDragAll = args.isDragAll;
|
|
13768
|
-
}
|
|
13769
13828
|
};
|
|
13770
13829
|
ListBox.prototype.dragEnd = function (args) {
|
|
13771
13830
|
var _this = this;
|