@syncfusion/ej2-lists 25.2.3 → 26.1.35

package/dist/es6/ej2-lists.es2015.js

@@ -1,5 +1,5 @@
-import { Animation, Base, ChildProperty, Complex, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, animationMode, append, attributes, closest, compareElementParent, compile, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isBlazor, isNullOrUndefined, isVisible, merge, prepend, remove, removeClass, rippleEffect, select } from '@syncfusion/ej2-base';
-import { DataManager, Query } from '@syncfusion/ej2-data';
+import { isNullOrUndefined, getValue, extend, prepend, SanitizeHtmlHelper, merge, addClass, isVisible, attributes, append, compile, ChildProperty, Property, Component, detach, removeClass, formatUnit, animationMode, Animation, closest, EventHandler, Touch, remove, rippleEffect, Complex, Event, NotifyPropertyChanges, select, Base, isBlazor, getComponent, getUniqueID, Draggable, compareElementParent } from '@syncfusion/ej2-base';
+import { Query, DataManager } from '@syncfusion/ej2-data';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 
 /* eslint-disable no-inner-declarations */
@@ -89,17 +89,15 @@ var ListBase;
      *
      * @param  {{Object}[]} dataSource - Specifies an array of JSON data.
      *
-     * @param  {ListBaseOptions} options? - Specifies the list options that need to provide.
+     * @param  {ListBaseOptions} [options] - Specifies the list options that need to provide.
      *
-     * @param  {boolean} isSingleLevel? - Specifies the list options that need to provide.
+     * @param  {boolean} [isSingleLevel] - Specifies the list options that need to provide.
      *
-     * @param  {any} componentInstance? - Specifies the list options that need to provide.
+     * @param  {any} [componentInstance] - Specifies the list options that need to provide.
      *
      * @returns  {createElement} createListFromJson - Specifies the list options that need to provide.
      */
