@syncfusion/ej2-lists 23.2.4 → 24.1.46

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.4
+*  version : 24.1.46
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-lists@*",
-  "_id": "@syncfusion/ej2-lists@23.1.43",
+  "_id": "@syncfusion/ej2-lists@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-ZxZ2s8B0jIlHbLi8qgl0OTos0aGYcIV7SW8DITGgwBWX6Orh+hxs/AnQ0YiqL7zwFtJe+E5oo2cctD0Fj6yi8Q==",
+  "_integrity": "sha512-DU792nwYrUL8BOQa6yRYPxP9L4Cgs1xH9KaX2YvwpdfT+205Eh7DXet/VZpAU9Ec48FZSry+EMfrHe2xKD9GgA==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -35,18 +35,19 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-23.1.43.tgz",
-  "_shasum": "597cc14fc40bb16eb42cc9c91a539e19230c8380",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-24.1.41.tgz",
+  "_shasum": "ab5c523d5315d581d9ae5174016d9e513768470a",
   "_spec": "@syncfusion/ej2-lists@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-data": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.46",
+    "@syncfusion/ej2-buttons": "~24.1.46",
+    "@syncfusion/ej2-data": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.46"
   },
   "deprecated": false,
   "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.",
@@ -86,7 +87,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "23.2.4",
+  "version": "24.1.46",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/list-base.js

@@ -280,18 +280,31 @@ export var ListBase;
                 li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);
                 li.classList.add(cssClass.level + '-' + ariaAttributes.level);
                 li.setAttribute('aria-level', ariaAttributes.level.toString());
-                if (ariaAttributes.groupItemRole == 'presentation' || ariaAttributes.itemRole == 'presentation') {
+                if (ariaAttributes.groupItemRole === 'presentation' || ariaAttributes.itemRole === 'presentation') {
                     li.removeAttribute('aria-level');
                 }
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.tooltip)) {
-                    var tooltipText = SanitizeHtmlHelper.sanitize(fieldData[fields.tooltip]);
+                    var tooltipText = fieldData[fields.tooltip];
+                    if (options && options.enableHtmlSanitizer) {
+                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
+                    }
+                    else {
+                        var tooltipTextElement = createElement('span', { innerHTML: tooltipText });
+                        tooltipText = tooltipTextElement.innerText;
+                        tooltipTextElement = null;
+                    }
                     li.setAttribute('title', tooltipText);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
-                    setAttribute(li, fieldData[fields.htmlAttributes]);
+                    var htmlAttributes = fieldData[fields.htmlAttributes];
+                    // Check if 'class' attribute is present and not an empty string
+                    if (htmlAttributes.hasOwnProperty('class') && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {
+                        delete htmlAttributes['class'];
+                    }
+                    setAttribute(li, htmlAttributes);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {
@@ -509,7 +522,6 @@ export var ListBase;
         var curOpt = extend({}, defaultListBaseOptions, options);
         var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);
         var curEle = element.cloneNode(true);
-        // eslint-disable-next-line
         var jsonAr = [];
         curEle.classList.add('json-parent');
         var childs = curEle.querySelectorAll('.json-parent>li');
@@ -518,7 +530,6 @@ export var ListBase;
             var li = childs[i];
             var anchor = li.querySelector('a');
             var ul = li.querySelector('ul');
-            // eslint-disable-next-line
             var json = {};
             var childNodes = anchor ? anchor.childNodes : li.childNodes;
             var keys = Object.keys(childNodes);
@@ -592,7 +603,6 @@ export var ListBase;
         var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         var curOpt = extend({}, defaultListBaseOptions, options);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
-        // eslint-disable-next-line
         var compiledString = compileTemplate(template);
         var liCollection = [];
         var value;
@@ -641,7 +651,7 @@ export var ListBase;
             else {
                 var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
-                    if (componentInstance && componentInstance.getModuleName() != 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                         // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -699,7 +709,6 @@ export var ListBase;
     function renderGroupTemplate(groupTemplate, groupDataSource, fields, 
     // eslint-disable-next-line
     headerItems, options, componentInstance) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var compiledString = compileTemplate(groupTemplate);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -709,7 +718,7 @@ export var ListBase;
             var headerData = {};
             headerData["" + category] = header.textContent;
             header.innerHTML = '';
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
@@ -745,7 +754,6 @@ export var ListBase;
         // Create expand and collapse node
         if (!!options.expandCollapse && hasChildren && !options.template) {
             element.firstElementChild.classList.add(cssClass.iconWrapper);
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var expandElement = options.expandIconPosition === 'Left' ? prepend : append;
             expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));
         }
@@ -891,9 +899,8 @@ export var ListBase;
             li.setAttribute('data-uid', generateId());
         }
         if (grpLI && options && options.groupTemplate) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.groupTemplate);
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -905,7 +912,6 @@ export var ListBase;
             }
         }
         else if (!grpLI && options && options.template) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
