@syncfusion/ej2-dropdowns 19.4.40 → 19.4.48
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 +87 -34
- package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
- package/dist/es6/ej2-dropdowns.es5.js +88 -34
- 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 -12
- 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 +15 -2
- package/src/drop-down-list/drop-down-list.js +1 -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 +69 -25
- 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 +21 -3
- package/styles/bootstrap.css +21 -3
- package/styles/bootstrap4.css +21 -3
- package/styles/bootstrap5-dark.css +33 -9
- package/styles/bootstrap5.css +33 -9
- 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 +21 -3
- package/styles/fabric.css +21 -3
- package/styles/highcontrast-light.css +21 -3
- package/styles/highcontrast.css +21 -3
- package/styles/list-box/_bootstrap-dark-definition.scss +3 -0
- package/styles/list-box/_bootstrap-definition.scss +3 -0
- package/styles/list-box/_bootstrap4-definition.scss +3 -0
- package/styles/list-box/_bootstrap5-definition.scss +5 -2
- package/styles/list-box/_fabric-dark-definition.scss +3 -0
- package/styles/list-box/_fabric-definition.scss +3 -0
- package/styles/list-box/_fluent-definition.scss +118 -0
- package/styles/list-box/_highcontrast-definition.scss +3 -0
- package/styles/list-box/_highcontrast-light-definition.scss +3 -0
- package/styles/list-box/_layout.scss +1 -6
- package/styles/list-box/_material-dark-definition.scss +3 -0
- package/styles/list-box/_material-definition.scss +3 -0
- package/styles/list-box/_tailwind-definition.scss +3 -0
- package/styles/list-box/_theme.scss +8 -0
- package/styles/list-box/bootstrap-dark.css +10 -0
- package/styles/list-box/bootstrap.css +10 -0
- package/styles/list-box/bootstrap4.css +10 -0
- package/styles/list-box/bootstrap5-dark.css +11 -1
- package/styles/list-box/bootstrap5.css +11 -1
- package/styles/list-box/fabric-dark.css +10 -0
- package/styles/list-box/fabric.css +10 -0
- package/styles/list-box/highcontrast-light.css +10 -0
- package/styles/list-box/highcontrast.css +10 -0
- package/styles/list-box/icons/_fluent.scss +25 -0
- package/styles/list-box/icons/_tailwind-dark.scss +2 -2
- package/styles/list-box/material-dark.css +10 -0
- package/styles/list-box/material.css +10 -0
- package/styles/list-box/tailwind-dark.css +13 -3
- package/styles/list-box/tailwind.css +11 -1
- package/styles/material-dark.css +21 -97
- package/styles/material.css +21 -97
- 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 +4 -119
- 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 +11 -3
- package/styles/multi-select/bootstrap.css +11 -3
- package/styles/multi-select/bootstrap4.css +11 -3
- package/styles/multi-select/bootstrap5-dark.css +11 -3
- package/styles/multi-select/bootstrap5.css +11 -3
- package/styles/multi-select/fabric-dark.css +11 -3
- package/styles/multi-select/fabric.css +11 -3
- package/styles/multi-select/highcontrast-light.css +11 -3
- package/styles/multi-select/highcontrast.css +11 -3
- package/styles/multi-select/icons/_fluent.scss +27 -0
- package/styles/multi-select/material-dark.css +11 -97
- package/styles/multi-select/material.css +11 -97
- package/styles/multi-select/tailwind-dark.css +11 -3
- package/styles/multi-select/tailwind.css +11 -3
- package/styles/tailwind-dark.css +25 -6
- package/styles/tailwind.css +23 -4
- 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 };
|
|
@@ -660,7 +660,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
660
660
|
}
|
|
661
661
|
_this.bindChildItems(localDataArgs.result, ulElement, fields);
|
|
662
662
|
setTimeout(function () {
|
|
663
|
-
if (_this.getModuleName() === 'multiselect' && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
|
|
663
|
+
if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
|
|
664
664
|
_this.updateDataList();
|
|
665
665
|
}
|
|
666
666
|
});
|
|
@@ -795,10 +795,22 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
795
795
|
var groupValue = select(this.groupTemplate, document).innerHTML.trim();
|
|
796
796
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
797
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
|
+
}
|
|
798
804
|
}
|
|
799
805
|
else {
|
|
800
806
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
801
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
|
+
}
|
|
802
814
|
}
|
|
803
815
|
this.renderReactTemplates();
|
|
804
816
|
}
|
|
@@ -1213,7 +1225,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
1213
1225
|
li.innerText = itemText;
|
|
1214
1226
|
}
|
|
1215
1227
|
if (this.itemTemplate && !isHeader) {
|
|
1216
|
-
var
|
|
1228
|
+
var itemCheck = this.templateCompiler(this.itemTemplate);
|
|
1229
|
+
var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);
|
|
1217
1230
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1218
1231
|
var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);
|
|
1219
1232
|
if (addItemTemplate) {
|
|
@@ -3653,7 +3666,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
|
|
|
3653
3666
|
DropDownList.prototype.checkCustomValue = function () {
|
|
3654
3667
|
this.itemData = this.getDataByValue(this.value);
|
|
3655
3668
|
var dataItem = this.getItemData();
|
|
3656
|
-
this.setProperties({ '
|
|
3669
|
+
this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
|
|
3657
3670
|
};
|
|
3658
3671
|
DropDownList.prototype.updateInputFields = function () {
|
|
3659
3672
|
if (this.getModuleName() === 'dropdownlist') {
|
|
@@ -7552,7 +7565,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
7552
7565
|
if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
|
|
7553
7566
|
!isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
|
|
7554
7567
|
var inputValue = this.inputElement.value;
|
|
7555
|
-
var activeItem = Search(inputValue, this.liCollections,
|
|
7568
|
+
var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
|
|
7556
7569
|
var activeElement = activeItem.item;
|
|
7557
7570
|
if (!isNullOrUndefined(activeElement)) {
|
|
7558
7571
|
var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
|
|
@@ -7709,7 +7722,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
7709
7722
|
else {
|
|
7710
7723
|
this.activeIndex = null;
|
|
7711
7724
|
this.removeSelection();
|
|
7712
|
-
if (this.liCollections && this.liCollections.length
|
|
7725
|
+
if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
|
|
7713
7726
|
this.removeFocus();
|
|
7714
7727
|
}
|
|
7715
7728
|
}
|
|
@@ -9137,7 +9150,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
9137
9150
|
this.mainData = list;
|
|
9138
9151
|
this.mainListCollection = this.liCollections;
|
|
9139
9152
|
}
|
|
9140
|
-
else if (
|
|
9153
|
+
else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
|
|
9141
9154
|
this.mainData = list;
|
|
9142
9155
|
}
|
|
9143
9156
|
if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
|
|
@@ -11159,7 +11172,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11159
11172
|
MultiSelect.prototype.updateActionCompleteData = function (li, item) {
|
|
11160
11173
|
if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
|
|
11161
11174
|
this.mainList = this.ulElement;
|
|
11162
|
-
|
|
11175
|
+
if (this.hideSelectedItem) {
|
|
11176
|
+
addClass([li], HIDE_LIST);
|
|
11177
|
+
}
|
|
11163
11178
|
}
|
|
11164
11179
|
};
|
|
11165
11180
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -11822,7 +11837,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
11822
11837
|
'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
|
|
11823
11838
|
}
|
|
11824
11839
|
if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
|
|
11825
|
-
var target = (event ? event.target : null);
|
|
11840
|
+
var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
|
|
11826
11841
|
target = (event && event.keyCode === 32) ? list : target;
|
|
11827
11842
|
target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
|
|
11828
11843
|
if (target && target.classList.contains('e-list-group-item')) {
|
|
@@ -12196,6 +12211,17 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12196
12211
|
this.notify('selectAllText', false);
|
|
12197
12212
|
break;
|
|
12198
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;
|
|
12199
12225
|
case 'headerTemplate':
|
|
12200
12226
|
case 'footerTemplate':
|
|
12201
12227
|
this.reInitializePoup();
|
|
@@ -12223,6 +12249,25 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12223
12249
|
}
|
|
12224
12250
|
this.renderPopup();
|
|
12225
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
|
+
|
|
12226
12271
|
MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
|
|
12227
12272
|
if (!this.list) {
|
|
12228
12273
|
this.onLoadSelect();
|
|
@@ -12231,31 +12276,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
|
|
|
12231
12276
|
this.onLoadSelect();
|
|
12232
12277
|
}
|
|
12233
12278
|
else {
|
|
12234
|
-
|
|
12235
|
-
|
|
12236
|
-
|
|
12237
|
-
}
|
|
12238
|
-
if (isNullOrUndefined(this.value) || this.value.length === 0) {
|
|
12239
|
-
this.tempValues = oldProp;
|
|
12240
|
-
}
|
|
12241
|
-
// eslint-disable-next-line
|
|
12242
|
-
if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
|
|
12243
|
-
&& this.isPopupOpen() && this.mainData !== this.listData) {
|
|
12244
|
-
var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
|
|
12245
|
-
this.onActionComplete(list, this.mainData);
|
|
12246
|
-
}
|
|
12247
|
-
this.initialValueUpdate();
|
|
12248
|
-
if (this.mode !== 'Box' && !this.inputFocus) {
|
|
12249
|
-
this.updateDelimView();
|
|
12279
|
+
var valuecheck = [];
|
|
12280
|
+
if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
|
|
12281
|
+
valuecheck = this.presentItemValue(this.ulElement);
|
|
12250
12282
|
}
|
|
12251
|
-
if (!this.
|
|
12252
|
-
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);
|
|
12253
12288
|
}
|
|
12254
|
-
|
|
12255
|
-
|
|
12256
|
-
|
|
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();
|
|
12257
12315
|
}
|
|
12258
|
-
this.checkPlaceholderSize();
|
|
12259
12316
|
}
|
|
12260
12317
|
if (!this.changeOnBlur) {
|
|
12261
12318
|
this.updateValueState(null, newProp, oldProp);
|
|
@@ -13768,9 +13825,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
13768
13825
|
args.items = this.getDataByValues([dragValue]);
|
|
13769
13826
|
}
|
|
13770
13827
|
this.trigger('beforeDrop', args);
|
|
13771
|
-
if (args.isDragAll !== null) {
|
|
13772
|
-
this.allowDragAll = args.isDragAll;
|
|
13773
|
-
}
|
|
13774
13828
|
};
|
|
13775
13829
|
ListBox.prototype.dragEnd = function (args) {
|
|
13776
13830
|
var _this = this;
|