-    function createList(createElement, dataSource, 
-    // eslint-disable-next-line
-    options, isSingleLevel, componentInstance) {
+    function createList(createElement, dataSource, options, isSingleLevel, componentInstance) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         const ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
         const type = typeofData(dataSource).typeof;
@@ -118,18 +116,15 @@ var ListBase;
      *
      * @param  {{Object}[]} dataSource - Specifies an array of JSON data.
      *
-     * @param  {ListBaseOptions} options? - Specifies the list options that need to provide.
+     * @param  {boolean} [isSingleLevel] - Specifies the list options that need to provide.
      *
-     * @param  {boolean} isSingleLevel? - Specifies the list options that need to provide.
+     * @param  {ListBaseOptions} [options] - Specifies the list options that need to provide.
      *
-     * @param  {any} componentInstance? - Specifies the list options that need to provide.
+     * @param  {any} [componentInstance] - Specifies the list options that need to provide.
      *
      * @returns  {createElement} generateUL - returns the list options that need to provide.
      */
-    function createListFromArray(createElement, dataSource, 
-    // tslint:disable-next-line
-    // eslint-disable-next-line
-    isSingleLevel, options, componentInstance) {
+    function createListFromArray(createElement, dataSource, isSingleLevel, options, componentInstance) {
         const subChild = createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);
         return generateUL(createElement, subChild, null, options);
     }
@@ -141,17 +136,15 @@ var ListBase;
      *
      * @param  {{Object}[]} dataSource - Specifies an array of JSON data.
      *
-     * @param  {ListBaseOptions} options? - Specifies the list options that need to provide.
+     * @param  {boolean} [isSingleLevel] - Specifies the list options that need to provide.
      *
-     * @param  {boolean} isSingleLevel? - Specifies the list options that need to provide.
+     * @param  {ListBaseOptions} [options] - Specifies the list options that need to provide.
      *
-     * @param  {any} componentInstance? - Specifies the list options that need to provide.
+     * @param  {any} [componentInstance] - Specifies the list options that need to provide.
      *
      * @returns  {HTMLElement[]} subChild - returns the list options that need to provide.
      */
-    function createListItemFromArray(createElement, dataSource, 
-    // eslint-disable-next-line
-    isSingleLevel, options, componentInstance) {
+    function createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance) {
         const subChild = [];
         const curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
@@ -198,19 +191,17 @@ var ListBase;
      *
      * @param  {{Object}[]} dataSource - Specifies an array of JSON data.
      *
-     * @param  {ListBaseOptions} options? - Specifies the list options that need to provide.
+     * @param  {ListBaseOptions} [options] - Specifies the list options that need to provide.
      *
-     * @param  {boolean} isSingleLevel? - Specifies the list options that need to provide.
+     * @param  {number} [level] - Specifies the list options that need to provide.
      *
-     * @param  {number} level? - Specifies the list options that need to provide.
+     * @param  {boolean} [isSingleLevel] - Specifies the list options that need to provide.
      *
-     * @param  {any} componentInstance? - Specifies the list options that need to provide.
+     * @param  {any} [componentInstance] - Specifies the list options that need to provide.
      *
      * @returns  {HTMLElement[]} child - returns the list options that need to provide.
      */
-    function createListItemFromJson(createElement, dataSource, 
-    // eslint-disable-next-line
-    options, level, isSingleLevel, componentInstance) {
+    function createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
         const fields = (componentInstance &&
@@ -226,8 +217,7 @@ var ListBase;
         let li;
         let anchorElement;
         if (dataSource && dataSource.length && !isNullOrUndefined(typeofData(dataSource).item) &&
-            // eslint-disable-next-line no-prototype-builtins
-            !typeofData(dataSource).item.hasOwnProperty(fields.id)) {
+            !Object.prototype.hasOwnProperty.call(typeofData(dataSource).item, fields.id)) {
             id = generateId(); // generate id for drop-down-list option.
         }
         for (let i = 0; i < dataSource.length; i++) {
@@ -249,8 +239,7 @@ var ListBase;
             if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {
                 fieldData = getFieldValues(dataSource[i], fields);
             }
-            // eslint-disable-next-line no-prototype-builtins
-            if (fieldData.hasOwnProperty(fields.id) && !isNullOrUndefined(fieldData[fields.id])) {
+            if (Object.prototype.hasOwnProperty.call(fieldData, fields.id) && !isNullOrUndefined(fieldData[fields.id])) {
                 id = fieldData[fields.id];
             }
             const innerEle = [];
@@ -263,13 +252,11 @@ var ListBase;
                 }
             }
             if (isSingleLevel === true) {
-                // eslint-disable-next-line no-prototype-builtins
-                if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) && !isNullOrUndefined(fieldData[fields.iconCss])) {
+                if (curOpt.showIcon && Object.prototype.hasOwnProperty.call(fieldData, fields.iconCss)
+                    && !isNullOrUndefined(fieldData[fields.iconCss])) {
                     innerEle.push(createElement('span', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] }));
                 }
-                li = generateSingleLevelLI(createElement, curItem, fieldData, fields, curOpt.itemClass, innerEle, 
-                // eslint-disable-next-line no-prototype-builtins
-                (curItem.hasOwnProperty('isHeader') &&
+                li = generateSingleLevelLI(createElement, curItem, fieldData, fields, curOpt.itemClass, innerEle, (Object.prototype.hasOwnProperty.call(curItem, 'isHeader') &&
                     curItem.isHeader) ? true : false, id, i, options);
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 if (curOpt.itemNavigable && checkboxElement.length) {
@@ -284,8 +271,7 @@ var ListBase;
                     li.removeAttribute('aria-level');
                 }
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
-                // eslint-disable-next-line no-prototype-builtins
-                if (fieldData.hasOwnProperty(fields.tooltip)) {
+                if (Object.prototype.hasOwnProperty.call(fieldData, fields.tooltip)) {
                     let tooltipText = fieldData[fields.tooltip];
                     if (options && options.enableHtmlSanitizer) {
                         tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
@@ -297,8 +283,7 @@ var ListBase;
                     }
                     li.setAttribute('title', tooltipText);
                 }
-                // eslint-disable-next-line no-prototype-builtins
-                if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
+                if (Object.prototype.hasOwnProperty.call(fieldData, fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
                     const htmlAttributes = fieldData[fields.htmlAttributes];
                     // Check if 'class' attribute is present and not an empty string
                     if ('class' in htmlAttributes && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {
@@ -306,18 +291,15 @@ var ListBase;
                     }
                     setAttribute(li, htmlAttributes);
                 }
-                // eslint-disable-next-line no-prototype-builtins
-                if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {
+                if (Object.prototype.hasOwnProperty.call(fieldData, fields.enabled) && fieldData[fields.enabled] === false) {
                     li.classList.add(cssClass.disabled);
                 }
-                // eslint-disable-next-line no-prototype-builtins
-                if (fieldData.hasOwnProperty(fields.isVisible) && fieldData[fields.isVisible] === false) {
+                if (Object.prototype.hasOwnProperty.call(fieldData, fields.isVisible) && fieldData[fields.isVisible] === false) {
                     li.style.display = 'none';
                 }
-                // eslint-disable-next-line no-prototype-builtins
-                if (fieldData.hasOwnProperty(fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])
+                if (Object.prototype.hasOwnProperty.call(fieldData, fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])
                     && !curOpt.template) {
-                    const attr = { src: fieldData[fields.imageUrl] };
+                    const attr = { src: fieldData[fields.imageUrl], alt: !isNullOrUndefined(fieldData.name) ? ('Displaying ' + fieldData.name + ' Image') : 'Displaying Image' };
                     merge(attr, fieldData[fields.imageAttributes]);
                     const imageElemnt = createElement('img', { className: cssClass.image, attrs: attr });
                     if (anchorElement) {
@@ -327,8 +309,7 @@ var ListBase;
                         prepend([imageElemnt], li.firstElementChild);
                     }
                 }
-                // eslint-disable-next-line no-prototype-builtins
-                if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) &&
+                if (curOpt.showIcon && Object.prototype.hasOwnProperty.call(fieldData, fields.iconCss) &&
                     !isNullOrUndefined(fieldData[fields.iconCss]) && !curOpt.template) {
                     const iconElement = createElement('div', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] });
                     if (anchorElement) {
@@ -373,19 +354,17 @@ var ListBase;
      *
      * @param  {{Object}[]} dataSource - Specifies an array of JSON data.
      *
-     * @param  {ListBaseOptions} options? - Specifies the list options that need to provide.
+     * @param  {ListBaseOptions} [options] - Specifies the list options that need to provide.
      *
-     * @param  {number} level? - Specifies the list options that need to provide.
+     * @param  {number} [level] - Specifies the list options that need to provide.
      *
-     * @param  {boolean} isSingleLevel? - Specifies the list options that need to provide.
+     * @param  {boolean} [isSingleLevel] - Specifies the list options that need to provide.
      *
-     * @param  {any} componentInstance? - Specifies the list options that need to provide.
+     * @param  {any} [componentInstance] - Specifies the list options that need to provide.
      *
      * @returns  {createElement} generateUL - Specifies the list options that need to provide.
      */
-    function createListFromJson(createElement, dataSource, 
-    // eslint-disable-next-line
-    options, level, isSingleLevel, componentInstance) {
+    function createListFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         const li = createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance);
         return generateUL(createElement, li, curOpt.listClass, options);
@@ -395,8 +374,9 @@ var ListBase;
      * Return the next or previous visible element.
      *
      * @param  {Element[]|NodeList} elementArray - An element array to find next or previous element.
-     * @param  {Element} li - An element to find next or previous after this element.
-     * @param  {boolean} isPrevious? - Specify when the need get previous element from array.
+     * @param  {Element} element - An element to find next or previous after this element.
+     * @param  {boolean} [isPrevious] - Specify when the need get previous element from array.
+     * @returns {Element|undefined} The next or previous visible element, or undefined if the element array is empty.
      */
     function getSiblingLI(elementArray, element, isPrevious) {
         cssClass = getModuleClass(defaultListBaseOptions.moduleName);
@@ -425,6 +405,7 @@ var ListBase;
      *
      * @param  {Element} item - An element to find next or previous after this element.
      * @param  {Element[]} elementArray - An element array to find index of given li.
+     * @returns {number} - The index of the item in the element array, or undefined if either parameter is false.
      */
     function indexOf(item, elementArray) {
         if (!elementArray || !item) {
@@ -442,7 +423,8 @@ var ListBase;
      *
      * @param  {{Object}[]} dataSource - The JSON data which is necessary to process.
      * @param  {FieldsMapping} fields - Fields that are mapped from the data source.
-     * @param  {SortOrder} sortOrder- Specifies final result sort order.
+     * @param  {SortOrder} [sortOrder='None'] - Specifies final result sort order. Defaults to 'None'.
+     * @returns {Object[]} - The grouped data.
      */
     function groupDataSource(dataSource, fields, sortOrder = 'None') {
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
@@ -479,6 +461,7 @@ var ListBase;
      * @param  {SortOrder} sortOrder - Specifies that sort order.
      * @param  {string} sortBy - Specifies sortBy fields.
      * @param  {Query} query - Pass if any existing query.
+     * @returns {Query} - The updated query object with sorting applied.
      */
     function addSorting(sortOrder, sortBy, query = new Query()) {
         if (sortOrder === 'Ascending') {
@@ -503,9 +486,10 @@ var ListBase;
      * @param  {{Object}[]} dataSource - Specifies local JSON data source.
      *
      * @param  {Query} query - Specifies query that need to process.
+     *
+     * @returns {Object[]} - An array of objects representing the retrieved data.
      */
     function getDataSource(dataSource, query) {
-        // eslint-disable-next-line
         return new DataManager(dataSource)
             .executeLocal(query);
     }
@@ -514,7 +498,8 @@ var ListBase;
      * Created JSON data based the UL and LI element
      *
      * @param  {HTMLElement|Element} element - UL element that need to convert as a JSON
-     * @param  {ListBaseOptions} options? - Specifies listbase option for fields.
+     * @param  {ListBaseOptions} [options] - Specifies ListBase option for fields.
+     * @returns {Object[]} - An array of objects representing the JSON data.
      */
     function createJsonFromElement(element, options) {
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -536,21 +521,21 @@ var ListBase;
                     json[fields.text] = childNodes[Number(keys[i])].textContent;
                 }
             }
-            let attributes$$1 = getAllAttributes(li);
-            if (attributes$$1.id) {
-                json[fields.id] = attributes$$1.id;
-                delete attributes$$1.id;
+            let attributes = getAllAttributes(li);
+            if (attributes.id) {
+                json[fields.id] = attributes.id;
+                delete attributes.id;
             }
             else {
                 json[fields.id] = generateId();
             }
-            if (Object.keys(attributes$$1).length) {
-                json[fields.htmlAttributes] = attributes$$1;
+            if (Object.keys(attributes).length) {
+                json[fields.htmlAttributes] = attributes;
             }
             if (anchor) {
-                attributes$$1 = getAllAttributes(anchor);
-                if (Object.keys(attributes$$1).length) {
-                    json[fields.urlAttributes] = attributes$$1;
+                attributes = getAllAttributes(anchor);
+                if (Object.keys(attributes).length) {
+                    json[fields.urlAttributes] = attributes;
                 }
             }
             if (ul) {
@@ -561,6 +546,12 @@ var ListBase;
         return jsonAr;
     }
     ListBase.createJsonFromElement = createJsonFromElement;
+    /**
+     * Determines the type of data in an array of objects, strings, or numbers.
+     *
+     * @param {Object[] | string[] | number[]} data - The array containing objects, strings, or numbers.
+     * @returns {{typeof: (string | null), item: (Object | string | number)}} - An object containing the type of data and the corresponding item.
+     */
     function typeofData(data) {
         let match = { typeof: null, item: null };
         for (let i = 0; i < data.length; i++) {
@@ -570,6 +561,13 @@ var ListBase;
         }
         return match;
     }
+    /**
+     * Sets attributes on an HTML element.
+     *
+     * @param {HTMLElement} element - The HTML element to set attributes on.
+     * @param {Object.<string, string>} elementAttributes - An object containing attribute names and their corresponding values.
+     * @returns {void}
+     */
     function setAttribute(element, elementAttributes) {
         const attr = {};
         merge(attr, elementAttributes);
@@ -579,24 +577,32 @@ var ListBase;
         }
         attributes(element, attr);
     }
+    /**
+     * Retrieves all attributes of an HTML element.
+     *
+     * @param {HTMLElement} element - The HTML element to retrieve attributes from.
+     * @returns {Object.<string, string>} - An object containing attribute names as keys and their corresponding values as values.
+     */
     function getAllAttributes(element) {
-        const attributes$$1 = {};
+        const attributes = {};
         const attr = element.attributes;
         for (let index = 0; index < attr.length; index++) {
-            attributes$$1[attr[index].nodeName] = attr[index].nodeValue;
+            attributes[attr[index].nodeName] = attr[index].nodeValue;
         }
-        return attributes$$1;
+        return attributes;
     }
     /**
      * Created UL element from content template.
      *
+     * @param  {createElementParams} createElement - Specifies an array of JSON data.
      * @param  {string} template - that need to convert and generate li element.
      * @param  {{Object}[]} dataSource - Specifies local JSON data source.
-     * @param  {ListBaseOptions} options? - Specifies listbase option for fields.
+     * @param  {FieldsMapping} [fields] - Specifies fields for mapping the dataSource.
+     * @param  {ListBaseOptions} [options] - Specifies ListBase option for fields.
+     * @param  {any} [componentInstance] - Specifies component instance.
+     * @returns {HTMLElement} - The generated LI element.
      */
-    function renderContentTemplate(createElement, template, dataSource, 
-    // eslint-disable-next-line
-    fields, options, componentInstance) {
+    function renderContentTemplate(createElement, template, dataSource, fields, options, componentInstance) {
         cssClass = getModuleClass(defaultListBaseOptions.moduleName);
         const ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -650,7 +656,6 @@ var ListBase;
                 const currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
                     if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                        // eslint-disable-next-line
                         const compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
                             append(compiledElement, li);
@@ -662,7 +667,6 @@ var ListBase;
                 }
                 else {
                     if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                        // eslint-disable-next-line
                         const compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
                             append(compiledElement, li);
@@ -695,18 +699,23 @@ var ListBase;
     /**
      * Created header items from group template.
      *
-     * @param  {string} template - that need to convert and generate li element.
+     * @param  {string | Function} groupTemplate - that need to convert and generate li element.
      *
-     * @param  {{Object}[]} dataSource - Specifies local JSON data source.
+     * @param {{Object}[]} groupDataSource - Specifies local JSON data source.
      *
      * @param  {FieldsMapping} fields - Specifies fields for mapping the dataSource.
      *
-     * @param  {Element[]} headerItems? - Specifies listbase header items.
+     * @param  {Element[]} headerItems - Specifies ListBase header items.
+     *
+     * @param {ListBaseOptions} [options] - Optional ListBase options.
+     *
+     * @param {*} [componentInstance] - Optional component instance.
+     *
+     * @returns {Element[]} - An array of header elements with the rendered group template content.
      */
+    function renderGroupTemplate(groupTemplate, 
     // tslint:disable-next-line
-    function renderGroupTemplate(groupTemplate, groupDataSource, fields, 
-    // eslint-disable-next-line
-    headerItems, options, componentInstance) {
+    groupDataSource, fields, headerItems, options, componentInstance) {
         const compiledString = compileTemplate(groupTemplate);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -716,7 +725,6 @@ var ListBase;
             headerData[`${category}`] = header.textContent;
             header.innerHTML = '';
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                // eslint-disable-next-line
                 const compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
                     append(compiledElement, header);
@@ -729,12 +737,29 @@ var ListBase;
         return headerItems;
     }
     ListBase.renderGroupTemplate = renderGroupTemplate;
+    /**
+     * Generates a random hexadecimal ID string.
+     *
+     * @returns {string} - The generated ID string.
+     */
     function generateId() {
         return Math.floor((1 + Math.random()) * 0x10000)
             .toString(16)
             .substring(1);
     }
     ListBase.generateId = generateId;
+    /**
+     * Processes the sub-child elements and creates corresponding elements based on the provided field data and options.
+     *
+     * @param {Function} createElement - Function for creating elements.
+     * @param {Object} fieldData - Field data containing sub-child information.
+     * @param {FieldsMapping} fields - Field mappings.
+     * @param {Object[]} ds - The data source array containing sub-child elements.
+     * @param {ListBaseOptions} options - ListBase options.
+     * @param {HTMLElement} element - The parent HTML element to append sub-child elements to.
+     * @param {number} level - The level of the sub-child elements.
+     * @returns {void}
+     */
     function processSubChild(createElement, fieldData, fields, ds, options, element, level) {
         // Get SubList
         const subDS = fieldData[fields.child] || [];
@@ -755,6 +780,21 @@ var ListBase;
             expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));
         }
     }
+    /**
+     * Generates a single-level LI (list item) element based on the provided item and field data.
+     *
+     * @param {Function} createElement - Function for creating elements.
+     * @param {string | Object | number} item - The item data.
+     * @param {Object} fieldData - Field data mapped from the item.
+     * @param {FieldsMapping} [fields] - Field mappings.
+     * @param {string} [className] - Optional class name to add to the created LI element.
+     * @param {HTMLElement[]} [innerElements] - Optional array of inner elements to append to the LI element.
+     * @param {boolean} [grpLI] - Indicates if the LI element is a group item.
+     * @param {string} [id] - The ID of the LI element.
+     * @param {number} [index] - The index of the LI element.
+     * @param {ListBaseOptions} [options] - Optional ListBase options.
+     * @returns {HTMLElement} - The generated LI element.
+     */
     function generateSingleLevelLI(createElement, item, fieldData, fields, className, innerElements, grpLI, id, index, options) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         const ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
@@ -780,8 +820,7 @@ var ListBase;
             id: elementID, attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?
                 { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})
         });
-        // eslint-disable-next-line no-prototype-builtins
-        if (dataSource && fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled].toString() === 'false') {
+        if (dataSource && Object.prototype.hasOwnProperty.call(fieldData, fields.enabled) && fieldData[fields.enabled].toString() === 'false') {
             li.classList.add(cssClass.disabled);
         }
         if (grpLI) {
@@ -790,8 +829,7 @@ var ListBase;
         else {
             li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);
             li.setAttribute('role', 'option');
-            // eslint-disable-next-line no-prototype-builtins
-            if (dataSource && fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
+            if (dataSource && Object.prototype.hasOwnProperty.call(fieldData, fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
                 setAttribute(li, fieldData[fields.htmlAttributes]);
             }
             if (innerElements.length && !curOpt.itemNavigable) {
@@ -810,6 +848,12 @@ var ListBase;
         }
         return li;
     }
+    /**
+     * Returns a set of CSS class names based on the provided module name.
+     *
+     * @param {string} moduleName - The name of the module.
+     * @returns {ClassList} - The CSS class names associated with the module.
+     */
     function getModuleClass(moduleName) {
         let moduleClass;
         // eslint-disable-next-line
@@ -835,11 +879,21 @@ var ListBase;
             navigable: 'e-navigable'
         };
     }
+    /**
+     * Creates an anchor tag (<a>) element based on the provided data source, fields, and text.
+     *
+     * @param {Function} createElement - Function for creating elements.
+     * @param {object} dataSource - The data source containing URL-related fields.
+     * @param {FieldsMapping} fields - Field mappings for the data source.
+     * @param {string} text - The text content of the anchor tag.
+     * @param {HTMLElement[]} innerElements - Optional array of inner elements to append to the anchor tag.
+     * @param {boolean} isFullNavigation - Indicates whether the anchor tag should be for full navigation.
+     * @returns {HTMLElement} The created anchor tag element.
+     */
     function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation) {
         const fieldData = getFieldValues(dataSource, fields);
         const attr = { href: fieldData[fields.url] };
-        // eslint-disable-next-line no-prototype-builtins
-        if (fieldData.hasOwnProperty(fields.urlAttributes) && fieldData[fields.urlAttributes]) {
+        if (Object.prototype.hasOwnProperty.call(fieldData, fields.urlAttributes) && fieldData[fields.urlAttributes]) {
             merge(attr, fieldData[fields.urlAttributes]);
             attr.href = fieldData[fields.url] ? fieldData[fields.url] :
                 fieldData[fields.urlAttributes].href;
@@ -860,11 +914,19 @@ var ListBase;
         setAttribute(anchorTag, attr);
         return anchorTag;
     }
-    // tslint:disable-next-line
-    /* tslint:disable:align */
-    function generateLI(createElement, item, fieldData, 
-    // eslint-disable-next-line
-    fields, className, options, componentInstance) {
+    /**
+     * Generates an LI element based on the provided item and field data.
+     *
+     * @param {Function} createElement - Function for creating elements.
+     * @param {string | Object | number} item - The item data.
+     * @param {Object} fieldData - Field data mapped from the item.
+     * @param {FieldsMapping} fields - Field mappings.
+     * @param {string} [className] - Optional class name to add to the created LI element.
+     * @param {ListBaseOptions} [options] - Optional ListBase options.
+     * @param {*} [componentInstance] - Optional component instance.
+     * @returns {HTMLElement} - The generated LI element.
+     */
+    function generateLI(createElement, item, fieldData, fields, className, options, componentInstance) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         const ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
         let text = item;
@@ -874,10 +936,8 @@ var ListBase;
         if (typeof item !== 'string' && typeof item !== 'number') {
             dataSource = item;
             text = fieldData[fields.text] || '';
-            // tslint:disable-next-line
             uID = (isNullOrUndefined(fieldData['_id'])) ? fieldData[fields.id] : fieldData['_id'];
-            // eslint-disable-next-line no-prototype-builtins
-            grpLI = (item.hasOwnProperty('isHeader') && item.isHeader)
+            grpLI = (Object.prototype.hasOwnProperty.call(item, 'isHeader') && item.isHeader)
                 ? true : false;
         }
         if (options && options.enableHtmlSanitizer) {
@@ -898,7 +958,6 @@ var ListBase;
         if (grpLI && options && options.groupTemplate) {
             const compiledString = compileTemplate(options.groupTemplate);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                // eslint-disable-next-line
                 const compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
                     append(compiledElement, li);
@@ -911,7 +970,6 @@ var ListBase;
         else if (!grpLI && options && options.template) {
             const compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                // eslint-disable-next-line
                 const compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
                     append(compiledElement, li);
@@ -950,11 +1008,15 @@ var ListBase;
     /**
      * Returns UL element based on the given LI element.
      *
+     * @param {Function} createElement - Function for creating elements.
+     *
      * @param  {HTMLElement[]} liElement - Specifies array of LI element.
      *
-     * @param  {string} className? - Specifies class name that need to be added in UL element.
+     * @param  {string} [className] - Specifies class name that need to be added in UL element.
+     *
+     * @param  {ListBaseOptions} [options] - Specifies ListBase options.
      *
-     * @param  {ListBaseOptions} options? - Specifies ListBase options.
+     * @returns {HTMLElement} - The created UL element.
      */
     function generateUL(createElement, liElement, className, options) {
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -971,11 +1033,15 @@ var ListBase;
     /**
      * Returns LI element with additional DIV tag based on the given LI element.
      *
+     * @param {Function} createElement - Function for creating elements.
+     *
      * @param  {liElement} liElement - Specifies LI element.
      *
-     * @param  {string} className? - Specifies class name that need to be added in created DIV element.
+     * @param  {string} [className] - Specifies class name that need to be added in created DIV element.
      *
-     * @param  {ListBaseOptions} options? - Specifies ListBase options.
+     * @param  {ListBaseOptions} [options] - Specifies ListBase options.
+     *
+     * @returns {HTMLElement} - The modified LI element.
      */
     function generateIcon(createElement, liElement, className, options) {
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -992,9 +1058,10 @@ var ListBase;
 /**
  * Used to get dataSource item from complex data using fields.
  *
- * @param {Object} dataSource - Specifies an  JSON or String data.
+ * @param {Object} dataItem - Specifies an  JSON or String data.
  *
  * @param {FieldsMapping} fields - Fields that are mapped from the dataSource.
+ * @returns {Object|string|number} - The retrieved field values.
  */
 function getFieldValues(dataItem, fields) {
     const fieldData = {};
@@ -1014,6 +1081,12 @@ function getFieldValues(dataItem, fields) {
     }
     return fieldData;
 }
+/**
+ * Compiles a template string or function into a compiled function.
+ *
+ * @param {string | Function} template - The template string or function to compile.
+ * @returns {Function | undefined} - The compiled function, or undefined if the input is false.
+ */
 function compileTemplate(template) {
     if (template) {
         try {
@@ -1037,6 +1110,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     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;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // Effect Configuration Effect[] =  [fromViewBackward,fromViewForward,toViewBackward,toviewForward];
 const effectsConfig = {
     'None': [],
@@ -1189,7 +1263,6 @@ let ListView = class ListView extends Component {
                     this.setEnableRTL();
                     break;
                 case 'fields':
-                    // eslint-disable-next-line
                     this.listBaseOption.fields = this.fields.properties;
                     if (this.enableVirtualization) {
                         this.virtualizationModule.reRenderUiVirtualization();
@@ -1253,14 +1326,12 @@ let ListView = class ListView extends Component {
                         this.resetCurrentList();
                     }
                     break;
-                default:
-                    break;
             }
         }
     }
     // Model Changes
     setHTMLAttribute() {
-        if (Object.keys(this.htmlAttributes).length) {
+        if (!isNullOrUndefined(this.htmlAttributes) && Object.keys(this.htmlAttributes).length) {
             attributes(this.element, this.htmlAttributes);
         }
     }
@@ -1318,13 +1389,11 @@ let ListView = class ListView extends Component {
             if (this.headerTemplate) {
                 const compiledString = compile(this.headerTemplate);
                 const headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
-                // eslint-disable-next-line
                 const compiledElement = compiledString({}, this, prop, this.LISTVIEW_HEADERTEMPLATE_ID, null, null, this.headerEle);
                 if (compiledElement) {
                     append(compiledElement, headerTemplateEle);
                 }
                 append([headerTemplateEle], this.headerEle);
-                // eslint-disable-next-line
                 if (this.isReact) {
                     this.renderReactTemplates();
                 }
@@ -1388,8 +1457,7 @@ let ListView = class ListView extends Component {
                 name: (reverse === true ? anim[0] : anim[1]),
                 duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
                 timingFunction: this.animation.easing,
-                // eslint-disable-next-line
-                end: (model) => {
+                end: () => {
                     fromView.style.display = 'none';
                     this.element.style.overflow = overflow;
                     fromView.style.position = fPos;
@@ -1427,7 +1495,6 @@ let ListView = class ListView extends Component {
                 itemRole: 'listitem', listRole: 'list', itemText: '',
                 groupItemRole: 'presentation', wrapperRole: 'presentation'
             },
-            // eslint-disable-next-line
             fields: (this.fields.properties),
             sortOrder: this.sortOrder,
             showIcon: this.showIcon,
@@ -1461,10 +1528,8 @@ let ListView = class ListView extends Component {
             this.isNestedList = true;
         }
         if (this.showCheckBox && args.item.classList.contains(classNames.listItem)) {
-            let checkboxElement;
             let fieldData;
-            // eslint-disable-next-line prefer-const
-            checkboxElement = createCheckBox(this.createElement, false, {
+            const checkboxElement = createCheckBox(this.createElement, false, {
                 checked: false, enableRtl: this.enableRtl,
                 cssClass: classNames.listviewCheckbox
             });
@@ -1601,7 +1666,6 @@ let ListView = class ListView extends Component {
             for (let i = 0; i < liCollection.length; i++) {
                 const element = liCollection[i];
                 args.item = element;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 args.curData = this.getItemData(element);
                 if (element.querySelector('.' + classNames.checkboxWrapper)) {
                     this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
@@ -1716,8 +1780,7 @@ let ListView = class ListView extends Component {
         const curLi = closest(e.target.parentNode, '.' + classNames.listItem);
         this.setHoverLI(curLi);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    leaveHandler(e) {
+    leaveHandler() {
         this.removeHover();
     }
     homeKeyHandler(e, end) {
@@ -1970,7 +2033,8 @@ let ListView = class ListView extends Component {
         if (!isNullOrUndefined(this.scroll)) {
             EventHandler.remove(this.element, 'scroll', this.onListScroll);
         }
-        this.touchModule.destroy();
+        if (this.touchModule)
+            this.touchModule.destroy();
         this.touchModule = null;
     }
     removeFocus() {
@@ -2053,7 +2117,6 @@ let ListView = class ListView extends Component {
             selectedItem =
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
-                    // eslint-disable-next-line
                     data: data
                 };
         }
@@ -2071,7 +2134,6 @@ let ListView = class ListView extends Component {
     }
     setSelectedItemData(li) {
         const data = this.getItemData(li);
-        // eslint-disable-next-line
         const fieldData = getFieldValues(data, this.listBaseOption.fields);
         if (!isNullOrUndefined(data) && ((typeof this.dataSource[0] === 'string') ||
             (typeof this.dataSource[0] === 'number'))) {
@@ -2084,9 +2146,7 @@ let ListView = class ListView extends Component {
         else {
             this.selectedItems = {
                 item: li,
-                // eslint-disable-next-line
                 text: fieldData && fieldData[this.listBaseOption.fields.text],
-                // eslint-disable-next-line
                 data: data
             };
         }
@@ -2129,7 +2189,6 @@ let ListView = class ListView extends Component {
             let ds = this.localData;
             for (const key of levelKeys) {
                 const field = {};
-                // eslint-disable-next-line
                 field[this.fields.id] = key;
                 this.curDSJSON = this.findItemFromDS(ds, field);
                 const fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
@@ -2156,9 +2215,7 @@ let ListView = class ListView extends Component {
         let resultJSON;
         if (dataSource && dataSource.length && fields) {
             dataSource.some((data) => {
-                const fieldData = 
-                // eslint-disable-next-line
-                getFieldValues(data, this.listBaseOption.fields);
+                const fieldData = getFieldValues(data, this.listBaseOption.fields);
                 //(!(fid) || id === fid) && (!(ftext) || text === ftext) && (!!fid || !!ftext)
                 if ((fields[this.fields.id] || fields[this.fields.text]) &&
                     (!fields[this.fields.id] || (!isNullOrUndefined(fieldData[this.fields.id]) &&
@@ -2172,13 +2229,12 @@ let ListView = class ListView extends Component {
                 else if (!isNullOrUndefined(fields[this.fields.id]) && isNullOrUndefined(fieldData[this.fields.id])) {
                     const li = this.element.querySelector('[data-uid="'
                         + fields[this.fields.id] + '"]');
-                    // eslint-disable-next-line
                     if (li && li.innerText.trim() === fieldData[this.fields.text]) {
                         resultJSON = data;
                     }
-                    // eslint-disable-next-line
                 }
-                else if (fieldData.hasOwnProperty(this.fields.child) && fieldData[this.fields.child].length) {
+                else if (Object.prototype.hasOwnProperty.call(fieldData, this.fields.child) &&
+                    fieldData[this.fields.child].length) {
                     resultJSON = this.findItemFromDS(fieldData[this.fields.child], fields, parent);
                 }
                 return !!resultJSON;
@@ -2193,7 +2249,6 @@ let ListView = class ListView extends Component {
         const columns = [];
         const query = (this.query ? this.query : new Query());
         if (!this.query) {
-            // eslint-disable-next-line
             for (const column of Object.keys(this.fields.properties)) {
                 if (column !== 'tableName' && !!(this.fields[`${column}`]) &&
                     this.fields[`${column}`] !==
@@ -2203,16 +2258,14 @@ let ListView = class ListView extends Component {
                 }
             }
             query.select(columns);
-            // eslint-disable-next-line
-            if (this.fields.properties.hasOwnProperty('tableName')) {
+            if (Object.prototype.hasOwnProperty.call(this.fields.properties, 'tableName')) {
                 query.from(this.fields.tableName);
             }
         }
         return query;
     }
     setViewDataSource(dataSource = this.localData) {
-        // eslint-disable-next-line
-        let fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
+        const fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
         const query = ListBase.addSorting(this.sortOrder, fieldValue);
         if (dataSource && this.fields.groupBy) {
             if (this.sortOrder !== 'None') {
@@ -2249,15 +2302,12 @@ let ListView = class ListView extends Component {
     }
     setLocalData() {
         this.trigger('actionBegin');
-        // eslint-disable-next-line
-        const listViewComponent = this;
         if (this.dataSource instanceof DataManager) {
             if (this.dataSource.ready) {
                 this.dataSource.ready.then((e) => {
-                    /* eslint-disable */
                     this.isOffline = this.dataSource.dataSource.offline;
                     if (this.dataSource instanceof DataManager && this.isOffline) {
-                        this.renderRemoteLists(e, listViewComponent);
+                        this.renderRemoteLists(e, this);
                     }
                 }).catch((e) => {
                     this.triggerActionFailure(e);
@@ -2265,7 +2315,7 @@ let ListView = class ListView extends Component {
             }
             else {
                 this.dataSource.executeQuery(this.getQuery()).then((e) => {
-                    this.renderRemoteLists(e, listViewComponent);
+                    this.renderRemoteLists(e, this);
                 }).catch((e) => {
                     this.triggerActionFailure(e);
                 });
@@ -2309,7 +2359,7 @@ let ListView = class ListView extends Component {
     }
     setAttributes(liElements) {
         for (let i = 0; i < liElements.length; i++) {
-            const element = liElements[i];
+            const element = liElements[parseInt(i.toString(), 10)];
             if (element.classList.contains('e-list-item')) {
                 element.setAttribute('id', this.element.id + '_' + element.getAttribute('data-uid'));
                 element.setAttribute('tabindex', '-1');
@@ -2323,15 +2373,6 @@ let ListView = class ListView extends Component {
         this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         this.setAttributes(this.liCollection);
     }
-    exceptionEvent(e) {
-        this.trigger('actionFailure', e);
-    }
-    UpdateCurrentUL() {
-        this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
-        if (this.curUL) {
-            this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
-        }
-    }
     renderSubList(li) {
         this.liElement = li;
         const uID = li.getAttribute('data-uid');
@@ -2423,7 +2464,7 @@ let ListView = class ListView extends Component {
         }
         this.unWireEvents();
         const classAr = [classNames.root, classNames.disable, 'e-rtl',
-            'e-has-header', 'e-lib'].concat(this.cssClass.split(' ').filter((css) => css));
+            'e-has-header', 'e-lib'].concat(this.cssClass ? this.cssClass.split(' ').filter((css) => css) : []);
         removeClass([this.element], classAr);
         this.element.removeAttribute('role');
         this.element.removeAttribute('tabindex');
@@ -2520,8 +2561,8 @@ let ListView = class ListView extends Component {
                 if (obj instanceof Element) {
                     const uid = obj.getAttribute('data-uid').toString();
                     for (let i = 0; i < this.liCollection.length; i++) {
-                        if (this.liCollection[i].getAttribute('data-uid').toString() === uid) {
-                            li = this.liCollection[i];
+                        if (this.liCollection[parseInt(i.toString(), 10)].getAttribute('data-uid').toString() === uid) {
+                            li = this.liCollection[parseInt(i.toString(), 10)];
                             break;
                         }
                     }
@@ -2547,8 +2588,9 @@ let ListView = class ListView extends Component {
                     if (!this.enableVirtualization && isNullOrUndefined(li)) {
                         const curLi = this.element.querySelectorAll('.' + classNames.listItem);
                         for (let i = 0; i < curLi.length; i++) {
-                            if (curLi[i].innerText.trim() === fieldData[this.fields.text]) {
-                                li = curLi[i];
+                            if (curLi[parseInt(i.toString(), 10)].innerText.trim() ===
+                                fieldData[this.fields.text]) {
+                                li = curLi[parseInt(i.toString(), 10)];
                             }
                         }
                     }
@@ -2566,8 +2608,8 @@ let ListView = class ListView extends Component {
     selectMultipleItems(item) {
         if (!isNullOrUndefined(item)) {
             for (let i = 0; i < item.length; i++) {
-                if (!isNullOrUndefined(item[i])) {
-                    this.selectItem(item[i]);
+                if (!isNullOrUndefined(item[parseInt(i.toString(), 10)])) {
+                    this.selectItem(item[parseInt(i.toString(), 10)]);
                 }
             }
         }
@@ -2576,7 +2618,7 @@ let ListView = class ListView extends Component {
         const parentId = [];
         if (this.isNestedList) {
             for (let i = this.curDSLevel.length - 1; i >= 0; i--) {
-                parentId.push(this.curDSLevel[i]);
+                parentId.push(this.curDSLevel[parseInt(i.toString(), 10)]);
             }
         }
         return parentId;
@@ -2585,7 +2627,7 @@ let ListView = class ListView extends Component {
         this.selectedId = [];
         const liCollection = this.curUL.getElementsByClassName(classNames.selected);
         for (let i = 0; i < liCollection.length; i++) {
-            const tempData = this.getItemData(liCollection[i]);
+            const tempData = this.getItemData(liCollection[parseInt(i.toString(), 10)]);
             if (!isNullOrUndefined(tempData) && tempData[this.listBaseOption.fields.id]) {
                 this.selectedId.push(tempData[this.listBaseOption.fields.id]);
             }
@@ -2613,10 +2655,10 @@ let ListView = class ListView extends Component {
             const dataParent = [];
             for (let i = 0; i < liCollection.length; i++) {
                 if (typeof dataSource[0] === 'string' || typeof dataSource[0] === 'number') {
-                    liTextCollection.push(liCollection[i].innerText.trim());
+                    liTextCollection.push(liCollection[parseInt(i.toString(), 10)].innerText.trim());
                 }
                 else {
-                    const tempData = this.getItemData(liCollection[i]);
+                    const tempData = this.getItemData(liCollection[parseInt(i.toString(), 10)]);
                     const fieldData = getFieldValues(tempData, this.listBaseOption.fields);
                     if (this.isNestedList) {
                         dataParent.push({ data: tempData, parentId: this.getParentId() });
@@ -2802,7 +2844,7 @@ let ListView = class ListView extends Component {
                 // check for whether target is nested level or top level in list
                 if (ds instanceof Array) {
                     for (let i = 0; i < data.length; i++) {
-                        dataSource = this.addItemAtIndex(index, dataSource, data[i]);
+                        dataSource = this.addItemAtIndex(index, dataSource, data[parseInt(i.toString(), 10)]);
                         this.setViewDataSource(dataSource);
                         // since it is top level target, get the content container's first child
                         // as it is always the top level UL
@@ -2812,7 +2854,7 @@ let ListView = class ListView extends Component {
                         // check for whether the list was previously empty or not, if it is
                         // proceed to call initial render
                         if (this.contentContainer && targetUL) {
-                            this.addItemIntoDom(data[i], targetUL, this.curViewDS);
+                            this.addItemIntoDom(data[parseInt(i.toString(), 10)], targetUL, this.curViewDS);
                         }
                         else {
                             this.reRender();
@@ -2831,7 +2873,8 @@ let ListView = class ListView extends Component {
         }
     }
     addItemAtIndex(index, newDataSource, itemData) {
-        let isIndexValid = !(isNullOrUndefined(index)) && index >= 0 && index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);
+        const isIndexValid = !(isNullOrUndefined(index)) && index >= 0 &&
+            index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);
         if (isIndexValid) {
             newDataSource.splice(index, 0, itemData);
         }
@@ -2852,20 +2895,20 @@ let ListView = class ListView extends Component {
                 : null;
         const targetDS = isAlreadyRenderedUL ? targetChildDS : [targetItemData];
         const isTargetEmptyChild = targetLi ? !targetLi.classList.contains(classNames.hasChild) : false;
+        // if li element is already rendered, that element needs to be refreshed so that
+        // it becomes child viewable due to new child items are added now
         if (isTargetEmptyChild) {
             const targetRefreshedElement = ListBase.createListItemFromJson(this.createElement, targetDS, this.listBaseOption, null, null, this);
             this.setAttributes(targetRefreshedElement);
             targetUL.insertBefore(targetRefreshedElement[0], targetLi);
             detach(targetLi);
-            
         }
         // if it is already rendered element, we need to create and append new elements
         if (isAlreadyRenderedUL && itemQueue) {
             for (let i = 0; i < itemQueue.length; i++) {
-                targetDS.push(itemQueue[i]);
-                this.addItemIntoDom(itemQueue[i], targetUL, targetDS);
+                targetDS.push(itemQueue[parseInt(i.toString(), 10)]);
+                this.addItemIntoDom(itemQueue[parseInt(i.toString(), 10)], targetUL, targetDS);
             }
-            
         }
     }
     addItemIntoDom(currentItem, targetUL, curViewDS) {
@@ -2885,7 +2928,7 @@ let ListView = class ListView extends Component {
             this.renderReactTemplates();
         }
         if (this.fields.groupBy && curViewDS[index + 1] && curViewDS[index + 1].isHeader) {
-            let targetEle = this.getLiFromObjOrElement(curViewDS[index - 1]);
+            const targetEle = this.getLiFromObjOrElement(curViewDS[index - 1]);
             if (targetEle) {
                 target = targetEle.nextElementSibling;
             }
@@ -2911,11 +2954,9 @@ let ListView = class ListView extends Component {
     removeItemFromList(obj, listDataSource) {
         const curViewDS = this.curViewDS;
         const fields = obj instanceof Element ? this.getElementUID(obj) : obj;
-        let dataSource;
-        dataSource = this.findItemFromDS(listDataSource, fields, true);
+        const dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
-            let data;
-            data = this.findItemFromDS(dataSource, fields);
+            const data = this.findItemFromDS(dataSource, fields);
             const index = curViewDS.indexOf(data);
             const li = this.getLiFromObjOrElement(obj);
             let groupLi;
@@ -2975,18 +3016,18 @@ let ListView = class ListView extends Component {
     removeMultipleItems(item) {
         if (item.length) {
             for (let i = 0; i < item.length; i++) {
-                this.removeItem(item[i]);
+                this.removeItem(item[parseInt(i.toString(), 10)]);
             }
         }
     }
     findParent(dataSource, id, callback, parent) {
-        if (dataSource.hasOwnProperty(id) && callback(dataSource[id]) === true) {
+        if (Object.prototype.hasOwnProperty.call(dataSource, id) && callback(dataSource[id]) === true) {
             return extend({}, dataSource);
         }
         for (let i = 0; i < Object.keys(dataSource).length; i++) {
-            if (dataSource[Object.keys(dataSource)[i]]
-                && typeof dataSource[Object.keys(dataSource)[i]] === 'object') {
-                const result = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
+            if (dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]]
+                && typeof dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]] === 'object') {
+                const result = this.findParent(dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
                         result.parent = parent;
@@ -3009,15 +3050,15 @@ let ListView = class ListView extends Component {
         return modules;
     }
     onListScroll(e) {
-        let args = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
-        let currentScrollTop = this.element.scrollTop;
+        const args = { originalEvent: e, scrollDirection: 'Bottom', distanceY: this.element.scrollHeight - this.element.scrollTop };
+        const currentScrollTop = this.element.scrollTop;
         if (currentScrollTop > this.previousScrollTop) {
-            args.scrollDirection = "Bottom";
+            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.scrollDirection = 'Top';
             args.distanceY = this.element.scrollTop;
             this.trigger('scroll', args);
         }
@@ -3143,9 +3184,7 @@ class Virtualization {
         this.wireScrollEvent(false);
         const curViewDS = this.listViewInstance.curViewDS;
         const firstDs = curViewDS.slice(0, 1);
-        this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(
-        // eslint-disable-next-line
-        this.listViewInstance.createElement, firstDs, this.listViewInstance.listBaseOption, null, this.listViewInstance);
+        this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(this.listViewInstance.createElement, firstDs, this.listViewInstance.listBaseOption, null, this.listViewInstance);
         this.listViewInstance.contentContainer = this.listViewInstance.createElement('div', { className: classNames.container });
         this.listViewInstance.element.appendChild(this.listViewInstance.contentContainer);
         this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);
@@ -3155,9 +3194,7 @@ class Virtualization {
         this.uiFirstIndex = 0;
         this.uiLastIndex = this.domItemCount - 1;
         const otherDs = curViewDS.slice(1, this.domItemCount);
-        const listItems = ListBase.createListItemFromJson(
-        // eslint-disable-next-line
-        this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
+        const listItems = ListBase.createListItemFromJson(this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
         append(listItems, this.listViewInstance.ulElement);
         this.listViewInstance.liCollection = this.listViewInstance.curUL.querySelectorAll('li');
         this.topElement = this.listViewInstance.createElement('div');
@@ -3189,31 +3226,9 @@ class Virtualization {
             }
             else {
                 EventHandler.remove(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll);
-                EventHandler.remove(this.listViewInstance.element, 'scroll', this.updateUlContainer);
             }
         }
     }
-    updateUlContainer(e) {
-        let listDiff;
-        const virtualElementContainer = this.listViewInstance.ulElement.querySelector('.' + classNames.virtualElementContainer);
-        if (isNullOrUndefined(this.listViewInstance.liElementHeight)) {
-            this.listViewInstance.updateLiElementHeight();
-        }
-        if (this.listViewInstance.isWindow) {
-            // eslint-disable-next-line
-            listDiff = Math.round(e.target.documentElement.scrollTop / this.listViewInstance.liElementHeight) - 2;
-        }
-        else {
-            // eslint-disable-next-line
-            listDiff = Math.round(e.target.scrollTop / this.listViewInstance.liElementHeight) - 2;
-        }
-        if (((listDiff - 1) * this.listViewInstance.liElementHeight) < 0) {
-            virtualElementContainer.style.top = '0px';
-        }
-        else {
-            virtualElementContainer.style.top = (listDiff) * this.listViewInstance.liElementHeight + 'px';
-        }
-    }
     ValidateItemCount(dataSourceLength) {
         const height = parseFloat(formatUnit(this.listViewInstance.height));
         let itemCount;
@@ -3222,7 +3237,6 @@ class Virtualization {
         }
         else {
             if (typeof this.listViewInstance.height === 'string' && this.listViewInstance.height.indexOf('%') !== -1) {
-                // eslint-disable-next-line max-len
                 itemCount = Math.round((this.listViewInstance.element.getBoundingClientRect().height / this.listItemHeight) * listElementCount);
             }
             else {
@@ -3241,10 +3255,8 @@ class Virtualization {
             if (this.listViewInstance.showCheckBox && data[i][this.listViewInstance.fields.isChecked]) {
                 this.uiIndices.activeIndices.push(i);
             }
-            // eslint-disable-next-line
-            if (!isNullOrUndefined(data[i][this.listViewInstance.fields.enabled]) &&
+            if (!isNullOrUndefined(data[parseInt(i.toString(), 10)][this.listViewInstance.fields.enabled]) &&
                 !data[i][this.listViewInstance.fields.enabled]) {
-                // eslint-disable-next-line
                 (this.uiIndices.disabledItemIndices.push(i));
             }
         }
@@ -3269,7 +3281,7 @@ class Virtualization {
             (pageYOffset - startingHeight)) : ((this.listViewInstance.element.scrollTop - startingHeight) <= 0) ? 0 :
             (this.listViewInstance.element.scrollTop - startingHeight);
     }
-    onVirtualUiScroll(e) {
+    onVirtualUiScroll() {
         let startingHeight;
         const curViewDS = this.listViewInstance.curViewDS;
         this.listItemHeight = select('.e-list-item', this.listViewInstance.element).getBoundingClientRect().height;
@@ -3343,7 +3355,6 @@ class Virtualization {
         }
     }
     updateUiContent(element, index) {
-        // eslint-disable-next-line
         const curViewDs = this.listViewInstance.curViewDS;
         if (typeof this.listViewInstance.dataSource[0] === 'string' ||
             typeof this.listViewInstance.dataSource[0] === 'number') {
@@ -3352,13 +3363,10 @@ class Virtualization {
                 this.listViewInstance.curViewDS[index].toString();
         }
         else {
-            // eslint-disable-next-line
-            element.dataset.uid = (curViewDs[index][this.listViewInstance.fields.id]) ?
-                // eslint-disable-next-line
-                (curViewDs[index][this.listViewInstance.fields.id]) : ListBase.generateId();
+            element.dataset.uid = (curViewDs[parseInt(index.toString(), 10)][this.listViewInstance.fields.id]) ?
+                (curViewDs[parseInt(index.toString(), 10)][this.listViewInstance.fields.id]) : ListBase.generateId();
             element.getElementsByClassName(classNames.listItemText)[0].innerHTML =
-                // eslint-disable-next-line
-                (curViewDs[index][this.listViewInstance.fields.text]);
+                (curViewDs[parseInt(index.toString(), 10)][this.listViewInstance.fields.text]);
         }
         if (this.listViewInstance.showIcon) {
             if (element.querySelector('.' + classNames.listIcon)) {
@@ -3460,9 +3468,7 @@ class Virtualization {
         if (!isNullOrUndefined(fields)) {
             ds.some((data, index) => {
                 if ((fields[this.listViewInstance.fields.id] &&
-                    // eslint-disable-next-line
                     fields[this.listViewInstance.fields.id]
-                        // eslint-disable-next-line
                         === (data[this.listViewInstance.fields.id] && data[this.listViewInstance.fields.id]) || fields === data)) {
                     resultJSON.index = index;
                     resultJSON.data = data;
@@ -3489,7 +3495,6 @@ class Virtualization {
                     }
                     return {
                         text: dataCollection,
-                        // eslint-disable-next-line
                         data: dataCollection,
                         index: this.uiIndices.activeIndices.map((index) => this.listViewInstance.dataSource.indexOf(curViewDS[index]))
                     };
@@ -3509,26 +3514,21 @@ class Virtualization {
                     const indexArray = this.uiIndices.activeIndices;
                     for (let i = 0; i < indexArray.length; i++) {
                         textCollection.push(curViewDS[indexArray[i]][`${text}`]);
-                        // eslint-disable-next-line
-                        dataCollection.push(curViewDS[indexArray[i]]);
+                        dataCollection.push(curViewDS[indexArray[parseInt(i.toString(), 10)]]);
                     }
-                    // eslint-disable-next-line
                     const dataSource = this.listViewInstance.dataSource instanceof DataManager
                         ? curViewDS : this.listViewInstance.dataSource;
                     return {
                         text: textCollection,
-                        // eslint-disable-next-line
                         data: dataCollection,
                         index: this.uiIndices.activeIndices.map((index) => dataSource.indexOf(curViewDS[index]))
                     };
                 }
                 else {
-                    // eslint-disable-next-line
                     const dataSource = this.listViewInstance.dataSource instanceof DataManager
                         ? curViewDS : this.listViewInstance.dataSource;
                     return {
                         text: curViewDS[this.activeIndex][this.listViewInstance.fields.text],
-                        // eslint-disable-next-line
                         data: curViewDS[this.activeIndex],
                         index: dataSource.indexOf(curViewDS[this.activeIndex])
                     };
@@ -3540,7 +3540,6 @@ class Virtualization {
         }
     }
     selectItem(obj) {
-        // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             const isSelected = this.activeIndex === resutJSON.index;
@@ -3568,7 +3567,6 @@ class Virtualization {
                 }
             }
             else {
-                // eslint-disable-next-line
                 let eventArgs;
                 if (typeof this.listViewInstance.dataSource[0] === 'string' ||
                     typeof this.listViewInstance.dataSource[0] === 'number') {
@@ -3602,28 +3600,24 @@ class Virtualization {
         }
     }
     enableItem(obj) {
-        // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
         }
     }
     disableItem(obj) {
-        // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {
             this.uiIndices.disabledItemIndices.push(resutJSON.index);
         }
     }
     showItem(obj) {
-        // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
         }
     }
     hideItem(obj) {
-        // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {
             this.uiIndices.hiddenItemIndices.push(resutJSON.index);
@@ -3632,7 +3626,6 @@ class Virtualization {
     removeItem(obj) {
         let dataSource;
         const curViewDS = this.listViewInstance.curViewDS;
-        // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
@@ -3853,7 +3846,6 @@ class Virtualization {
                 }
             }
             else {
-                // eslint-disable-next-line
                 const index = this.listViewInstance.curViewDS.indexOf(currentItem);
                 // virtually new add list item based on the scollbar position
                 this.addUiItem(index);
@@ -3868,9 +3860,7 @@ class Virtualization {
     createAndInjectNewItem(itemData, index) {
         // generate li item for given datasource
         let target;
-        const li = ListBase.createListItemFromJson(this.listViewInstance.createElement, 
-        // eslint-disable-next-line
-        [itemData], this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
+        const li = ListBase.createListItemFromJson(this.listViewInstance.createElement, [itemData], this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
         // check for target element whether to insert before last item or group item
         if ((Object.keys(this.listViewInstance.curViewDS).length - 1) === index) {
             target = this.listViewInstance.curUL.lastElementChild;
@@ -3903,7 +3893,6 @@ class Virtualization {
             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))) {
@@ -3959,9 +3948,7 @@ class Virtualization {
         const onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             const curViewDS = this.listViewInstance.curViewDS[index];
-            // eslint-disable-next-line
             element.dataset.uid = (curViewDS[this.listViewInstance.fields.id]) ?
-                // eslint-disable-next-line
                 (curViewDS[this.listViewInstance.fields.id]) : ListBase.generateId();
             onChange(curViewDS, element, this);
         }
@@ -3982,9 +3969,7 @@ class Virtualization {
      * @returns {void}
      */
     onChange(newData, listElement, virtualThis) {
-        const liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
-        // eslint-disable-next-line
-        [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
+        const liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
         if (virtualThis.listViewInstance.isReact) {
             virtualThis.listViewInstance.renderReactTemplates();
         }
@@ -4014,14 +3999,6 @@ class Virtualization {
     }
 }
 
-/**
- * Listview Component
- */
-
-/**
- * Listview Component
- */
-
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -4029,6 +4006,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Sortable_1;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Sortable Module provides support to enable sortable functionality in Dom Elements.
  * ```html
@@ -4049,8 +4027,7 @@ let Sortable = Sortable_1 = class Sortable extends Base {
     constructor(element, options) {
         super(options, element);
         this.getHelper = (e) => {
-            // eslint-disable-next-line prefer-const
-            let target = this.getSortableElement(e.sender.target);
+            const target = this.getSortableElement(e.sender.target);
             if (!this.isValidTarget(target, this)) {
                 return false;
             }
@@ -4067,7 +4044,6 @@ let Sortable = Sortable_1 = class Sortable extends Base {
             document.body.appendChild(element);
             return element;
         };
-        // eslint-disable-next-line
         this.onDrag = (e) => {
             if (!e.target) {
                 return;
@@ -4145,7 +4121,6 @@ let Sortable = Sortable_1 = class Sortable extends Base {
                 });
             }
         };
-        // eslint-disable-next-line
         this.onDragStart = (e) => {
             this.target = this.getSortableElement(e.target);
             let cancelDrag = false;
@@ -4172,11 +4147,10 @@ let Sortable = Sortable_1 = class Sortable extends Base {
                 this.trigger('dragStart', { event: e.event, element: this.element, target: this.target });
             }
         };
-        // eslint-disable-next-line
         this.onDragStop = (e) => {
             let dropInst = this.getSortableInstance(this.curTarget);
-            let prevIdx;
             let curIdx;
+            let prevIdx;
             let handled;
             prevIdx = this.getIndex(this.target);
             const isPlaceHolderPresent = this.isPlaceHolderPresent(dropInst);
@@ -4207,12 +4181,17 @@ let Sortable = Sortable_1 = class Sortable extends Base {
                 });
             }
             dropInst = this.getSortableInstance(e.target);
-            // eslint-disable-next-line prefer-const
             curIdx = dropInst.element.childElementCount;
             prevIdx = this.getIndex(this.target);
+            if (dropInst.element.querySelector('.e-list-nrt')) {
+                curIdx = curIdx - 1;
+            }
+            if (this.curTarget === this.target && e.target === this.curTarget) {
+                curIdx = prevIdx;
+            }
             if (dropInst.element === e.target || (!isPlaceHolderPresent && this.curTarget === this.target)) {
                 const beforeDropArgs = {
-                    previousIndex: prevIdx, currentIndex: this.curTarget === this.target ? prevIdx : curIdx,
+                    previousIndex: prevIdx, currentIndex: curIdx,
                     target: e.target, droppedElement: this.target, helper: e.helper, cancel: false
                 };
                 this.trigger('beforeDrop', beforeDropArgs, (observedArgs) => {
@@ -4269,7 +4248,7 @@ let Sortable = Sortable_1 = class Sortable extends Base {
     }
     keyDownHandler(e) {
         if (e.keyCode === 27) {
-            let dragStop = getComponent(this.element, 'draggable');
+            const dragStop = getComponent(this.element, 'draggable');
             if (dragStop) {
                 dragStop.intDestroy(null);
             }
@@ -4452,6 +4431,11 @@ Sortable = Sortable_1 = __decorate$1([
 /**
  * It is used to sort array of elements from source element to destination element.
  *
+ * @param {HTMLElement} from - The source element from which to move elements.
+ * @param {HTMLElement} [to=from] - The destination element to which to move elements. Defaults to the source element.
+ * @param {number[]} [targetIndexes] - The indexes of elements to move. If not provided, all children of the source element will be moved.
+ * @param {number} [insertBefore] - The index before which to insert the moved elements in the destination element. If not provided, elements will be appended to the end of the destination element.
+ * @returns {void}
  * @private
  */
 function moveTo(from, to, targetIndexes, insertBefore) {
@@ -4480,13 +4464,5 @@ function moveTo(from, to, targetIndexes, insertBefore) {
     }
 }
 
-/**
- * Sortable Module
- */
-
-/**
- * List Components
- */
-
-export { classNames, FieldSettings, ListView, Virtualization, cssClass, ListBase, getFieldValues, Sortable, moveTo };
+export { FieldSettings, ListBase, ListView, Sortable, Virtualization, classNames, cssClass, getFieldValues, moveTo };
 //# sourceMappingURL=ej2-lists.es2015.js.map