@@ -977,7 +983,6 @@ export var ListBase;
     function generateIcon(createElement, liElement, className, options) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;
         expandElement([createElement('div', {
                 className: 'e-icons ' + curOpt.expandIconClass + ' ' +

package/src/list-view/list-view-model.d.ts

@@ -1,5 +1,5 @@
 import { Virtualization } from './virtualization';import { merge, formatUnit, isNullOrUndefined, append, detach, ModuleDeclaration, extend } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, prepend, closest, remove } from '@syncfusion/ej2-base';import { Component, EventHandler, BaseEventArgs, Property, Complex, Event } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { KeyboardEventArgs, EmitType, compile, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Animation, AnimationOptions, Effect, rippleEffect, Touch, SwipeEventArgs, animationMode } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { createCheckBox } from '@syncfusion/ej2-buttons';import { ListBase, ListBaseOptions, SortOrder, getFieldValues, FieldsMapping } from '../common/list-base';
-import {AnimationSettings,checkBoxPosition,SelectEventArgs} from "./list-view";
+import {AnimationSettings,checkBoxPosition,SelectEventArgs,ScrolledEventArgs} from "./list-view";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -314,4 +314,11 @@ export interface ListViewModel extends ComponentModel{
      */
     actionFailure?: EmitType<MouseEvent>;
 
+    /**
+    * Triggers when scrollbar of the ListView component reaches to the top or bottom.
+    *
+    * @event 'object'
+    */
+    scroll?: EmitType<ScrolledEventArgs>;
+
 }

package/src/list-view/list-view.d.ts

@@ -167,6 +167,7 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
     private enabledItems;
     private disabledItems;
     private isOffline;
+    private previousScrollTop;
     /**
      * The `cssClass` property is used to add a user-preferred class name in the root element of the ListView,
      *  using which we can customize the component (both CSS and functionality customization)
@@ -383,6 +384,12 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
      *
      */
     actionFailure: EmitType<MouseEvent>;
+    /**
+    * Triggers when scrollbar of the ListView component reaches to the top or bottom.
+    *
+    * @event 'object'
+    */
+    scroll: EmitType<ScrolledEventArgs>;
     /**
      * Constructor for creating the widget
      *
@@ -584,6 +591,7 @@ export declare class ListView extends Component<HTMLElement> implements INotifyP
     private findParent;
     protected getModuleName(): string;
     requiredModules(): ModuleDeclaration[];
+    private onListScroll;
     /**
      * Get the properties to be maintained in the persisted state.
      */
@@ -648,6 +656,15 @@ export interface ListSelectedItem {
      */
     parentId?: string[];
 }
+/**
+* An enum type that denotes the ListView scroll direction when it reaches the end.
+* ```props
+* Top:- The scrollbar is moved upwards.
+* Bottom:- The scrollbar is moved downwards.
+ 
+* ```
+*/
+export declare type direction = 'Top' | 'Bottom';
 /**
  * An interface that holds selected item.
  */
@@ -785,6 +802,23 @@ export interface SelectEventArgs extends BaseEventArgs, SelectedItem {
      */
     cancel: boolean;
 }
+/**
+ * An interface that holds scrolled event arguments
+ */
+export interface ScrolledEventArgs {
+    /**
+     * Specifies the direction “Top” or “Bottom” in which the scrolling occurs.
+     */
+    scrollDirection: direction;
+    /**
+     * Specifies the default scroll event arguments.
+     */
+    originalEvent: Event;
+    /**
+     * Specifies the distance from the scrollbar to the top and bottom ends.
+     */
+    distanceY: number;
+}
 /**
  * An interface that holds item created event arguments
  */

package/src/list-view/list-view.js

@@ -314,7 +314,6 @@ var ListView = /** @class */ (function (_super) {
             this.headerEle.appendChild(hedBackButton);
             this.headerEle.appendChild(textEle);
             if (this.headerTemplate) {
-                // eslint-disable-next-line
                 var compiledString = compile(this.headerTemplate);
                 var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
                 // eslint-disable-next-line
@@ -434,7 +433,7 @@ var ListView = /** @class */ (function (_super) {
             itemCreated: this.renderCheckbox.bind(this),
             templateID: "" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY,
             groupTemplateID: "" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY,
-            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            enableHtmlSanitizer: this.enableHtmlSanitizer
         };
         this.initialization();
     };
@@ -476,8 +475,8 @@ var ListView = /** @class */ (function (_super) {
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData_1 = getFieldValues(args.curData, this.listBaseOption.fields);
                 if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
-                    var index = this.selectedId.findIndex(function (e) { return e == fieldData_1[_this.listBaseOption.fields.id].toString(); });
-                    if (index != -1) {
+                    var index = this.selectedId.findIndex(function (e) { return e === fieldData_1[_this.listBaseOption.fields.id].toString(); });
+                    if (index !== -1) {
                         this.checkInternally(args, checkboxElement);
                     }
                 }
@@ -490,7 +489,7 @@ var ListView = /** @class */ (function (_super) {
                 this.checkInternally(args, checkboxElement);
             }
             checkboxElement.setAttribute('aria-checked', frameElement_1.classList.contains(classNames.checked) ? 'true' : 'false');
-            checkboxElement.setAttribute('aria-label', 'checkbox');
+            checkboxElement.setAttribute('aria-label', args.text);
             if (this.checkBoxPosition === 'Left') {
                 checkboxElement.classList.add(classNames.checkboxLeft);
                 args.item.firstElementChild.classList.add(classNames.checkboxLeft);
@@ -687,7 +686,7 @@ var ListView = /** @class */ (function (_super) {
                 }
                 else {
                     this.setCheckboxLI(li, e);
-                    if ((target.nodeName == "INPUT") || (target.nodeName == "TEXTAREA")) {
+                    if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                         target.classList.add('e-focused');
                         this.targetElement = target;
                     }
@@ -695,7 +694,7 @@ var ListView = /** @class */ (function (_super) {
             }
             else {
                 this.setSelectLI(li, e);
-                if ((target.nodeName == "INPUT") || (target.nodeName == "TEXTAREA")) {
+                if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                     target.classList.add('e-focused');
                     this.targetElement = target;
                 }
@@ -957,6 +956,9 @@ var ListView = /** @class */ (function (_super) {
         EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);
         EventHandler.add(this.element, 'focusout', this.focusout, this);
         this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });
+        if (!isNullOrUndefined(this.scroll)) {
+            EventHandler.add(this.element, 'scroll', this.onListScroll, this);
+        }
     };
     ListView.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
@@ -964,6 +966,9 @@ var ListView = /** @class */ (function (_super) {
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
+        if (!isNullOrUndefined(this.scroll)) {
+            EventHandler.remove(this.element, 'scroll', this.onListScroll);
+        }
         this.touchModule.destroy();
         this.touchModule = null;
     };
@@ -1047,7 +1052,6 @@ var ListView = /** @class */ (function (_super) {
         }
         else {
             selectedItem =
-                // eslint-disable-next-line
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
                     // eslint-disable-next-line
@@ -1289,7 +1293,6 @@ var ListView = /** @class */ (function (_super) {
         this.removeElement(this.headerEle);
         this.removeElement(this.ulElement);
         this.removeElement(this.contentContainer);
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -1328,7 +1331,6 @@ var ListView = /** @class */ (function (_super) {
     ListView.prototype.UpdateCurrentUL = function () {
         this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
         if (this.curUL) {
-            // eslint-disable-next-line
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     };
@@ -1343,7 +1345,6 @@ var ListView = /** @class */ (function (_super) {
             if (!ele) {
                 var data = this.curViewDS;
                 ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
-                // eslint-disable-next-line
                 if (this.isReact) {
                     this.renderReactTemplates();
                 }
@@ -1357,7 +1358,6 @@ var ListView = /** @class */ (function (_super) {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
             if (this.selectedItems) {
                 var fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
-                // eslint-disable-next-line
                 this.header((fieldData[this.listBaseOption.fields.text]), true, 'header');
             }
             this.selectedLI = undefined;
@@ -1381,7 +1381,6 @@ var ListView = /** @class */ (function (_super) {
             this.contentContainer = this.createElement('div', { className: classNames.container });
             this.element.appendChild(this.contentContainer);
             this.renderIntoDom(this.ulElement);
-            // eslint-disable-next-line
             if (this.isReact) {
                 this.renderReactTemplates();
             }
@@ -1390,7 +1389,6 @@ var ListView = /** @class */ (function (_super) {
     ListView.prototype.getElementUID = function (obj) {
         var fields = {};
         if (obj instanceof Element) {
-            // eslint-disable-next-line
             fields[this.fields.id] = obj.getAttribute('data-uid');
         }
         else {
@@ -1416,12 +1414,12 @@ var ListView = /** @class */ (function (_super) {
             selector: '.' + classNames.listItem
         });
         this.renderComplete();
+        this.previousScrollTop = this.element.scrollTop;
     };
     /**
      * It is used to destroy the ListView component.
      */
     ListView.prototype.destroy = function () {
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -1463,7 +1461,6 @@ var ListView = /** @class */ (function (_super) {
             toUL = toUL.parentElement;
         }
         var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
-        // eslint-disable-next-line
         var text = fieldData[this.fields.text];
         this.switchView(fromUL, toUL, true);
         this.removeFocus();
@@ -1536,7 +1533,6 @@ var ListView = /** @class */ (function (_super) {
                     if (!this.enableVirtualization && isNullOrUndefined(li)) {
                         var curLi = this.element.querySelectorAll('.' + classNames.listItem);
                         for (var i = 0; i < curLi.length; i++) {
-                            // eslint-disable-next-line
                             if (curLi[i].innerText.trim() === fieldData[this.fields.text]) {
                                 li = curLi[i];
                             }
@@ -1586,7 +1582,6 @@ var ListView = /** @class */ (function (_super) {
      *
      */
     ListView.prototype.getSelectedItems = function () {
-        // eslint-disable-next-line
         var finalValue;
         var isCompleted = false;
         this.selectedId = [];
@@ -1597,7 +1592,6 @@ var ListView = /** @class */ (function (_super) {
             isCompleted = true;
         }
         else if (this.showCheckBox && !isCompleted) {
-            // eslint-disable-next-line
             var liCollection = this.curUL.getElementsByClassName(classNames.selected);
             var liTextCollection = [];
             var liDataCollection = [];
@@ -1617,9 +1611,7 @@ var ListView = /** @class */ (function (_super) {
                         liDataCollection.push(tempData);
                     }
                     if (fieldData) {
-                        // eslint-disable-next-line
                         liTextCollection.push(fieldData[this.listBaseOption.fields.text]);
-                        // eslint-disable-next-line
                         this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     }
                     else {
@@ -1661,7 +1653,6 @@ var ListView = /** @class */ (function (_super) {
                     isCompleted = true;
                 }
                 else {
-                    // eslint-disable-next-line
                     this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     finalValue = {
                         text: fieldData[this.listBaseOption.fields.text], item: liElement,
@@ -1719,7 +1710,6 @@ var ListView = /** @class */ (function (_super) {
                 if (li) {
                     li.classList.add(classNames.disable);
                 }
-                // eslint-disable-next-line
                 resultJSON[this.fields.enabled] = false;
             }
         }
@@ -1755,7 +1745,6 @@ var ListView = /** @class */ (function (_super) {
                 li.style.display = display;
             }
             if (isHide) {
-                // eslint-disable-next-line
                 resultJSON[this.fields.isVisible] = false;
             }
             else {
@@ -1839,7 +1828,6 @@ var ListView = /** @class */ (function (_super) {
         return newDataSource;
     };
     ListView.prototype.addItemInNestedList = function (targetItemData, itemQueue) {
-        // eslint-disable-next-line
         var targetItemId = targetItemData[this.fields.id];
         var targetChildDS = targetItemData[this.fields.child];
         var isAlreadyRenderedUL = this.element.querySelector('[pid=\'' + targetItemId + '\']');
@@ -1883,7 +1871,6 @@ var ListView = /** @class */ (function (_super) {
             this.getLiFromObjOrElement(curViewDS[index + 2]) || null;
         var li = ListBase.createListItemFromJson(this.createElement, [dataSource], this.listBaseOption, null, null, this);
         this.setAttributes(li);
-        // eslint-disable-next-line
         if (this.template && this.isReact) {
             this.renderReactTemplates();
         }
@@ -1916,11 +1903,9 @@ var ListView = /** @class */ (function (_super) {
         var curViewDS = this.curViewDS;
         var fields = obj instanceof Element ? this.getElementUID(obj) : obj;
         var dataSource;
-        // eslint-disable-next-line prefer-const
         dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
             var data_1;
-            // eslint-disable-next-line prefer-const
             data_1 = this.findItemFromDS(dataSource, fields);
             var index = curViewDS.indexOf(data_1);
             var li = this.getLiFromObjOrElement(obj);
@@ -1941,11 +1926,8 @@ var ListView = /** @class */ (function (_super) {
             if (groupLi) {
                 detach(groupLi);
             }
-            // eslint-disable-next-line
             var foundData = (dataSource.length - 1) <= 0
-                ? this.findParent(this.localData, this.fields.id, 
-                // eslint-disable-next-line
-                function (value) { return value === data_1[_this.fields.id]; }, null) : null;
+                ? this.findParent(this.localData, this.fields.id, function (value) { return value === data_1[_this.fields.id]; }, null) : null;
             var dsIndex = dataSource.indexOf(data_1);
             dataSource.splice(dsIndex, 1);
             this.setViewDataSource(listDataSource);
@@ -1988,16 +1970,13 @@ var ListView = /** @class */ (function (_super) {
             }
         }
     };
-    // eslint-disable-next-line
     ListView.prototype.findParent = function (dataSource, id, callback, parent) {
-        // eslint-disable-next-line no-prototype-builtins
         if (dataSource.hasOwnProperty(id) && callback(dataSource[id]) === true) {
             return extend({}, dataSource);
         }
         for (var i = 0; i < Object.keys(dataSource).length; i++) {
             if (dataSource[Object.keys(dataSource)[i]]
                 && typeof dataSource[Object.keys(dataSource)[i]] === 'object') {
-                // eslint-disable-next-line
                 var result = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
@@ -2020,6 +1999,21 @@ var ListView = /** @class */ (function (_super) {
         }
         return modules;
     };
+    ListView.prototype.onListScroll = function (e) {
+        var args = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
+        var currentScrollTop = this.element.scrollTop;
+        if (currentScrollTop > this.previousScrollTop) {
+            args.scrollDirection = "Bottom";
+            args.distanceY = this.element.scrollHeight - this.element.clientHeight - this.element.scrollTop;
+            this.trigger('scroll', args);
+        }
+        else if (this.previousScrollTop > currentScrollTop) {
+            args.scrollDirection = "Top";
+            args.distanceY = this.element.scrollTop;
+            this.trigger('scroll', args);
+        }
+        this.previousScrollTop = currentScrollTop;
+    };
     /**
      * Get the properties to be maintained in the persisted state.
      */
@@ -2100,6 +2094,9 @@ var ListView = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], ListView.prototype, "actionFailure", void 0);
+    __decorate([
+        Event()
+    ], ListView.prototype, "scroll", void 0);
     ListView = __decorate([
         NotifyPropertyChanges
     ], ListView);

package/src/list-view/virtualization.js

@@ -164,7 +164,7 @@ var Virtualization = /** @class */ (function () {
         var _a;
         var startingHeight;
         var curViewDS = this.listViewInstance.curViewDS;
-        this.listItemHeight = select(".e-list-item", this.listViewInstance.element).getBoundingClientRect().height;
+        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 -
@@ -531,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] &&
@@ -795,7 +794,7 @@ var Virtualization = /** @class */ (function () {
         this.refreshItemHeight();
     };
     Virtualization.prototype.createUIItem = function (args) {
-        if (!args.item.classList.contains("e-list-group-item")) {
+        if (!args.item.classList.contains('e-list-group-item')) {
             this.templateData = args.curData.isHeader ? args.curData.items[0] :
                 args.curData;
             if (this.listViewInstance.showCheckBox) {
@@ -852,7 +851,6 @@ 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.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
@@ -893,7 +891,6 @@ var Virtualization = /** @class */ (function () {
     };
     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;