@syncfusion/ej2-lists 19.4.48 → 20.1.47
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 +0 -2
- package/dist/ej2-lists.umd.min.js +2 -2
- package/dist/ej2-lists.umd.min.js.map +1 -1
- package/dist/es6/ej2-lists.es2015.js +40 -12
- package/dist/es6/ej2-lists.es2015.js.map +1 -1
- package/dist/es6/ej2-lists.es5.js +40 -12
- package/dist/es6/ej2-lists.es5.js.map +1 -1
- package/dist/global/ej2-lists.min.js +2 -2
- package/dist/global/ej2-lists.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +8 -8
- package/src/common/list-base.js +10 -6
- package/src/list-view/list-view.d.ts +1 -0
- package/src/list-view/list-view.js +15 -6
- package/src/list-view/virtualization.js +13 -0
- package/src/sortable/sortable.js +2 -0
- package/styles/bootstrap-dark.css +16 -3
- package/styles/bootstrap.css +16 -3
- package/styles/bootstrap4.css +18 -5
- package/styles/bootstrap5-dark.css +25 -12
- package/styles/bootstrap5.css +25 -12
- package/styles/fabric-dark.css +16 -3
- package/styles/fabric.css +16 -3
- package/styles/fluent-dark.css +580 -0
- package/styles/fluent-dark.scss +2 -0
- package/styles/fluent.css +580 -0
- package/styles/fluent.scss +2 -0
- package/styles/highcontrast-light.css +16 -3
- package/styles/highcontrast.css +16 -3
- package/styles/list-view/_bootstrap5-definition.scss +7 -7
- package/styles/list-view/_fluent-dark-definition.scss +1 -0
- package/styles/list-view/_fluent-definition.scss +4 -3
- package/styles/list-view/_layout.scss +33 -9
- package/styles/list-view/_tailwind-definition.scss +4 -3
- package/styles/list-view/_theme.scss +4 -4
- package/styles/list-view/bootstrap-dark.css +16 -3
- package/styles/list-view/bootstrap.css +16 -3
- package/styles/list-view/bootstrap4.css +18 -5
- package/styles/list-view/bootstrap5-dark.css +25 -12
- package/styles/list-view/bootstrap5.css +25 -12
- package/styles/list-view/fabric-dark.css +16 -3
- package/styles/list-view/fabric.css +16 -3
- package/styles/list-view/fluent-dark.css +553 -0
- package/styles/list-view/fluent-dark.scss +5 -0
- package/styles/list-view/fluent.css +553 -0
- package/styles/list-view/fluent.scss +5 -0
- package/styles/list-view/highcontrast-light.css +16 -3
- package/styles/list-view/highcontrast.css +16 -3
- package/styles/list-view/icons/_fluent-dark.scss +1 -0
- package/styles/list-view/icons/_fluent.scss +2 -2
- package/styles/list-view/icons/_tailwind-dark.scss +6 -10
- package/styles/list-view/icons/_tailwind.scss +6 -10
- package/styles/list-view/material-dark.css +16 -3
- package/styles/list-view/material.css +16 -3
- package/styles/list-view/tailwind-dark.css +31 -18
- package/styles/list-view/tailwind.css +31 -18
- package/styles/material-dark.css +16 -3
- package/styles/material.css +16 -3
- package/styles/sortable/fluent-dark.css +26 -0
- package/styles/sortable/fluent-dark.scss +2 -0
- package/styles/sortable/fluent.css +26 -0
- package/styles/sortable/fluent.scss +2 -0
- package/styles/tailwind-dark.css +31 -18
- package/styles/tailwind.css +31 -18
|
@@ -214,7 +214,8 @@ var ListBase;
|
|
|
214
214
|
var curOpt = extend({}, defaultListBaseOptions, options);
|
|
215
215
|
cssClass = getModuleClass(curOpt.moduleName);
|
|
216
216
|
var fields = (componentInstance &&
|
|
217
|
-
(componentInstance.getModuleName()
|
|
217
|
+
(componentInstance.getModuleName() === 'listview' || componentInstance.getModuleName() === 'multiselect'))
|
|
218
|
+
? curOpt.fields : extend({}, ListBase.defaultMappedFields, curOpt.fields);
|
|
218
219
|
var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
|
|
219
220
|
var id;
|
|
220
221
|
var checkboxElement = [];
|
|
@@ -636,7 +637,7 @@ var ListBase;
|
|
|
636
637
|
else {
|
|
637
638
|
var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
|
|
638
639
|
if (isHeader) {
|
|
639
|
-
if (componentInstance && componentInstance.getModuleName() !=
|
|
640
|
+
if (componentInstance && componentInstance.getModuleName() != 'listview') {
|
|
640
641
|
// eslint-disable-next-line
|
|
641
642
|
var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
|
|
642
643
|
if (compiledElement) {
|
|
@@ -648,7 +649,7 @@ var ListBase;
|
|
|
648
649
|
}
|
|
649
650
|
}
|
|
650
651
|
else {
|
|
651
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
652
|
+
if (componentInstance && componentInstance.getModuleName() !== 'listview') {
|
|
652
653
|
// eslint-disable-next-line
|
|
653
654
|
var compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);
|
|
654
655
|
if (compiledElement) {
|
|
@@ -704,7 +705,7 @@ var ListBase;
|
|
|
704
705
|
var headerData = {};
|
|
705
706
|
headerData[category] = header.textContent;
|
|
706
707
|
header.innerHTML = '';
|
|
707
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
708
|
+
if (componentInstance && componentInstance.getModuleName() !== "listview") {
|
|
708
709
|
// eslint-disable-next-line
|
|
709
710
|
var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
|
|
710
711
|
if (compiledElement) {
|
|
@@ -888,7 +889,7 @@ var ListBase;
|
|
|
888
889
|
if (grpLI && options && options.groupTemplate) {
|
|
889
890
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
890
891
|
var compiledString = compileTemplate(options.groupTemplate);
|
|
891
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
892
|
+
if (componentInstance && componentInstance.getModuleName() !== "listview") {
|
|
892
893
|
// eslint-disable-next-line
|
|
893
894
|
var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
|
|
894
895
|
if (compiledElement) {
|
|
@@ -902,7 +903,7 @@ var ListBase;
|
|
|
902
903
|
else if (!grpLI && options && options.template) {
|
|
903
904
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
904
905
|
var compiledString = compileTemplate(options.template);
|
|
905
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
906
|
+
if (componentInstance && componentInstance.getModuleName() !== 'listview') {
|
|
906
907
|
// eslint-disable-next-line
|
|
907
908
|
var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
|
|
908
909
|
if (compiledElement) {
|
|
@@ -1014,6 +1015,9 @@ function compileTemplate(template) {
|
|
|
1014
1015
|
if (document.querySelector(template)) {
|
|
1015
1016
|
return compile(document.querySelector(template).innerHTML.trim());
|
|
1016
1017
|
}
|
|
1018
|
+
else {
|
|
1019
|
+
return compile(template);
|
|
1020
|
+
}
|
|
1017
1021
|
}
|
|
1018
1022
|
catch (e) {
|
|
1019
1023
|
return compile(template);
|
|
@@ -1078,6 +1082,7 @@ var classNames = {
|
|
|
1078
1082
|
content: 'e-content',
|
|
1079
1083
|
icon: 'e-icons',
|
|
1080
1084
|
backIcon: 'e-icon-back',
|
|
1085
|
+
backButton: 'e-back-button',
|
|
1081
1086
|
checkboxWrapper: 'e-checkbox-wrapper',
|
|
1082
1087
|
checkbox: 'e-checkbox',
|
|
1083
1088
|
checked: 'e-check',
|
|
@@ -1317,7 +1322,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
1317
1322
|
var innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
|
|
1318
1323
|
var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
|
|
1319
1324
|
var hedBackButton = this.createElement('div', {
|
|
1320
|
-
className: classNames.icon + ' ' + classNames.backIcon + '
|
|
1325
|
+
className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
|
|
1321
1326
|
attrs: { style: 'display:none;' }
|
|
1322
1327
|
});
|
|
1323
1328
|
this.headerEle.appendChild(hedBackButton);
|
|
@@ -1434,7 +1439,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
1434
1439
|
groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',
|
|
1435
1440
|
ariaAttributes: {
|
|
1436
1441
|
itemRole: 'option', listRole: 'presentation', itemText: '',
|
|
1437
|
-
groupItemRole: '
|
|
1442
|
+
groupItemRole: 'option', wrapperRole: 'presentation'
|
|
1438
1443
|
},
|
|
1439
1444
|
// eslint-disable-next-line
|
|
1440
1445
|
fields: (this.fields.properties),
|
|
@@ -1688,6 +1693,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
1688
1693
|
}
|
|
1689
1694
|
else {
|
|
1690
1695
|
this.setSelectLI(li, e);
|
|
1696
|
+
this.element.focus();
|
|
1691
1697
|
}
|
|
1692
1698
|
closestElement = closest(e.target, 'li');
|
|
1693
1699
|
if (!isNullOrUndefined(closestElement)) {
|
|
@@ -1710,6 +1716,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
1710
1716
|
this.removeHover();
|
|
1711
1717
|
};
|
|
1712
1718
|
ListView.prototype.homeKeyHandler = function (e, end) {
|
|
1719
|
+
e.preventDefault();
|
|
1713
1720
|
if (Object.keys(this.dataSource).length && this.curUL) {
|
|
1714
1721
|
if (this.selectedItems) {
|
|
1715
1722
|
(this.selectedItems.item).setAttribute('aria-selected', 'false');
|
|
@@ -1868,6 +1875,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
1868
1875
|
}
|
|
1869
1876
|
};
|
|
1870
1877
|
ListView.prototype.spaceKeyHandler = function (e) {
|
|
1878
|
+
e.preventDefault();
|
|
1871
1879
|
if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
|
|
1872
1880
|
var li = this.curUL.querySelector('.' + classNames.focused);
|
|
1873
1881
|
var checkboxElement = void 0;
|
|
@@ -2032,9 +2040,11 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
2032
2040
|
else {
|
|
2033
2041
|
selectedItem =
|
|
2034
2042
|
// eslint-disable-next-line
|
|
2035
|
-
{
|
|
2043
|
+
{
|
|
2044
|
+
item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
|
|
2036
2045
|
// eslint-disable-next-line
|
|
2037
|
-
data: data
|
|
2046
|
+
data: data
|
|
2047
|
+
};
|
|
2038
2048
|
}
|
|
2039
2049
|
var eventArgs = {};
|
|
2040
2050
|
merge(eventArgs, selectedItem);
|
|
@@ -2187,16 +2197,19 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
|
|
|
2187
2197
|
};
|
|
2188
2198
|
ListView.prototype.setViewDataSource = function (dataSource) {
|
|
2189
2199
|
if (dataSource === void 0) { dataSource = this.localData; }
|
|
2200
|
+
// eslint-disable-next-line
|
|
2201
|
+
var fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
|
|
2202
|
+
var query = ListBase.addSorting(this.sortOrder, fieldValue);
|
|
2190
2203
|
if (dataSource && this.fields.groupBy) {
|
|
2191
2204
|
if (this.sortOrder !== 'None') {
|
|
2192
|
-
this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource,
|
|
2205
|
+
this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, query), this.listBaseOption.fields, this.sortOrder);
|
|
2193
2206
|
}
|
|
2194
2207
|
else {
|
|
2195
2208
|
this.curViewDS = ListBase.groupDataSource(dataSource, this.listBaseOption.fields, this.sortOrder);
|
|
2196
2209
|
}
|
|
2197
2210
|
}
|
|
2198
2211
|
else if (dataSource && this.sortOrder !== 'None') {
|
|
2199
|
-
this.curViewDS = ListBase.getDataSource(dataSource,
|
|
2212
|
+
this.curViewDS = ListBase.getDataSource(dataSource, query);
|
|
2200
2213
|
}
|
|
2201
2214
|
else {
|
|
2202
2215
|
this.curViewDS = dataSource;
|
|
@@ -3290,6 +3303,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3290
3303
|
}
|
|
3291
3304
|
};
|
|
3292
3305
|
Virtualization.prototype.updateUiContent = function (element, index) {
|
|
3306
|
+
// eslint-disable-next-line
|
|
3293
3307
|
var curViewDs = this.listViewInstance.curViewDS;
|
|
3294
3308
|
if (typeof this.listViewInstance.dataSource[0] === 'string' ||
|
|
3295
3309
|
typeof this.listViewInstance.dataSource[0] === 'number') {
|
|
@@ -3452,8 +3466,10 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3452
3466
|
var indexArray = this.uiIndices.activeIndices;
|
|
3453
3467
|
for (var i = 0; i < indexArray.length; i++) {
|
|
3454
3468
|
textCollection.push(curViewDS_2[indexArray[i]][text]);
|
|
3469
|
+
// eslint-disable-next-line
|
|
3455
3470
|
dataCollection.push(curViewDS_2[indexArray[i]]);
|
|
3456
3471
|
}
|
|
3472
|
+
// eslint-disable-next-line
|
|
3457
3473
|
var dataSource_1 = this.listViewInstance.dataSource instanceof DataManager
|
|
3458
3474
|
? curViewDS_2 : this.listViewInstance.dataSource;
|
|
3459
3475
|
return {
|
|
@@ -3466,6 +3482,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3466
3482
|
};
|
|
3467
3483
|
}
|
|
3468
3484
|
else {
|
|
3485
|
+
// eslint-disable-next-line
|
|
3469
3486
|
var dataSource = this.listViewInstance.dataSource instanceof DataManager
|
|
3470
3487
|
? curViewDS_2 : this.listViewInstance.dataSource;
|
|
3471
3488
|
return {
|
|
@@ -3482,6 +3499,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3482
3499
|
}
|
|
3483
3500
|
};
|
|
3484
3501
|
Virtualization.prototype.selectItem = function (obj) {
|
|
3502
|
+
// eslint-disable-next-line
|
|
3485
3503
|
var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3486
3504
|
if (Object.keys(resutJSON).length) {
|
|
3487
3505
|
var isSelected = this.activeIndex === resutJSON.index;
|
|
@@ -3509,6 +3527,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3509
3527
|
}
|
|
3510
3528
|
}
|
|
3511
3529
|
else {
|
|
3530
|
+
// eslint-disable-next-line
|
|
3512
3531
|
var eventArgs = void 0;
|
|
3513
3532
|
if (typeof this.listViewInstance.dataSource[0] === 'string' ||
|
|
3514
3533
|
typeof this.listViewInstance.dataSource[0] === 'number') {
|
|
@@ -3542,24 +3561,28 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3542
3561
|
}
|
|
3543
3562
|
};
|
|
3544
3563
|
Virtualization.prototype.enableItem = function (obj) {
|
|
3564
|
+
// eslint-disable-next-line
|
|
3545
3565
|
var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3546
3566
|
if (Object.keys(resutJSON).length) {
|
|
3547
3567
|
this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
|
|
3548
3568
|
}
|
|
3549
3569
|
};
|
|
3550
3570
|
Virtualization.prototype.disableItem = function (obj) {
|
|
3571
|
+
// eslint-disable-next-line
|
|
3551
3572
|
var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3552
3573
|
if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {
|
|
3553
3574
|
this.uiIndices.disabledItemIndices.push(resutJSON.index);
|
|
3554
3575
|
}
|
|
3555
3576
|
};
|
|
3556
3577
|
Virtualization.prototype.showItem = function (obj) {
|
|
3578
|
+
// eslint-disable-next-line
|
|
3557
3579
|
var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3558
3580
|
if (Object.keys(resutJSON).length) {
|
|
3559
3581
|
this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
|
|
3560
3582
|
}
|
|
3561
3583
|
};
|
|
3562
3584
|
Virtualization.prototype.hideItem = function (obj) {
|
|
3585
|
+
// eslint-disable-next-line
|
|
3563
3586
|
var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3564
3587
|
if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {
|
|
3565
3588
|
this.uiIndices.hiddenItemIndices.push(resutJSON.index);
|
|
@@ -3568,7 +3591,9 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3568
3591
|
Virtualization.prototype.removeItem = function (obj) {
|
|
3569
3592
|
var dataSource;
|
|
3570
3593
|
var curViewDS = this.listViewInstance.curViewDS;
|
|
3594
|
+
// eslint-disable-next-line
|
|
3571
3595
|
var resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
|
|
3596
|
+
// eslint-disable-next-line
|
|
3572
3597
|
if (Object.keys(resutJSON).length) {
|
|
3573
3598
|
dataSource = resutJSON.data;
|
|
3574
3599
|
if (curViewDS[resutJSON.index - 1] &&
|
|
@@ -3788,6 +3813,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
|
|
|
3788
3813
|
}
|
|
3789
3814
|
}
|
|
3790
3815
|
else {
|
|
3816
|
+
// eslint-disable-next-line
|
|
3791
3817
|
var index = this.listViewInstance.curViewDS.indexOf(currentItem);
|
|
3792
3818
|
// virtually new add list item based on the scollbar position
|
|
3793
3819
|
this.addUiItem(index);
|
|
@@ -4255,6 +4281,8 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
|
|
|
4255
4281
|
};
|
|
4256
4282
|
// eslint-disable-next-line
|
|
4257
4283
|
_this.onDrag = function (e) {
|
|
4284
|
+
if (!e.target)
|
|
4285
|
+
return;
|
|
4258
4286
|
_this.trigger('drag', { event: e.event, element: _this.element, target: e.target });
|
|
4259
4287
|
var newInst = _this.getSortableInstance(e.target);
|
|
4260
4288
|
var target = _this.getSortableElement(e.target, newInst);
|