@syncfusion/ej2-lists 20.4.48 → 21.1.35
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 -16
- package/dist/ej2-lists.min.js +2 -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 +46 -21
- package/dist/es6/ej2-lists.es2015.js.map +1 -1
- package/dist/es6/ej2-lists.es5.js +46 -21
- 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 +10 -9
- package/src/common/list-base.js +5 -5
- package/src/list-view/list-view.d.ts +30 -2
- package/src/list-view/list-view.js +7 -7
- package/src/list-view/virtualization.d.ts +14 -0
- package/src/list-view/virtualization.js +30 -2
- package/src/sortable/sortable-model.d.ts +4 -2
- package/src/sortable/sortable.js +4 -7
- package/styles/list-view/_bootstrap5-definition.scss +1 -1
- package/styles/list-view/_fluent-definition.scss +1 -1
- package/styles/list-view/_layout.scss +8 -3
- package/styles/list-view/_tailwind-definition.scss +1 -1
- package/styles/list-view/_theme.scss +1 -1
- package/styles/list-view/_material3-definition.scss +0 -132
- package/styles/sortable/_material3-definition.scss +0 -1
package/dist/global/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: index.d.ts
|
|
3
|
-
* version :
|
|
3
|
+
* version : 21.1.35
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"_from": "@syncfusion/ej2-lists@*",
|
|
3
|
-
"_id": "@syncfusion/ej2-lists@
|
|
3
|
+
"_id": "@syncfusion/ej2-lists@18.16.5",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
5
|
+
"_integrity": "sha512-ORLmP4sPs0TnR81+vVZGahFS7+jQDOsyBy16z0Y/DAG3IF68ZdWOL5qNqvthAb2d+/6D16BaGn9HmGPKFpVZ2g==",
|
|
6
6
|
"_location": "/@syncfusion/ej2-lists",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
@@ -31,21 +31,22 @@
|
|
|
31
31
|
"/@syncfusion/ej2-pdfviewer",
|
|
32
32
|
"/@syncfusion/ej2-pivotview",
|
|
33
33
|
"/@syncfusion/ej2-react-lists",
|
|
34
|
+
"/@syncfusion/ej2-ribbon",
|
|
34
35
|
"/@syncfusion/ej2-schedule",
|
|
35
36
|
"/@syncfusion/ej2-vue-lists"
|
|
36
37
|
],
|
|
37
|
-
"_resolved": "https://nexus.syncfusion.com/repository/ej2-
|
|
38
|
-
"_shasum": "
|
|
38
|
+
"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-lists/-/ej2-lists-18.16.5.tgz",
|
|
39
|
+
"_shasum": "7ca3d2a02bca396ed7c973f32926dc7e5fd62c42",
|
|
39
40
|
"_spec": "@syncfusion/ej2-lists@*",
|
|
40
|
-
"_where": "/jenkins/workspace/
|
|
41
|
+
"_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
|
|
41
42
|
"author": {
|
|
42
43
|
"name": "Syncfusion Inc."
|
|
43
44
|
},
|
|
44
45
|
"bundleDependencies": false,
|
|
45
46
|
"dependencies": {
|
|
46
|
-
"@syncfusion/ej2-base": "~
|
|
47
|
-
"@syncfusion/ej2-buttons": "~
|
|
48
|
-
"@syncfusion/ej2-data": "~
|
|
47
|
+
"@syncfusion/ej2-base": "~21.1.35",
|
|
48
|
+
"@syncfusion/ej2-buttons": "~21.1.35",
|
|
49
|
+
"@syncfusion/ej2-data": "~21.1.35"
|
|
49
50
|
},
|
|
50
51
|
"deprecated": false,
|
|
51
52
|
"description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.",
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
"url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
|
|
86
87
|
},
|
|
87
88
|
"typings": "index.d.ts",
|
|
88
|
-
"version": "
|
|
89
|
+
"version": "21.1.35",
|
|
89
90
|
"sideEffects": false,
|
|
90
91
|
"homepage": "https://www.syncfusion.com/javascript-ui-controls"
|
|
91
92
|
}
|
package/src/common/list-base.js
CHANGED
|
@@ -443,11 +443,11 @@ export var ListBase;
|
|
|
443
443
|
var grpItem = {};
|
|
444
444
|
var hdr = 'isHeader';
|
|
445
445
|
grpItem[curFields.text] = ds[j].key;
|
|
446
|
-
grpItem[hdr] = true;
|
|
446
|
+
grpItem["" + hdr] = true;
|
|
447
447
|
var newtext = curFields.text;
|
|
448
448
|
if (newtext === 'id') {
|
|
449
449
|
newtext = 'text';
|
|
450
|
-
grpItem[newtext] = ds[j].key;
|
|
450
|
+
grpItem["" + newtext] = ds[j].key;
|
|
451
451
|
}
|
|
452
452
|
grpItem._id = 'group-list-item-' + (ds[j].key ?
|
|
453
453
|
ds[j].key.toString().trim() : 'undefined');
|
|
@@ -706,7 +706,7 @@ export var ListBase;
|
|
|
706
706
|
for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {
|
|
707
707
|
var header = headerItems_1[_i];
|
|
708
708
|
var headerData = {};
|
|
709
|
-
headerData[category] = header.textContent;
|
|
709
|
+
headerData["" + category] = header.textContent;
|
|
710
710
|
header.innerHTML = '';
|
|
711
711
|
if (componentInstance && componentInstance.getModuleName() !== "listview") {
|
|
712
712
|
// eslint-disable-next-line
|
|
@@ -1002,11 +1002,11 @@ export function getFieldValues(dataItem, fields) {
|
|
|
1002
1002
|
else {
|
|
1003
1003
|
for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {
|
|
1004
1004
|
var field = _a[_i];
|
|
1005
|
-
var dataField = fields[field];
|
|
1005
|
+
var dataField = fields["" + field];
|
|
1006
1006
|
var value = !isNullOrUndefined(dataField) &&
|
|
1007
1007
|
typeof (dataField) === 'string' ? getValue(dataField, dataItem) : undefined;
|
|
1008
1008
|
if (!isNullOrUndefined(value)) {
|
|
1009
|
-
fieldData[dataField] = value;
|
|
1009
|
+
fieldData["" + dataField] = value;
|
|
1010
1010
|
}
|
|
1011
1011
|
}
|
|
1012
1012
|
}
|
|
@@ -100,11 +100,39 @@ export interface AnimationSettings {
|
|
|
100
100
|
/**
|
|
101
101
|
* An enum type that denotes the effects of the ListView. Available options are as follows None, SlideLeft, SlideDown, Zoom, Fade;
|
|
102
102
|
*/
|
|
103
|
-
export declare type ListViewEffect =
|
|
103
|
+
export declare type ListViewEffect =
|
|
104
|
+
/**
|
|
105
|
+
* No animation is applied when items are added or removed from the ListView.
|
|
106
|
+
*/
|
|
107
|
+
'None' |
|
|
108
|
+
/**
|
|
109
|
+
* Items slide in from the left when added and slide out to the left when removed.
|
|
110
|
+
*/
|
|
111
|
+
'SlideLeft' |
|
|
112
|
+
/**
|
|
113
|
+
* Items slide in from the top when added and slide out to the top when removed.
|
|
114
|
+
*/
|
|
115
|
+
'SlideDown' |
|
|
116
|
+
/**
|
|
117
|
+
* Items zoom in or out when added or removed.
|
|
118
|
+
*/
|
|
119
|
+
'Zoom' |
|
|
120
|
+
/**
|
|
121
|
+
* Items fade in or out when added or removed.
|
|
122
|
+
*/
|
|
123
|
+
'Fade';
|
|
104
124
|
/**
|
|
105
125
|
* An enum type that denotes the position of checkbox of the ListView. Available options are as follows Left and Right;
|
|
106
126
|
*/
|
|
107
|
-
export declare type checkBoxPosition =
|
|
127
|
+
export declare type checkBoxPosition =
|
|
128
|
+
/**
|
|
129
|
+
* The checkbox is positioned on the left side of the ListView item.
|
|
130
|
+
*/
|
|
131
|
+
'Left' |
|
|
132
|
+
/**
|
|
133
|
+
* The checkbox is positioned on the right side of the ListView item.
|
|
134
|
+
*/
|
|
135
|
+
'Right';
|
|
108
136
|
/**
|
|
109
137
|
* Represents the EJ2 ListView control.
|
|
110
138
|
* ```html
|
|
@@ -375,7 +375,7 @@ var ListView = /** @class */ (function (_super) {
|
|
|
375
375
|
}
|
|
376
376
|
else {
|
|
377
377
|
var slideLeft = 'SlideLeft';
|
|
378
|
-
anim = effectsConfig[slideLeft];
|
|
378
|
+
anim = effectsConfig["" + slideLeft];
|
|
379
379
|
reverse = this.enableRtl;
|
|
380
380
|
duration = 0;
|
|
381
381
|
}
|
|
@@ -1183,11 +1183,11 @@ var ListView = /** @class */ (function (_super) {
|
|
|
1183
1183
|
// eslint-disable-next-line
|
|
1184
1184
|
for (var _i = 0, _a = Object.keys(this.fields.properties); _i < _a.length; _i++) {
|
|
1185
1185
|
var column = _a[_i];
|
|
1186
|
-
if (column !== 'tableName' && !!(this.fields[column]) &&
|
|
1187
|
-
this.fields[column] !==
|
|
1188
|
-
ListBase.defaultMappedFields[column]
|
|
1189
|
-
&& columns.indexOf(this.fields[column]) === -1) {
|
|
1190
|
-
columns.push(this.fields[column]);
|
|
1186
|
+
if (column !== 'tableName' && !!(this.fields["" + column]) &&
|
|
1187
|
+
this.fields["" + column] !==
|
|
1188
|
+
ListBase.defaultMappedFields["" + column]
|
|
1189
|
+
&& columns.indexOf(this.fields["" + column]) === -1) {
|
|
1190
|
+
columns.push(this.fields["" + column]);
|
|
1191
1191
|
}
|
|
1192
1192
|
}
|
|
1193
1193
|
query.select(columns);
|
|
@@ -1363,7 +1363,7 @@ var ListView = /** @class */ (function (_super) {
|
|
|
1363
1363
|
if (this.enableVirtualization) {
|
|
1364
1364
|
if (Object.keys(this.dataSource).length) {
|
|
1365
1365
|
if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {
|
|
1366
|
-
if (this.isReact) {
|
|
1366
|
+
if (this.isReact || this.isVue) {
|
|
1367
1367
|
if (typeof this.template == "string") {
|
|
1368
1368
|
this.listBaseOption.template = null;
|
|
1369
1369
|
}
|
|
@@ -37,6 +37,12 @@ export declare class Virtualization {
|
|
|
37
37
|
* @private
|
|
38
38
|
*/
|
|
39
39
|
isNgTemplate(): boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Checks if the platform is a Vue and its template property is a function type.
|
|
42
|
+
*
|
|
43
|
+
* @returns {boolean} indicating the result of the check
|
|
44
|
+
*/
|
|
45
|
+
private isVueFunctionTemplate;
|
|
40
46
|
/**
|
|
41
47
|
* For internal use only.
|
|
42
48
|
*
|
|
@@ -79,6 +85,14 @@ export declare class Virtualization {
|
|
|
79
85
|
private textProperty;
|
|
80
86
|
reRenderUiVirtualization(): void;
|
|
81
87
|
private updateUI;
|
|
88
|
+
/**
|
|
89
|
+
* Handles the UI change in vue for the list view.
|
|
90
|
+
*
|
|
91
|
+
* @param {DataSource} newData - The new data source for the list view.
|
|
92
|
+
* @param {ElementContext} listElement - The HTML element context for the list view.
|
|
93
|
+
* @param {Virtualization} virtualThis - The virtualization context for the list view.
|
|
94
|
+
*/
|
|
95
|
+
private onVueChange;
|
|
82
96
|
private onNgChange;
|
|
83
97
|
getModuleName(): string;
|
|
84
98
|
destroy(): void;
|
|
@@ -17,6 +17,14 @@ var Virtualization = /** @class */ (function () {
|
|
|
17
17
|
Virtualization.prototype.isNgTemplate = function () {
|
|
18
18
|
return !isNullOrUndefined(this.listViewInstance.templateRef) && typeof this.listViewInstance.templateRef !== 'string';
|
|
19
19
|
};
|
|
20
|
+
/**
|
|
21
|
+
* Checks if the platform is a Vue and its template property is a function type.
|
|
22
|
+
*
|
|
23
|
+
* @returns {boolean} indicating the result of the check
|
|
24
|
+
*/
|
|
25
|
+
Virtualization.prototype.isVueFunctionTemplate = function () {
|
|
26
|
+
return this.listViewInstance.isVue && typeof this.listViewInstance.template === 'function';
|
|
27
|
+
};
|
|
20
28
|
/**
|
|
21
29
|
* For internal use only.
|
|
22
30
|
*
|
|
@@ -386,7 +394,7 @@ var Virtualization = /** @class */ (function () {
|
|
|
386
394
|
if (this.listViewInstance.showCheckBox) {
|
|
387
395
|
var indexArray = this.uiIndices.activeIndices;
|
|
388
396
|
for (var i = 0; i < indexArray.length; i++) {
|
|
389
|
-
textCollection.push(curViewDS_2[indexArray[i]][text]);
|
|
397
|
+
textCollection.push(curViewDS_2[indexArray[i]]["" + text]);
|
|
390
398
|
// eslint-disable-next-line
|
|
391
399
|
dataCollection.push(curViewDS_2[indexArray[i]]);
|
|
392
400
|
}
|
|
@@ -809,10 +817,14 @@ var Virtualization = /** @class */ (function () {
|
|
|
809
817
|
this.listViewInstance.template = div.innerHTML;
|
|
810
818
|
}
|
|
811
819
|
}
|
|
820
|
+
if (this.isVueFunctionTemplate())
|
|
821
|
+
return;
|
|
812
822
|
template.innerHTML = this.listViewInstance.template;
|
|
813
823
|
this.listViewInstance.template = virtualTemplate;
|
|
814
824
|
}
|
|
815
825
|
else {
|
|
826
|
+
if (this.isVueFunctionTemplate())
|
|
827
|
+
return;
|
|
816
828
|
template.innerHTML = this.listViewInstance.template || commonTemplate;
|
|
817
829
|
}
|
|
818
830
|
// eslint-disable-next-line
|
|
@@ -1095,7 +1107,7 @@ var Virtualization = /** @class */ (function () {
|
|
|
1095
1107
|
};
|
|
1096
1108
|
Virtualization.prototype.updateUI = function (element, index, targetElement) {
|
|
1097
1109
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
1098
|
-
var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
|
|
1110
|
+
var onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
|
|
1099
1111
|
if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
|
|
1100
1112
|
var curViewDS = this.listViewInstance.curViewDS[index];
|
|
1101
1113
|
// eslint-disable-next-line
|
|
@@ -1112,6 +1124,22 @@ var Virtualization = /** @class */ (function () {
|
|
|
1112
1124
|
this.listViewInstance.ulElement.insertBefore(element, targetElement);
|
|
1113
1125
|
}
|
|
1114
1126
|
};
|
|
1127
|
+
/**
|
|
1128
|
+
* Handles the UI change in vue for the list view.
|
|
1129
|
+
*
|
|
1130
|
+
* @param {DataSource} newData - The new data source for the list view.
|
|
1131
|
+
* @param {ElementContext} listElement - The HTML element context for the list view.
|
|
1132
|
+
* @param {Virtualization} virtualThis - The virtualization context for the list view.
|
|
1133
|
+
*/
|
|
1134
|
+
Virtualization.prototype.onVueChange = function (newData, listElement, virtualThis) {
|
|
1135
|
+
var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement,
|
|
1136
|
+
// eslint-disable-next-line
|
|
1137
|
+
[newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
|
|
1138
|
+
while (listElement.lastChild) {
|
|
1139
|
+
listElement.removeChild(listElement.lastChild);
|
|
1140
|
+
}
|
|
1141
|
+
listElement.appendChild(liItem[0].firstChild);
|
|
1142
|
+
};
|
|
1115
1143
|
Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {
|
|
1116
1144
|
// compile given target element with template for new data
|
|
1117
1145
|
// eslint-disable-next-line
|
|
@@ -42,7 +42,7 @@ export interface SortableModel {
|
|
|
42
42
|
* @event 'object'
|
|
43
43
|
*/
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
|
|
46
46
|
drag?: (e: any) => void;
|
|
47
47
|
|
|
48
48
|
/**
|
|
@@ -50,7 +50,7 @@ export interface SortableModel {
|
|
|
50
50
|
*
|
|
51
51
|
* @event 'object'
|
|
52
52
|
*/
|
|
53
|
-
|
|
53
|
+
|
|
54
54
|
beforeDragStart?: (e: any) => void;
|
|
55
55
|
|
|
56
56
|
/**
|
|
@@ -58,6 +58,7 @@ export interface SortableModel {
|
|
|
58
58
|
*
|
|
59
59
|
* @event 'object'
|
|
60
60
|
*/
|
|
61
|
+
|
|
61
62
|
dragStart?: (e: any) => void;
|
|
62
63
|
|
|
63
64
|
/**
|
|
@@ -65,6 +66,7 @@ export interface SortableModel {
|
|
|
65
66
|
*
|
|
66
67
|
* @event 'object'
|
|
67
68
|
*/
|
|
69
|
+
|
|
68
70
|
beforeDrop?: (e: any) => void;
|
|
69
71
|
|
|
70
72
|
/**
|
package/src/sortable/sortable.js
CHANGED
|
@@ -17,7 +17,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
17
17
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18
18
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
19
19
|
};
|
|
20
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
21
20
|
import { Base, Event, getUniqueID, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
|
|
22
21
|
import { closest, Draggable, remove, compareElementParent } from '@syncfusion/ej2-base';
|
|
23
22
|
import { addClass, isNullOrUndefined, getComponent, isBlazor } from '@syncfusion/ej2-base';
|
|
@@ -39,10 +38,8 @@ import { addClass, isNullOrUndefined, getComponent, isBlazor } from '@syncfusion
|
|
|
39
38
|
*/
|
|
40
39
|
var Sortable = /** @class */ (function (_super) {
|
|
41
40
|
__extends(Sortable, _super);
|
|
42
|
-
/* es-lint enable */
|
|
43
41
|
function Sortable(element, options) {
|
|
44
42
|
var _this = _super.call(this, options, element) || this;
|
|
45
|
-
// eslint-disable-next-line
|
|
46
43
|
_this.getHelper = function (e) {
|
|
47
44
|
// eslint-disable-next-line prefer-const
|
|
48
45
|
var target = _this.getSortableElement(e.sender.target);
|
|
@@ -64,14 +61,14 @@ var Sortable = /** @class */ (function (_super) {
|
|
|
64
61
|
};
|
|
65
62
|
// eslint-disable-next-line
|
|
66
63
|
_this.onDrag = function (e) {
|
|
67
|
-
if (!e.target)
|
|
64
|
+
if (!e.target) {
|
|
68
65
|
return;
|
|
66
|
+
}
|
|
69
67
|
_this.trigger('drag', { event: e.event, element: _this.element, target: e.target });
|
|
70
68
|
var newInst = _this.getSortableInstance(e.target);
|
|
71
69
|
var target = _this.getSortableElement(e.target, newInst);
|
|
72
70
|
if ((_this.isValidTarget(target, newInst) || e.target.className.indexOf('e-list-group-item') > -1) && (_this.curTarget !== target ||
|
|
73
|
-
!isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target :
|
|
74
|
-
true)) {
|
|
71
|
+
!isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target : true)) {
|
|
75
72
|
if (e.target.className.indexOf('e-list-group-item') > -1) {
|
|
76
73
|
target = e.target;
|
|
77
74
|
}
|
|
@@ -225,7 +222,7 @@ var Sortable = /** @class */ (function (_super) {
|
|
|
225
222
|
_this.target = null;
|
|
226
223
|
_this.curTarget = null;
|
|
227
224
|
remove(e.helper);
|
|
228
|
-
getComponent(_this.element,
|
|
225
|
+
getComponent(_this.element, 'draggable').intDestroy(e.event);
|
|
229
226
|
};
|
|
230
227
|
_this.bind();
|
|
231
228
|
return _this;
|
|
@@ -7,7 +7,7 @@ $listview-item-line-height: 18px !default;
|
|
|
7
7
|
$listview-item-padding: 7px 9px 7px 12px !default;
|
|
8
8
|
$listview-rtl-item-padding: 7px 12px 7px 12px !default;
|
|
9
9
|
$listview-header-padding: 6px 12px !default;
|
|
10
|
-
$listview-back-icon-font-size:
|
|
10
|
+
$listview-back-icon-font-size: $text-xs !default;
|
|
11
11
|
$listview-root-border-radius: 4px !default;
|
|
12
12
|
$listview-nested-icon-collapsible: 12px !default;
|
|
13
13
|
$listview-icon-size: 20px !default;
|
|
@@ -8,7 +8,7 @@ $listview-item-line-height: 22px !default;
|
|
|
8
8
|
$listview-item-padding: 7px 12px 7px 12px !default;
|
|
9
9
|
$listview-rtl-item-padding: 7px 12px 7px 9px !default;
|
|
10
10
|
$listview-header-padding: 6px 12px !default;
|
|
11
|
-
$listview-back-icon-font-size:
|
|
11
|
+
$listview-back-icon-font-size: $text-sm !default;
|
|
12
12
|
$listview-root-border-radius: 0 !default;
|
|
13
13
|
$listview-nested-icon-collapsible: 12px !default;
|
|
14
14
|
$listview-icon-size: 20px !default;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.e-text-content {
|
|
52
|
-
@if ($skin-name == 'tailwind') {
|
|
52
|
+
@if ($skin-name == 'tailwind' or $skin-name == 'Material3') {
|
|
53
53
|
font-size: $listview-touch-header-font-size;
|
|
54
54
|
line-height: $listview-touch-groupheader-line-height;
|
|
55
55
|
}
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
@else {
|
|
356
356
|
margin-top: $listview-icon-back-margin;
|
|
357
357
|
}
|
|
358
|
-
@if ($skin-name == 'FluentUI') {
|
|
358
|
+
@if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
|
|
359
359
|
margin-right: $listview-icon-back-margin-right;
|
|
360
360
|
}
|
|
361
361
|
}
|
|
@@ -377,7 +377,7 @@
|
|
|
377
377
|
}
|
|
378
378
|
}
|
|
379
379
|
@else {
|
|
380
|
-
@if ($skin-name != 'FluentUI') {
|
|
380
|
+
@if ($skin-name != 'FluentUI' and $skin-name != 'Material3') {
|
|
381
381
|
border-bottom: 1px solid;
|
|
382
382
|
}
|
|
383
383
|
padding: 0 $listview-header-text-padding;
|
|
@@ -425,6 +425,11 @@
|
|
|
425
425
|
padding: $listview-item-padding;
|
|
426
426
|
}
|
|
427
427
|
|
|
428
|
+
@if ($skin-name == 'Material3') {
|
|
429
|
+
border-top: $listview-group-border-bottom solid $listview-border-bottom-color;
|
|
430
|
+
border-bottom: $listview-group-border-top solid;
|
|
431
|
+
}
|
|
432
|
+
|
|
428
433
|
.e-list-text {
|
|
429
434
|
cursor: default;
|
|
430
435
|
}
|
|
@@ -28,7 +28,7 @@ $listview-border-size: 1px !default;
|
|
|
28
28
|
$listview-font-size: $text-sm !default;
|
|
29
29
|
$listview-back-padding-right: 8px !default;
|
|
30
30
|
$listview-back-icon-size: 20px !default;
|
|
31
|
-
$listview-back-icon-font-size:
|
|
31
|
+
$listview-back-icon-font-size: $text-base !default;
|
|
32
32
|
$listview-touch-item-height: 48px !default;
|
|
33
33
|
$listview-touch-item-line-height: 24px !default;
|
|
34
34
|
$listview-touch-item-size: 24px !default;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
|
|
66
66
|
& .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
|
|
67
67
|
& .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
|
|
68
|
-
@if ($skin-name != 'tailwind') {
|
|
68
|
+
@if ($skin-name != 'tailwind' and $skin-name != 'Material3') {
|
|
69
69
|
background-color: $checkmark-bgcolor;
|
|
70
70
|
border-color: $checkmark-border-color;
|
|
71
71
|
color: $checkmark-color;
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
//layout
|
|
2
|
-
$listview-icon-margin-right: 8px !default;
|
|
3
|
-
$listview-icon-back-margin: 0 !default;
|
|
4
|
-
$listview-rtl-icon-back-margin: 0 !default;
|
|
5
|
-
$listview-item-height: 36px !default;
|
|
6
|
-
$listview-item-line-height: 18px !default;
|
|
7
|
-
$listview-item-padding: 7px 9px 7px 12px !default;
|
|
8
|
-
$listview-rtl-item-padding: 7px 12px 7px 12px !default;
|
|
9
|
-
$listview-header-padding: 6px 12px !default;
|
|
10
|
-
$listview-back-icon-font-size: 12px !default;
|
|
11
|
-
$listview-root-border-radius: 4px !default;
|
|
12
|
-
$listview-nested-icon-collapsible: 12px !default;
|
|
13
|
-
$listview-icon-size: 20px !default;
|
|
14
|
-
$listview-header-text-padding: 12px !default;
|
|
15
|
-
$listview-header-height: 36px !default;
|
|
16
|
-
$listview-header-line-height: 18px !default;
|
|
17
|
-
$listview-border-bottom: 1px !default;
|
|
18
|
-
$listview-border-top: 0 !default;
|
|
19
|
-
$listview-border-left: 0 !default;
|
|
20
|
-
$listview-border-right: 0 !default;
|
|
21
|
-
$listview-group-first-border-bottom: 1px !default;
|
|
22
|
-
$listview-group-border-top: 0 !default;
|
|
23
|
-
$listview-group-border-bottom: 1px !default;
|
|
24
|
-
$listview-groupheader-item-height: 36px !default;
|
|
25
|
-
$listview-groupheader-item-line-height: 20px !default;
|
|
26
|
-
$listview-groupheader-font-size: $text-xs !default;
|
|
27
|
-
$listview-border-size: 1px !default;
|
|
28
|
-
$listview-font-size: $text-sm !default;
|
|
29
|
-
$listview-back-padding-right: 8px !default;
|
|
30
|
-
$listview-back-icon-size: 20px !default;
|
|
31
|
-
$listview-touch-item-height: 40px !default;
|
|
32
|
-
$listview-touch-item-line-height: 21px !default;
|
|
33
|
-
$listview-touch-item-size: 24px !default;
|
|
34
|
-
$listview-touch-item-padding: 16px 14px 12px 16px !default;
|
|
35
|
-
$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
|
|
36
|
-
$listview-touch-item-font-size: $text-base !default;
|
|
37
|
-
$listview-touch-groupheader-height: 40px !default;
|
|
38
|
-
$listview-touch-groupheader-line-height: 20px !default;
|
|
39
|
-
$listview-touch-header-height: 40px !default;
|
|
40
|
-
$listview-touch-header-font-weight: $font-weight-medium !default;
|
|
41
|
-
$listview-touch-header-font-size: $text-sm !default;
|
|
42
|
-
$listview-touch-header-line-height: 22px !default;
|
|
43
|
-
$listview-touch-header-icon-margin-top: 2px !default;
|
|
44
|
-
$listview-touch-icon-margin-right: 12px !default;
|
|
45
|
-
$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
|
|
46
|
-
$listview-touch-checkbox-left-margin: 0 12px 0 0 !default;
|
|
47
|
-
$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
|
|
48
|
-
$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
|
|
49
|
-
$listview-checkbox-right-margin: -2px 0 0 8px !default;
|
|
50
|
-
$listview-checkbox-left-margin: 0 8px 0 0 !default;
|
|
51
|
-
$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
|
|
52
|
-
$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
|
|
53
|
-
|
|
54
|
-
//ListView In-built template variables
|
|
55
|
-
$listview-template-padding: 10px 16px !default;
|
|
56
|
-
$listview-template-avatar-padding-right: 16px !default;
|
|
57
|
-
$listview-template-avatar-padding-left: 68px !default;
|
|
58
|
-
$listview-template-avatar-rightposition-padding-right: 68px !default;
|
|
59
|
-
$listview-template-avatar-rightposition-padding-left: 16px !default;
|
|
60
|
-
$listview-template-avatar-size: 40px !default;
|
|
61
|
-
$listview-template-avatar-top: 0 !default;
|
|
62
|
-
$listview-template-avatar-left: 0 !default;
|
|
63
|
-
$listview-template-avatar-margin: 7px 16px 7px 12px !default;
|
|
64
|
-
$listview-template-avatar-rightposition-right: 0 !default;
|
|
65
|
-
$listview-template-badge-height: 18px !default;
|
|
66
|
-
$listview-template-badge-width: 20px !default;
|
|
67
|
-
$listview-template-badge-line-height: 16px !default;
|
|
68
|
-
$listview-template-badge-font-size: $text-xxs !default;
|
|
69
|
-
$listview-template-badge-right: 12px !default;
|
|
70
|
-
$listview-template-avatar-badge-padding-right: 10px !default;
|
|
71
|
-
$listview-template-avatar-badge-padding-left: 68px !default;
|
|
72
|
-
$listview-template-badgewithoutavatar-padding-right: 10px !default;
|
|
73
|
-
$listview-template-badgewithoutavatar-padding-left: 16px !default;
|
|
74
|
-
$listview-template-item-padding: 8px 0 !default;
|
|
75
|
-
$listview-template-multiline-header-padding: 0 !default;
|
|
76
|
-
$listview-template-multiline-content-padding: 2px 0 0 0 !default;
|
|
77
|
-
$listview-template-multiline-header-font-size: $text-sm !default;
|
|
78
|
-
$listview-template-multiline-padding: 4px !default;
|
|
79
|
-
$listview-template-multiline-content-font-size: $text-sm !default;
|
|
80
|
-
$listview-template-multiline-avatar-top: 0 !default;
|
|
81
|
-
$listview-touch-template-padding: 12px 16px !default;
|
|
82
|
-
$listview-touch-template-multiline-padding: 7px !default;
|
|
83
|
-
$listview-touch-template-avatar-padding-left: 88px !default;
|
|
84
|
-
$listview-touch-template-avatar-size: 48px !default;
|
|
85
|
-
$listview-touch-template-multiline-header-font-size: $text-base !default;
|
|
86
|
-
$listview-touch-template-multiline-header-line-height: 24px !default;
|
|
87
|
-
$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
|
|
88
|
-
$listview-touch-template-badge-height: 20px !default;
|
|
89
|
-
$listview-touch-template-badge-width: 34px !default;
|
|
90
|
-
$listview-touch-template-badge-line-height: 18px !default;
|
|
91
|
-
$listview-touch-template-badge-font-size: $text-xs !default;
|
|
92
|
-
|
|
93
|
-
//color
|
|
94
|
-
$listview-font-family: $font-family !default;
|
|
95
|
-
$listview-text-color: $content-text-color !default;
|
|
96
|
-
$listview-text-disabled: $content-text-color-disabled !default;
|
|
97
|
-
$listview-icon-color: $icon-color !default;
|
|
98
|
-
$listview-icon-disabled: $icon-color-disabled !default;
|
|
99
|
-
$listview-background: $transparent !default;
|
|
100
|
-
$listview-line-color: $border-light !default;
|
|
101
|
-
$listview-item-hover-bg: $content-bg-color-hover !default;
|
|
102
|
-
$listview-text-hover-color: $content-text-color-hover !default;
|
|
103
|
-
$listview-item-active-bg: $content-bg-color-selected !default;
|
|
104
|
-
$listview-root-border-color: $border-light !default;
|
|
105
|
-
$listview-text-active-color: $content-text-color-selected !default;
|
|
106
|
-
$listview-header-text-color: $content-text-color-alt3 !default;
|
|
107
|
-
$listview-header-text-disabled: $content-text-color-disabled !default;
|
|
108
|
-
$listview-header-bg: transparent !default;
|
|
109
|
-
$listview-header-icon-color: $icon-color !default;
|
|
110
|
-
$listview-header-icon-disabled: $icon-color-disabled !default;
|
|
111
|
-
$listview-header-border: $border-light !default;
|
|
112
|
-
$listview-header-font-size: $text-xs !default;
|
|
113
|
-
$listview-header-font-weight: $font-weight-medium !default;
|
|
114
|
-
$listview-hover-border-color: $border-light !default;
|
|
115
|
-
$listview-border-bottom-color: $border-light !default;
|
|
116
|
-
$listview-border-top-color: transparent !default;
|
|
117
|
-
$listview-border-right-color: transparent !default;
|
|
118
|
-
$listview-border-left-color: transparent !default;
|
|
119
|
-
$listview-groupheader-text-color: $content-text-color-alt3 !default;
|
|
120
|
-
$listview-groupheader-bg: transparent !default;
|
|
121
|
-
$listview-groupheader-icon: $icon-color !default;
|
|
122
|
-
$listview-focused-collapsible-color: $content-text-color-selected !default;
|
|
123
|
-
$listview-icon-hover: $icon-color-hover !default;
|
|
124
|
-
$listview-icon-pressed: $icon-color-pressed !default;
|
|
125
|
-
$checkmark-bgcolor: $content-bg-color !default;
|
|
126
|
-
$checkmark-border-color: $content-bg-color !default;
|
|
127
|
-
$checkmark-color: $primary !default;
|
|
128
|
-
|
|
129
|
-
//ListView In-built template variables
|
|
130
|
-
$listview-template-multiline-header-color: $content-text-color !default;
|
|
131
|
-
$listview-template-multiline-content-color: $content-text-color-alt3 !default;
|
|
132
|
-
$listview-template-focused-multiline-content-color: $content-text-color-selected !default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* stylelint-disable-line no-empty-source */
|