@syncfusion/ej2-lists 19.4.55 → 20.2.36
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/dist/ts/common/list-base.ts +1283 -0
- package/dist/ts/component.ts +4 -0
- package/dist/ts/list-view/list-view.ts +2595 -0
- package/dist/ts/list-view/virtualization.ts +1155 -0
- package/dist/ts/sortable/sortable.ts +458 -0
- 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 +21 -60
- package/styles/bootstrap.css +21 -59
- package/styles/bootstrap4.css +23 -69
- package/styles/bootstrap5-dark.css +30 -73
- package/styles/bootstrap5.css +30 -73
- package/styles/fabric-dark.css +21 -60
- package/styles/fabric.css +21 -59
- package/styles/fluent-dark.css +519 -0
- package/styles/fluent-dark.scss +2 -0
- package/styles/fluent.css +519 -0
- package/styles/fluent.scss +2 -0
- package/styles/highcontrast-light.css +21 -60
- package/styles/highcontrast.css +21 -59
- 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/_fusionnew-definition.scss +129 -0
- package/styles/list-view/_layout.scss +33 -9
- package/styles/list-view/_material3-definition.scss +129 -0
- package/styles/list-view/_tailwind-definition.scss +4 -3
- package/styles/list-view/_theme.scss +4 -4
- package/styles/list-view/bootstrap-dark.css +20 -56
- package/styles/list-view/bootstrap.css +20 -55
- package/styles/list-view/bootstrap4.css +22 -65
- package/styles/list-view/bootstrap5-dark.css +29 -69
- package/styles/list-view/bootstrap5.css +29 -69
- package/styles/list-view/fabric-dark.css +20 -56
- package/styles/list-view/fabric.css +20 -55
- package/styles/list-view/fluent-dark.css +495 -0
- package/styles/list-view/fluent-dark.scss +5 -0
- package/styles/list-view/fluent.css +495 -0
- package/styles/list-view/fluent.scss +5 -0
- package/styles/list-view/highcontrast-light.css +20 -56
- package/styles/list-view/highcontrast.css +20 -55
- package/styles/list-view/icons/_fluent-dark.scss +1 -0
- package/styles/list-view/icons/_fluent.scss +2 -2
- package/styles/list-view/icons/_fusionnew.scss +8 -0
- package/styles/list-view/icons/_material3.scss +8 -0
- 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 +20 -56
- package/styles/list-view/material.css +20 -55
- package/styles/list-view/tailwind-dark.css +32 -95
- package/styles/list-view/tailwind.css +32 -95
- package/styles/material-dark.css +21 -60
- package/styles/material.css +21 -59
- package/styles/sortable/bootstrap-dark.css +2 -5
- package/styles/sortable/bootstrap.css +2 -5
- package/styles/sortable/bootstrap4.css +2 -5
- package/styles/sortable/bootstrap5-dark.css +2 -5
- package/styles/sortable/bootstrap5.css +2 -5
- package/styles/sortable/fabric-dark.css +2 -5
- package/styles/sortable/fabric.css +2 -5
- package/styles/sortable/fluent-dark.css +23 -0
- package/styles/sortable/fluent-dark.scss +2 -0
- package/styles/sortable/fluent.css +23 -0
- package/styles/sortable/fluent.scss +2 -0
- package/styles/sortable/highcontrast-light.css +2 -5
- package/styles/sortable/highcontrast.css +2 -5
- package/styles/sortable/material-dark.css +2 -5
- package/styles/sortable/material.css +2 -5
- package/styles/sortable/tailwind-dark.css +2 -5
- package/styles/sortable/tailwind.css +2 -5
- package/styles/tailwind-dark.css +33 -99
- package/styles/tailwind.css +33 -99
|
@@ -214,7 +214,8 @@ var ListBase;
|
|
|
214
214
|
const curOpt = extend({}, defaultListBaseOptions, options);
|
|
215
215
|
cssClass = getModuleClass(curOpt.moduleName);
|
|
216
216
|
const fields = (componentInstance &&
|
|
217
|
-
(componentInstance.getModuleName()
|
|
217
|
+
(componentInstance.getModuleName() === 'listview' || componentInstance.getModuleName() === 'multiselect'))
|
|
218
|
+
? curOpt.fields : extend({}, ListBase.defaultMappedFields, curOpt.fields);
|
|
218
219
|
const ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
|
|
219
220
|
let id;
|
|
220
221
|
let checkboxElement = [];
|
|
@@ -634,7 +635,7 @@ var ListBase;
|
|
|
634
635
|
else {
|
|
635
636
|
const currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
|
|
636
637
|
if (isHeader) {
|
|
637
|
-
if (componentInstance && componentInstance.getModuleName() !=
|
|
638
|
+
if (componentInstance && componentInstance.getModuleName() != 'listview') {
|
|
638
639
|
// eslint-disable-next-line
|
|
639
640
|
const compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
|
|
640
641
|
if (compiledElement) {
|
|
@@ -646,7 +647,7 @@ var ListBase;
|
|
|
646
647
|
}
|
|
647
648
|
}
|
|
648
649
|
else {
|
|
649
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
650
|
+
if (componentInstance && componentInstance.getModuleName() !== 'listview') {
|
|
650
651
|
// eslint-disable-next-line
|
|
651
652
|
const compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);
|
|
652
653
|
if (compiledElement) {
|
|
@@ -701,7 +702,7 @@ var ListBase;
|
|
|
701
702
|
const headerData = {};
|
|
702
703
|
headerData[category] = header.textContent;
|
|
703
704
|
header.innerHTML = '';
|
|
704
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
705
|
+
if (componentInstance && componentInstance.getModuleName() !== "listview") {
|
|
705
706
|
// eslint-disable-next-line
|
|
706
707
|
const compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
|
|
707
708
|
if (compiledElement) {
|
|
@@ -885,7 +886,7 @@ var ListBase;
|
|
|
885
886
|
if (grpLI && options && options.groupTemplate) {
|
|
886
887
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
887
888
|
const compiledString = compileTemplate(options.groupTemplate);
|
|
888
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
889
|
+
if (componentInstance && componentInstance.getModuleName() !== "listview") {
|
|
889
890
|
// eslint-disable-next-line
|
|
890
891
|
const compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
|
|
891
892
|
if (compiledElement) {
|
|
@@ -899,7 +900,7 @@ var ListBase;
|
|
|
899
900
|
else if (!grpLI && options && options.template) {
|
|
900
901
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
901
902
|
const compiledString = compileTemplate(options.template);
|
|
902
|
-
if (componentInstance && componentInstance.getModuleName()
|
|
903
|
+
if (componentInstance && componentInstance.getModuleName() !== 'listview') {
|
|
903
904
|
// eslint-disable-next-line
|
|
904
905
|
const compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
|
|
905
906
|
if (compiledElement) {
|
|
@@ -1010,6 +1011,9 @@ function compileTemplate(template) {
|
|
|
1010
1011
|
if (document.querySelector(template)) {
|
|
1011
1012
|
return compile(document.querySelector(template).innerHTML.trim());
|
|
1012
1013
|
}
|
|
1014
|
+
else {
|
|
1015
|
+
return compile(template);
|
|
1016
|
+
}
|
|
1013
1017
|
}
|
|
1014
1018
|
catch (e) {
|
|
1015
1019
|
return compile(template);
|
|
@@ -1061,6 +1065,7 @@ const classNames = {
|
|
|
1061
1065
|
content: 'e-content',
|
|
1062
1066
|
icon: 'e-icons',
|
|
1063
1067
|
backIcon: 'e-icon-back',
|
|
1068
|
+
backButton: 'e-back-button',
|
|
1064
1069
|
checkboxWrapper: 'e-checkbox-wrapper',
|
|
1065
1070
|
checkbox: 'e-checkbox',
|
|
1066
1071
|
checked: 'e-check',
|
|
@@ -1292,7 +1297,7 @@ let ListView = class ListView extends Component {
|
|
|
1292
1297
|
const innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
|
|
1293
1298
|
const textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
|
|
1294
1299
|
const hedBackButton = this.createElement('div', {
|
|
1295
|
-
className: classNames.icon + ' ' + classNames.backIcon + '
|
|
1300
|
+
className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
|
|
1296
1301
|
attrs: { style: 'display:none;' }
|
|
1297
1302
|
});
|
|
1298
1303
|
this.headerEle.appendChild(hedBackButton);
|
|
@@ -1408,7 +1413,7 @@ let ListView = class ListView extends Component {
|
|
|
1408
1413
|
groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',
|
|
1409
1414
|
ariaAttributes: {
|
|
1410
1415
|
itemRole: 'option', listRole: 'presentation', itemText: '',
|
|
1411
|
-
groupItemRole: '
|
|
1416
|
+
groupItemRole: 'option', wrapperRole: 'presentation'
|
|
1412
1417
|
},
|
|
1413
1418
|
// eslint-disable-next-line
|
|
1414
1419
|
fields: (this.fields.properties),
|
|
@@ -1662,6 +1667,7 @@ let ListView = class ListView extends Component {
|
|
|
1662
1667
|
}
|
|
1663
1668
|
else {
|
|
1664
1669
|
this.setSelectLI(li, e);
|
|
1670
|
+
this.element.focus();
|
|
1665
1671
|
}
|
|
1666
1672
|
closestElement = closest(e.target, 'li');
|
|
1667
1673
|
if (!isNullOrUndefined(closestElement)) {
|
|
@@ -1684,6 +1690,7 @@ let ListView = class ListView extends Component {
|
|
|
1684
1690
|
this.removeHover();
|
|
1685
1691
|
}
|
|
1686
1692
|
homeKeyHandler(e, end) {
|
|
1693
|
+
e.preventDefault();
|
|
1687
1694
|
if (Object.keys(this.dataSource).length && this.curUL) {
|
|
1688
1695
|
if (this.selectedItems) {
|
|
1689
1696
|
(this.selectedItems.item).setAttribute('aria-selected', 'false');
|
|
@@ -1841,6 +1848,7 @@ let ListView = class ListView extends Component {
|
|
|
1841
1848
|
}
|
|
1842
1849
|
}
|
|
1843
1850
|
spaceKeyHandler(e) {
|
|
1851
|
+
e.preventDefault();
|
|
1844
1852
|
if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
|
|
1845
1853
|
const li = this.curUL.querySelector('.' + classNames.focused);
|
|
1846
1854
|
let checkboxElement;
|
|
@@ -2003,9 +2011,11 @@ let ListView = class ListView extends Component {
|
|
|
2003
2011
|
else {
|
|
2004
2012
|
selectedItem =
|
|
2005
2013
|
// eslint-disable-next-line
|
|
2006
|
-
{
|
|
2014
|
+
{
|
|
2015
|
+
item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
|
|
2007
2016
|
// eslint-disable-next-line
|
|
2008
|
-
data: data
|
|
2017
|
+
data: data
|
|
2018
|
+
};
|
|
2009
2019
|
}
|
|
2010
2020
|
const eventArgs = {};
|
|
2011
2021
|
merge(eventArgs, selectedItem);
|
|
@@ -2154,16 +2164,19 @@ let ListView = class ListView extends Component {
|
|
|
2154
2164
|
return query;
|
|
2155
2165
|
}
|
|
2156
2166
|
setViewDataSource(dataSource = this.localData) {
|
|
2167
|
+
// eslint-disable-next-line
|
|
2168
|
+
let fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
|
|
2169
|
+
let query = ListBase.addSorting(this.sortOrder, fieldValue);
|
|
2157
2170
|
if (dataSource && this.fields.groupBy) {
|
|
2158
2171
|
if (this.sortOrder !== 'None') {
|
|
2159
|
-
this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource,
|
|
2172
|
+
this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, query), this.listBaseOption.fields, this.sortOrder);
|
|
2160
2173
|
}
|
|
2161
2174
|
else {
|
|
2162
2175
|
this.curViewDS = ListBase.groupDataSource(dataSource, this.listBaseOption.fields, this.sortOrder);
|
|
2163
2176
|
}
|
|
2164
2177
|
}
|
|
2165
2178
|
else if (dataSource && this.sortOrder !== 'None') {
|
|
2166
|
-
this.curViewDS = ListBase.getDataSource(dataSource,
|
|
2179
|
+
this.curViewDS = ListBase.getDataSource(dataSource, query);
|
|
2167
2180
|
}
|
|
2168
2181
|
else {
|
|
2169
2182
|
this.curViewDS = dataSource;
|
|
@@ -3252,6 +3265,7 @@ class Virtualization {
|
|
|
3252
3265
|
}
|
|
3253
3266
|
}
|
|
3254
3267
|
updateUiContent(element, index) {
|
|
3268
|
+
// eslint-disable-next-line
|
|
3255
3269
|
const curViewDs = this.listViewInstance.curViewDS;
|
|
3256
3270
|
if (typeof this.listViewInstance.dataSource[0] === 'string' ||
|
|
3257
3271
|
typeof this.listViewInstance.dataSource[0] === 'number') {
|
|
@@ -3410,8 +3424,10 @@ class Virtualization {
|
|
|
3410
3424
|
const indexArray = this.uiIndices.activeIndices;
|
|
3411
3425
|
for (let i = 0; i < indexArray.length; i++) {
|
|
3412
3426
|
textCollection.push(curViewDS[indexArray[i]][text]);
|
|
3427
|
+
// eslint-disable-next-line
|
|
3413
3428
|
dataCollection.push(curViewDS[indexArray[i]]);
|
|
3414
3429
|
}
|
|
3430
|
+
// eslint-disable-next-line
|
|
3415
3431
|
const dataSource = this.listViewInstance.dataSource instanceof DataManager
|
|
3416
3432
|
? curViewDS : this.listViewInstance.dataSource;
|
|
3417
3433
|
return {
|
|
@@ -3422,6 +3438,7 @@ class Virtualization {
|
|
|
3422
3438
|
};
|
|
3423
3439
|
}
|
|
3424
3440
|
else {
|
|
3441
|
+
// eslint-disable-next-line
|
|
3425
3442
|
const dataSource = this.listViewInstance.dataSource instanceof DataManager
|
|
3426
3443
|
? curViewDS : this.listViewInstance.dataSource;
|
|
3427
3444
|
return {
|
|
@@ -3438,6 +3455,7 @@ class Virtualization {
|
|
|
3438
3455
|
}
|
|
3439
3456
|
}
|
|
3440
3457
|
selectItem(obj) {
|
|
3458
|
+
// eslint-disable-next-line
|
|
3441
3459
|
const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3442
3460
|
if (Object.keys(resutJSON).length) {
|
|
3443
3461
|
const isSelected = this.activeIndex === resutJSON.index;
|
|
@@ -3465,6 +3483,7 @@ class Virtualization {
|
|
|
3465
3483
|
}
|
|
3466
3484
|
}
|
|
3467
3485
|
else {
|
|
3486
|
+
// eslint-disable-next-line
|
|
3468
3487
|
let eventArgs;
|
|
3469
3488
|
if (typeof this.listViewInstance.dataSource[0] === 'string' ||
|
|
3470
3489
|
typeof this.listViewInstance.dataSource[0] === 'number') {
|
|
@@ -3498,24 +3517,28 @@ class Virtualization {
|
|
|
3498
3517
|
}
|
|
3499
3518
|
}
|
|
3500
3519
|
enableItem(obj) {
|
|
3520
|
+
// eslint-disable-next-line
|
|
3501
3521
|
const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3502
3522
|
if (Object.keys(resutJSON).length) {
|
|
3503
3523
|
this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
|
|
3504
3524
|
}
|
|
3505
3525
|
}
|
|
3506
3526
|
disableItem(obj) {
|
|
3527
|
+
// eslint-disable-next-line
|
|
3507
3528
|
const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3508
3529
|
if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {
|
|
3509
3530
|
this.uiIndices.disabledItemIndices.push(resutJSON.index);
|
|
3510
3531
|
}
|
|
3511
3532
|
}
|
|
3512
3533
|
showItem(obj) {
|
|
3534
|
+
// eslint-disable-next-line
|
|
3513
3535
|
const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3514
3536
|
if (Object.keys(resutJSON).length) {
|
|
3515
3537
|
this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
|
|
3516
3538
|
}
|
|
3517
3539
|
}
|
|
3518
3540
|
hideItem(obj) {
|
|
3541
|
+
// eslint-disable-next-line
|
|
3519
3542
|
const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
|
|
3520
3543
|
if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {
|
|
3521
3544
|
this.uiIndices.hiddenItemIndices.push(resutJSON.index);
|
|
@@ -3524,7 +3547,9 @@ class Virtualization {
|
|
|
3524
3547
|
removeItem(obj) {
|
|
3525
3548
|
let dataSource;
|
|
3526
3549
|
const curViewDS = this.listViewInstance.curViewDS;
|
|
3550
|
+
// eslint-disable-next-line
|
|
3527
3551
|
const resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
|
|
3552
|
+
// eslint-disable-next-line
|
|
3528
3553
|
if (Object.keys(resutJSON).length) {
|
|
3529
3554
|
dataSource = resutJSON.data;
|
|
3530
3555
|
if (curViewDS[resutJSON.index - 1] &&
|
|
@@ -3744,6 +3769,7 @@ class Virtualization {
|
|
|
3744
3769
|
}
|
|
3745
3770
|
}
|
|
3746
3771
|
else {
|
|
3772
|
+
// eslint-disable-next-line
|
|
3747
3773
|
const index = this.listViewInstance.curViewDS.indexOf(currentItem);
|
|
3748
3774
|
// virtually new add list item based on the scollbar position
|
|
3749
3775
|
this.addUiItem(index);
|
|
@@ -4185,6 +4211,8 @@ let Sortable = Sortable_1 = class Sortable extends Base {
|
|
|
4185
4211
|
};
|
|
4186
4212
|
// eslint-disable-next-line
|
|
4187
4213
|
this.onDrag = (e) => {
|
|
4214
|
+
if (!e.target)
|
|
4215
|
+
return;
|
|
4188
4216
|
this.trigger('drag', { event: e.event, element: this.element, target: e.target });
|
|
4189
4217
|
let newInst = this.getSortableInstance(e.target);
|
|
4190
4218
|
let target = this.getSortableElement(e.target, newInst);
|