@syncfusion/ej2-lists 23.1.43 → 24.1.41

package/src/list-view/virtualization.js

@@ -1,5 +1,5 @@
 import { classNames } from './list-view';
-import { EventHandler, append, isNullOrUndefined, detach, removeClass, addClass, compile, formatUnit } from '@syncfusion/ej2-base';
+import { EventHandler, append, isNullOrUndefined, detach, compile, formatUnit, select } from '@syncfusion/ej2-base';
 import { ListBase } from '../common/list-base';
 import { DataManager } from '@syncfusion/ej2-data';
 var listElementCount = 1.5;
@@ -31,10 +31,6 @@ var Virtualization = /** @class */ (function () {
      * @private
      */
     Virtualization.prototype.uiVirtualization = function () {
-        this.commonTemplate = '<div class="e-text-content" role="presentation"> ' +
-            '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
-        this.templateFunction = compile(this.listViewInstance.template || this.commonTemplate, this.listViewInstance);
-        this.groupTemplateFunction = compile(this.listViewInstance.groupTemplate || this.commonTemplate, this.listViewInstance);
         this.wireScrollEvent(false);
         var curViewDS = this.listViewInstance.curViewDS;
         var firstDs = curViewDS.slice(0, 1);
@@ -167,6 +163,9 @@ var Virtualization = /** @class */ (function () {
     Virtualization.prototype.onVirtualUiScroll = function (e) {
         var _a;
         var startingHeight;
+        var curViewDS = this.listViewInstance.curViewDS;
+        this.listItemHeight = select('.e-list-item', this.listViewInstance.element).getBoundingClientRect().height;
+        this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
         if (this.listViewInstance.isWindow) {
             startingHeight = this.listViewInstance.ulElement.getBoundingClientRect().top -
                 document.documentElement.getBoundingClientRect().top;
@@ -282,7 +281,13 @@ var Virtualization = /** @class */ (function () {
                 if (!element.querySelector('.' + classNames.checkboxWrapper)) {
                     element.classList.add(classNames.checklist);
                     textContent.classList.add(classNames.checkbox);
-                    textContent.insertBefore(this.checkListWrapper.cloneNode(true), element.querySelector('.' + classNames.listItemText));
+                    if (this.listViewInstance.checkBoxPosition === 'Left') {
+                        textContent.classList.add('e-checkbox-left');
+                    }
+                    else {
+                        textContent.classList.add('e-checkbox-right');
+                    }
+                    textContent.append(this.checkListWrapper.cloneNode(true));
                 }
             }
         }
@@ -526,7 +531,6 @@ var Virtualization = /** @class */ (function () {
         var curViewDS = this.listViewInstance.curViewDS;
         // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
-        // eslint-disable-next-line
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
             if (curViewDS[resutJSON.index - 1] &&
@@ -790,192 +794,50 @@ var Virtualization = /** @class */ (function () {
         this.refreshItemHeight();
     };
     Virtualization.prototype.createUIItem = function (args) {
-        var template = document.createElement('div');
-        this.templateData = args.curData.isHeader ? args.curData.items[0] :
-            args.curData;
-        if (this.listViewInstance.isReact) {
-            this.commonTemplate = null;
-        }
-        if (this.listViewInstance.showCheckBox) {
-            // eslint-disable-next-line
-            this.listViewInstance.renderCheckbox(args);
-            if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
-                (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
-                var div_1 = document.createElement('div');
-                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach(function (ele) {
-                    div_1.appendChild(ele);
-                });
-                if (div_1.children && div_1.children[0]) {
-                    div_1.children[0].classList.add('e-checkbox');
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div_1.children[0].classList.add('e-checkbox-left');
-                    }
-                    else {
-                        div_1.children[0].classList.add('e-checkbox-right');
-                    }
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
-                    }
-                    else {
-                        div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+        if (!args.item.classList.contains('e-list-group-item')) {
+            this.templateData = args.curData.isHeader ? args.curData.items[0] :
+                args.curData;
+            if (this.listViewInstance.showCheckBox) {
+                // eslint-disable-next-line
+                this.listViewInstance.renderCheckbox(args);
+                if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
+                    (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
+                    var div_1 = document.createElement('div');
+                    var commonTemplate = '<div class="e-text-content" role="presentation"> ' +
+                        '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+                    var templateFunction = compile(this.listViewInstance.template || commonTemplate, this.listViewInstance);
+                    var nodes = templateFunction(this.templateData, this.listViewInstance);
+                    if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                        this.listViewInstance.renderReactTemplates();
                     }
-                    template.innerHTML = div_1.innerHTML;
-                }
-            }
-            else {
-                var div_2 = document.createElement('div');
-                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach(function (ele) {
-                    div_2.appendChild(ele);
-                });
-                template.innerHTML = div_2.innerHTML;
-            }
-        }
-        else {
-            var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach(function (ele) {
-                template.appendChild(ele);
-            });
-        }
-        if (args.curData.isHeader) {
-            this.headerData = args.curData;
-        }
-        var groupTemplate = this.listViewInstance.createElement('div');
-        if (this.listViewInstance.fields.groupBy) {
-            var nodes = this.groupTemplateFunction(this.headerData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach(function (ele) {
-                groupTemplate.appendChild(ele);
-            });
-        }
-        if ((!this.listViewInstance.isReact || (typeof this.listViewInstance.template == "string" && !args.item.classList.contains("e-list-group-item")) ||
-            (typeof this.listViewInstance.groupTemplate == "string" && args.item.classList.contains("e-list-group-item"))) && !this.listViewInstance.isVue) {
-            args.item.innerHTML = '';
-        }
-        args.item.context = { data: args.curData, nodes: { flatTemplateNodes: [], groupTemplateNodes: [] } };
-        for (var i = 0; i < template.children.length; i++) {
-            this.compileTemplate(template.children[i], args.item, false);
-        }
-        for (var i = 0; i < groupTemplate.children.length; i++) {
-            this.compileTemplate(groupTemplate.children[i], args.item, true);
-        }
-        args.item.context.template = args.curData.isHeader ? template.firstElementChild :
-            groupTemplate.firstElementChild;
-        args.item.context.type = args.curData.isHeader ? 'flatList' : 'groupList';
-        var element = args.curData.isHeader ? groupTemplate : template;
-        if (element.firstElementChild && !this.listViewInstance.isReact && !this.listViewInstance.isVue) {
-            args.item.insertBefore(element.firstElementChild, null);
-        }
-    };
-    Virtualization.prototype.compileTemplate = function (element, item, isHeader) {
-        var _this = this;
-        var subNode = {};
-        subNode.onChange = function (value) {
-            var groupTemplateElements;
-            var templateElements;
-            if (_this.listViewInstance.isVue) {
-                groupTemplateElements = _this.groupTemplateFunction(value);
-                templateElements = _this.templateFunction(value);
-            }
-            else {
-                groupTemplateElements = _this.groupTemplateFunction(value, _this.listViewInstance);
-                templateElements = _this.templateFunction(value, _this.listViewInstance);
-            }
-            if (_this.listViewInstance.template && _this.listViewInstance.isReact) {
-                _this.listViewInstance.renderReactTemplates();
-            }
-            var currentTemplate = templateElements;
-            if (value.isHeader) {
-                currentTemplate = groupTemplateElements;
-            }
-            [].slice.call(currentTemplate).forEach(function (currentElement) {
-                var RemovableClass = element.classList.value.replace('e-checkbox', '');
-                RemovableClass = RemovableClass.replace('e-checkbox-left', '');
-                RemovableClass = RemovableClass.replace('e-checkbox-right', '');
-                removeClass([element], RemovableClass.split(' ').filter(function (css) { return css; }));
-                addClass([element], Array.from(currentElement.classList));
-                for (var i = 0; i < element.attributes.length; i++) {
-                    if (element.attributes[i].name != 'class') {
-                        var newData = currentElement.getAttribute(element.attributes[i].name);
-                        element.setAttribute(element.attributes[i].name, newData);
+                    [].slice.call(nodes).forEach(function (ele) {
+                        div_1.appendChild(ele);
+                    });
+                    if (div_1.children && div_1.children[0]) {
+                        div_1.children[0].classList.add('e-checkbox');
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div_1.children[0].classList.add('e-checkbox-left');
+                        }
+                        else {
+                            div_1.children[0].classList.add('e-checkbox-right');
+                        }
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
+                        }
+                        else {
+                            div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+                        }
+                        while (args.item.lastChild) {
+                            args.item.removeChild(args.item.lastChild);
+                        }
+                        [].slice.call(div_1.children).forEach(function (ele) {
+                            args.item.appendChild(ele);
+                        });
                     }
                 }
-                [].slice.call(element.children).forEach(function (ele) {
-                    if (!ele.classList.contains('e-listview-checkbox') && !(ele.classList.contains('e-checkbox-left') || ele.classList.contains('e-checkbox-right'))) {
-                        ele.remove();
-                    }
-                });
-                [].slice.call(currentElement.children).forEach(function (ele) {
-                    element.appendChild(ele);
-                });
-            });
-        };
-        this.updateContextData(item, subNode, isHeader);
-    };
-    Virtualization.prototype.onChange = function (newData, listElement) {
-        listElement.context.data = newData;
-        // eslint-disable-next-line max-len
-        var groupTemplateNodes = listElement.context.nodes.groupTemplateNodes;
-        // eslint-disable-next-line max-len
-        var flatTemplateNodes = listElement.context.nodes.flatTemplateNodes;
-        // eslint-disable-next-line
-        if (!isNullOrUndefined(newData.isHeader) && newData.isHeader && listElement.context.type === 'groupList') {
-            // eslint-disable-next-line
-            var element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'flatList';
-            for (var i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader && listElement.context.type === 'flatList') {
-            var element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'groupList';
-            for (var i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader) {
-            for (var i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else {
-            for (var i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
             }
         }
     };
-    // eslint-disable-next-line
-    Virtualization.prototype.updateContextData = function (listElement, node, isHeader) {
-        if (isHeader) {
-            listElement.context.nodes.groupTemplateNodes.push(node);
-        }
-        else {
-            listElement.context.nodes.flatTemplateNodes.push(node);
-        }
-    };
     Virtualization.prototype.reRenderUiVirtualization = function () {
         this.wireScrollEvent(true);
         if (this.listViewInstance.contentContainer) {
@@ -989,8 +851,7 @@ var Virtualization = /** @class */ (function () {
         this.listViewInstance.setLocalData();
     };
     Virtualization.prototype.updateUI = function (element, index, targetElement) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        var onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
+        var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -1014,18 +875,22 @@ var Virtualization = /** @class */ (function () {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    Virtualization.prototype.onVueChange = function (newData, listElement, virtualThis) {
+    Virtualization.prototype.onChange = function (newData, listElement, virtualThis) {
         var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
         // eslint-disable-next-line
         [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
+        if (virtualThis.listViewInstance.isReact) {
+            virtualThis.listViewInstance.renderReactTemplates();
+        }
         while (listElement.lastChild) {
             listElement.removeChild(listElement.lastChild);
         }
-        listElement.appendChild(liItem[0].firstChild);
+        [].slice.call(liItem[0].children).forEach(function (ele) {
+            listElement.appendChild(ele);
+        });
     };
     Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {
         // compile given target element with template for new data
-        // eslint-disable-next-line
         var templateCompiler = compile(virtualThis.listViewInstance.template);
         var resultElement = templateCompiler(newData);
         while (listElement.lastChild) {

package/styles/bootstrap4.css

@@ -22,7 +22,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 50px;
-  line-height: 1.5;
+  line-height: 1.6;
   position: relative;
   padding: 12px 20px;
 }
@@ -106,7 +106,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 1.5;
+  line-height: 1.6;
   padding: 8px 16px 8px 16px;
   position: relative;
 }

package/styles/bootstrap5-dark.css

@@ -18,7 +18,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 21px;
+  line-height: 24px;
   position: relative;
 }
 .e-bigger .e-listview .e-text-content,

package/styles/bootstrap5.css

@@ -18,7 +18,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 21px;
+  line-height: 24px;
   position: relative;
 }
 .e-bigger .e-listview .e-text-content,

package/styles/list-view/_bootstrap4-definition.scss

@@ -11,7 +11,7 @@ $listview-background: $content-bg !default;
 $listview-line-color: rgba($black, .13) !default;
 $listview-item-hover-bg: darken($gray-100, 5%) !default;
 $listview-item-height: 40px !default;
-$listview-item-line-height: 1.5 !default;
+$listview-item-line-height: 1.6 !default;
 $listview-item-padding: 8px 16px 8px 16px !default;
 
 $listview-root-border-color: rgba($black, .13);
@@ -62,7 +62,7 @@ $listview-back-padding-right: 10px !default;
 $listview-back-icon-height: 0 !default;
 $listview-back-icon-font-size: 14px !default;
 $listview-touch-item-height: 50px !default;
-$listview-touch-item-line-height: 1.5 !default;
+$listview-touch-item-line-height: 1.6 !default;
 $listview-touch-item-font-size: 16px !default;
 $listview-touch-groupheader-height: 50px !default;
 $listview-touch-groupheader-line-height: 1.5 !default;

package/styles/list-view/_bootstrap5-definition.scss

@@ -29,7 +29,7 @@ $listview-font-size: $text-sm !default;
 $listview-back-padding-right: 8px !default;
 $listview-back-icon-size: 20px !default;
 $listview-touch-item-height: 40px !default;
-$listview-touch-item-line-height: 21px !default;
+$listview-touch-item-line-height: 24px !default;
 $listview-touch-item-size: 24px !default;
 $listview-touch-item-padding: 16px 14px 12px 16px !default;
 $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;

package/styles/list-view/_material-definition.scss

@@ -60,7 +60,7 @@ $listview-back-padding-right: 30px !default;
 $listview-back-icon-height: 1px !default;
 $listview-back-icon-font-size: auto !default;
 $listview-touch-item-height: 48px !default;
-$listview-touch-item-line-height: 45px !default;
+$listview-touch-item-line-height: 42px !default;
 $listview-touch-item-font-size: 15px !default;
 $listview-touch-groupheader-height: 48px !default;
 $listview-touch-groupheader-line-height: 45px !default;

package/styles/list-view/_material3-definition.scss

@@ -4,7 +4,7 @@ $listview-icon-back-margin: 0 !default;
 $listview-icon-back-margin-right: 14px !default;
 $listview-rtl-icon-back-margin: 0 !default;
 $listview-item-height: 40px !default;
-$listview-item-line-height: 20px !default;
+$listview-item-line-height: 22px !default;
 $listview-item-padding: 10px 16px !default;
 $listview-rtl-item-padding: 7px 12px 7px 12px !default;
 $listview-header-padding: 6px 12px !default;

package/styles/list-view/_tailwind-definition.scss

@@ -1,7 +1,7 @@
 //layout
 $listview-icon-margin-right: 2px !default;
 $listview-item-height: 38px !default;
-$listview-item-line-height: 22px !default;
+$listview-item-line-height: 21px !default;
 $listview-item-padding: 8px 9px 8px 12px !default;
 $listview-rtl-item-padding: 8px 12px 8px 9px !default;
 $listview-header-padding: 6px 12px !default;
@@ -30,7 +30,7 @@ $listview-back-padding-right: 8px !default;
 $listview-back-icon-size: 20px !default;
 $listview-back-icon-font-size: $text-base !default;
 $listview-touch-item-height: 48px !default;
-$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-line-height: 23px !default;
 $listview-touch-item-size: 24px !default;
 $listview-touch-item-padding: 12px 14px 12px 16px !default;
 $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;

package/styles/list-view/bootstrap4.css

@@ -22,7 +22,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 50px;
-  line-height: 1.5;
+  line-height: 1.6;
   position: relative;
   padding: 12px 20px;
 }
@@ -106,7 +106,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 1.5;
+  line-height: 1.6;
   padding: 8px 16px 8px 16px;
   position: relative;
 }

package/styles/list-view/bootstrap5-dark.css

@@ -18,7 +18,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 21px;
+  line-height: 24px;
   position: relative;
 }
 .e-bigger .e-listview .e-text-content,

package/styles/list-view/bootstrap5.css

@@ -18,7 +18,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 21px;
+  line-height: 24px;
   position: relative;
 }
 .e-bigger .e-listview .e-text-content,

package/styles/list-view/material.css

@@ -17,7 +17,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 48px;
-  line-height: 45px;
+  line-height: 42px;
   position: relative;
 }
 .e-bigger .e-listview .e-text-content,

package/styles/list-view/material3-dark.css

@@ -137,7 +137,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 20px;
+  line-height: 22px;
   padding: 10px 16px;
   position: relative;
 }

package/styles/list-view/material3.css

@@ -193,7 +193,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 20px;
+  line-height: 22px;
   padding: 10px 16px;
   position: relative;
 }

package/styles/list-view/tailwind-dark.css

@@ -22,7 +22,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 48px;
-  line-height: 24px;
+  line-height: 23px;
   position: relative;
   padding: 12px 14px 12px 16px;
 }
@@ -50,7 +50,7 @@
   font-weight: 500;
   height: 38px;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
   padding: 8px 16px;
 }
 .e-bigger .e-listview .e-list-header .e-text.header,
@@ -181,7 +181,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 38px;
-  line-height: 22px;
+  line-height: 21px;
   padding: 8px 9px 8px 12px;
   position: relative;
 }
@@ -531,7 +531,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
 }
 .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
   color: #fff;

package/styles/list-view/tailwind.css

@@ -22,7 +22,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 48px;
-  line-height: 24px;
+  line-height: 23px;
   position: relative;
   padding: 12px 14px 12px 16px;
 }
@@ -50,7 +50,7 @@
   font-weight: 500;
   height: 38px;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
   padding: 8px 16px;
 }
 .e-bigger .e-listview .e-list-header .e-text.header,
@@ -181,7 +181,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 38px;
-  line-height: 22px;
+  line-height: 21px;
   padding: 8px 9px 8px 12px;
   position: relative;
 }
@@ -531,7 +531,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
 }
 .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
   color: #111827;

package/styles/material.css

@@ -17,7 +17,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 48px;
-  line-height: 45px;
+  line-height: 42px;
   position: relative;
 }
 .e-bigger .e-listview .e-text-content,

package/styles/material3-dark.css

@@ -137,7 +137,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 20px;
+  line-height: 22px;
   padding: 10px 16px;
   position: relative;
 }

package/styles/material3.css

@@ -193,7 +193,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 20px;
+  line-height: 22px;
   padding: 10px 16px;
   position: relative;
 }

package/styles/tailwind-dark.css

@@ -22,7 +22,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 48px;
-  line-height: 24px;
+  line-height: 23px;
   position: relative;
   padding: 12px 14px 12px 16px;
 }
@@ -50,7 +50,7 @@
   font-weight: 500;
   height: 38px;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
   padding: 8px 16px;
 }
 .e-bigger .e-listview .e-list-header .e-text.header,
@@ -181,7 +181,7 @@
 }
 .e-listview:not(.e-list-template) .e-list-item {
   height: 38px;
-  line-height: 22px;
+  line-height: 21px;
   padding: 8px 9px 8px 12px;
   position: relative;
 }
@@ -531,7 +531,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
 }
 .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
   color: #fff;