@syncfusion/ej2-lists 25.2.3 → 26.1.35

package/dist/es6/ej2-lists.es5.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, Property, ChildProperty, detach, removeClass, formatUnit, animationMode, Animation, closest, EventHandler, Touch, remove, rippleEffect, Complex, Event, NotifyPropertyChanges, Component, select, isBlazor, getComponent, getUniqueID, Draggable, compareElementParent, Base } 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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
         var 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) {
         var 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) {
         var subChild = [];
         var 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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
         var fields = (componentInstance &&
@@ -226,8 +217,7 @@ var ListBase;
         var li;
         var 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 (var 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];
             }
             var 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)) {
                     var 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]) {
                     var 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) {
-                    var attr = { src: fieldData[fields.imageUrl] };
+                    var attr = { src: fieldData[fields.imageUrl], alt: !isNullOrUndefined(fieldData.name) ? ('Displaying ' + fieldData.name + ' Image') : 'Displaying Image' };
                     merge(attr, fieldData[fields.imageAttributes]);
                     var 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) {
                     var 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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         var 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) {
         if (sortOrder === void 0) { sortOrder = 'None'; }
@@ -480,6 +462,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) {
         if (query === void 0) { query = new Query(); }
@@ -505,9 +488,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);
     }
@@ -516,7 +500,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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -563,6 +548,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) {
         var match = { typeof: null, item: null };
         for (var i = 0; i < data.length; i++) {
@@ -572,6 +563,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) {
         var attr = {};
         merge(attr, elementAttributes);
@@ -581,24 +579,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) {
-        var attributes$$1 = {};
+        var attributes = {};
         var attr = element.attributes;
         for (var 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);
         var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -652,7 +658,6 @@ var ListBase;
                 var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
                     if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                        // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
                             append(compiledElement, li);
@@ -664,7 +669,6 @@ var ListBase;
                 }
                 else {
                     if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                        // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
                             append(compiledElement, li);
@@ -697,18 +701,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) {
         var compiledString = compileTemplate(groupTemplate);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -719,7 +728,6 @@ var ListBase;
             headerData["" + category] = header.textContent;
             header.innerHTML = '';
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                // eslint-disable-next-line
                 var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
                     append(compiledElement, header);
@@ -732,12 +740,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
         var subDS = fieldData[fields.child] || [];
@@ -758,6 +783,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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
@@ -783,8 +823,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) {
@@ -793,8 +832,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) {
@@ -813,6 +851,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) {
         var moduleClass;
         // eslint-disable-next-line
@@ -838,11 +882,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) {
         var fieldData = getFieldValues(dataSource, fields);
         var 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;
@@ -863,11 +917,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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
         var text = item;
@@ -877,10 +939,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) {
@@ -901,7 +961,6 @@ var ListBase;
         if (grpLI && options && options.groupTemplate) {
             var compiledString = compileTemplate(options.groupTemplate);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
                     append(compiledElement, li);
@@ -914,7 +973,6 @@ var ListBase;
         else if (!grpLI && options && options.template) {
             var compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
-                // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
                     append(compiledElement, li);
@@ -953,11 +1011,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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -974,11 +1036,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) {
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -995,9 +1061,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) {
     var fieldData = {};
@@ -1018,6 +1085,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 {
@@ -1054,6 +1127,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];
 var effectsConfig = {
     'None': [],
@@ -1214,7 +1288,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                     this.setEnableRTL();
                     break;
                 case 'fields':
-                    // eslint-disable-next-line
                     this.listBaseOption.fields = this.fields.properties;
                     if (this.enableVirtualization) {
                         this.virtualizationModule.reRenderUiVirtualization();
@@ -1278,14 +1351,12 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                         this.resetCurrentList();
                     }
                     break;
-                default:
-                    break;
             }
         }
     };
     // Model Changes
     ListView.prototype.setHTMLAttribute = function () {
-        if (Object.keys(this.htmlAttributes).length) {
+        if (!isNullOrUndefined(this.htmlAttributes) && Object.keys(this.htmlAttributes).length) {
             attributes(this.element, this.htmlAttributes);
         }
     };
@@ -1343,13 +1414,11 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (this.headerTemplate) {
                 var compiledString = compile(this.headerTemplate);
                 var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
-                // eslint-disable-next-line
                 var 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();
                 }
@@ -1414,8 +1483,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 name: (reverse === true ? anim[0] : anim[1]),
                 duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
                 timingFunction: this.animation.easing,
-                // eslint-disable-next-line
-                end: function (model) {
+                end: function () {
                     fromView.style.display = 'none';
                     _this.element.style.overflow = overflow_1;
                     fromView.style.position = fPos_1;
@@ -1453,7 +1521,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 itemRole: 'listitem', listRole: 'list', itemText: '',
                 groupItemRole: 'presentation', wrapperRole: 'presentation'
             },
-            // eslint-disable-next-line
             fields: (this.fields.properties),
             sortOrder: this.sortOrder,
             showIcon: this.showIcon,
@@ -1488,10 +1555,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.isNestedList = true;
         }
         if (this.showCheckBox && args.item.classList.contains(classNames.listItem)) {
-            var checkboxElement = void 0;
             var fieldData_1;
-            // eslint-disable-next-line prefer-const
-            checkboxElement = createCheckBox(this.createElement, false, {
+            var checkboxElement = createCheckBox(this.createElement, false, {
                 checked: false, enableRtl: this.enableRtl,
                 cssClass: classNames.listviewCheckbox
             });
@@ -1628,7 +1693,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             for (var i = 0; i < liCollection.length; i++) {
                 var 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));
@@ -1743,8 +1807,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var curLi = closest(e.target.parentNode, '.' + classNames.listItem);
         this.setHoverLI(curLi);
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ListView.prototype.leaveHandler = function (e) {
+    ListView.prototype.leaveHandler = function () {
         this.removeHover();
     };
     ListView.prototype.homeKeyHandler = function (e, end) {
@@ -1998,7 +2061,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.scroll)) {
             EventHandler.remove(this.element, 'scroll', this.onListScroll);
         }
-        this.touchModule.destroy();
+        if (this.touchModule)
+            this.touchModule.destroy();
         this.touchModule = null;
     };
     ListView.prototype.removeFocus = function () {
@@ -2083,7 +2147,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             selectedItem =
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
-                    // eslint-disable-next-line
                     data: data
                 };
         }
@@ -2101,7 +2164,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     };
     ListView.prototype.setSelectedItemData = function (li) {
         var data = this.getItemData(li);
-        // eslint-disable-next-line
         var fieldData = getFieldValues(data, this.listBaseOption.fields);
         if (!isNullOrUndefined(data) && ((typeof this.dataSource[0] === 'string') ||
             (typeof this.dataSource[0] === 'number'))) {
@@ -2114,9 +2176,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         else {
             this.selectedItems = {
                 item: li,
-                // eslint-disable-next-line
                 text: fieldData && fieldData[this.listBaseOption.fields.text],
-                // eslint-disable-next-line
                 data: data
             };
         }
@@ -2161,7 +2221,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, levelKeys_1 = levelKeys; _i < levelKeys_1.length; _i++) {
                 var key = levelKeys_1[_i];
                 var field = {};
-                // eslint-disable-next-line
                 field[this.fields.id] = key;
                 this.curDSJSON = this.findItemFromDS(ds, field);
                 var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
@@ -2189,9 +2248,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var resultJSON;
         if (dataSource && dataSource.length && fields) {
             dataSource.some(function (data) {
-                var fieldData = 
-                // eslint-disable-next-line
-                getFieldValues(data, _this.listBaseOption.fields);
+                var 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]) &&
@@ -2205,13 +2262,12 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 else if (!isNullOrUndefined(fields[_this.fields.id]) && isNullOrUndefined(fieldData[_this.fields.id])) {
                     var 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;
@@ -2226,7 +2282,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var columns = [];
         var query = (this.query ? this.query : new Query());
         if (!this.query) {
-            // eslint-disable-next-line
             for (var _i = 0, _a = Object.keys(this.fields.properties); _i < _a.length; _i++) {
                 var column = _a[_i];
                 if (column !== 'tableName' && !!(this.fields["" + column]) &&
@@ -2237,8 +2292,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             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);
             }
         }
@@ -2246,7 +2300,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     };
     ListView.prototype.setViewDataSource = function (dataSource) {
         if (dataSource === void 0) { dataSource = this.localData; }
-        // eslint-disable-next-line
         var fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
         var query = ListBase.addSorting(this.sortOrder, fieldValue);
         if (dataSource && this.fields.groupBy) {
@@ -2285,15 +2338,12 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.setLocalData = function () {
         var _this = this;
         this.trigger('actionBegin');
-        // eslint-disable-next-line
-        var listViewComponent = this;
         if (this.dataSource instanceof DataManager) {
             if (this.dataSource.ready) {
                 this.dataSource.ready.then(function (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(function (e) {
                     _this.triggerActionFailure(e);
@@ -2301,7 +2351,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             }
             else {
                 this.dataSource.executeQuery(this.getQuery()).then(function (e) {
-                    _this.renderRemoteLists(e, listViewComponent);
+                    _this.renderRemoteLists(e, _this);
                 }).catch(function (e) {
                     _this.triggerActionFailure(e);
                 });
@@ -2345,7 +2395,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     };
     ListView.prototype.setAttributes = function (liElements) {
         for (var i = 0; i < liElements.length; i++) {
-            var element = liElements[i];
+            var 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');
@@ -2359,15 +2409,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         this.setAttributes(this.liCollection);
     };
-    ListView.prototype.exceptionEvent = function (e) {
-        this.trigger('actionFailure', e);
-    };
-    ListView.prototype.UpdateCurrentUL = function () {
-        this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
-        if (this.curUL) {
-            this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
-        }
-    };
     ListView.prototype.renderSubList = function (li) {
         this.liElement = li;
         var uID = li.getAttribute('data-uid');
@@ -2459,7 +2500,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         }
         this.unWireEvents();
         var classAr = [classNames.root, classNames.disable, 'e-rtl',
-            'e-has-header', 'e-lib'].concat(this.cssClass.split(' ').filter(function (css) { return css; }));
+            'e-has-header', 'e-lib'].concat(this.cssClass ? this.cssClass.split(' ').filter(function (css) { return css; }) : []);
         removeClass([this.element], classAr);
         this.element.removeAttribute('role');
         this.element.removeAttribute('tabindex');
@@ -2556,8 +2597,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 if (obj instanceof Element) {
                     var uid = obj.getAttribute('data-uid').toString();
                     for (var 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;
                         }
                     }
@@ -2583,8 +2624,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                     if (!this.enableVirtualization && isNullOrUndefined(li)) {
                         var curLi = this.element.querySelectorAll('.' + classNames.listItem);
                         for (var 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)];
                             }
                         }
                     }
@@ -2602,8 +2644,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.selectMultipleItems = function (item) {
         if (!isNullOrUndefined(item)) {
             for (var 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)]);
                 }
             }
         }
@@ -2612,7 +2654,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var parentId = [];
         if (this.isNestedList) {
             for (var i = this.curDSLevel.length - 1; i >= 0; i--) {
-                parentId.push(this.curDSLevel[i]);
+                parentId.push(this.curDSLevel[parseInt(i.toString(), 10)]);
             }
         }
         return parentId;
@@ -2621,7 +2663,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         this.selectedId = [];
         var liCollection = this.curUL.getElementsByClassName(classNames.selected);
         for (var i = 0; i < liCollection.length; i++) {
-            var tempData = this.getItemData(liCollection[i]);
+            var tempData = this.getItemData(liCollection[parseInt(i.toString(), 10)]);
             if (!isNullOrUndefined(tempData) && tempData[this.listBaseOption.fields.id]) {
                 this.selectedId.push(tempData[this.listBaseOption.fields.id]);
             }
@@ -2649,10 +2691,10 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             var dataParent = [];
             for (var 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 {
-                    var tempData = this.getItemData(liCollection[i]);
+                    var tempData = this.getItemData(liCollection[parseInt(i.toString(), 10)]);
                     var fieldData = getFieldValues(tempData, this.listBaseOption.fields);
                     if (this.isNestedList) {
                         dataParent.push({ data: tempData, parentId: this.getParentId() });
@@ -2839,7 +2881,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 // check for whether target is nested level or top level in list
                 if (ds instanceof Array) {
                     for (var 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
@@ -2849,7 +2891,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                         // 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();
@@ -2868,7 +2910,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ListView.prototype.addItemAtIndex = function (index, newDataSource, itemData) {
-        var isIndexValid = !(isNullOrUndefined(index)) && index >= 0 && index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);
+        var isIndexValid = !(isNullOrUndefined(index)) && index >= 0 &&
+            index < newDataSource.length && isNullOrUndefined(this.listBaseOption.fields.groupBy);
         if (isIndexValid) {
             newDataSource.splice(index, 0, itemData);
         }
@@ -2889,20 +2932,20 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 : null;
         var targetDS = isAlreadyRenderedUL ? targetChildDS : [targetItemData];
         var 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) {
             var 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 (var 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);
             }
-            
         }
     };
     ListView.prototype.addItemIntoDom = function (currentItem, targetUL, curViewDS) {
@@ -2949,11 +2992,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var curViewDS = this.curViewDS;
         var fields = obj instanceof Element ? this.getElementUID(obj) : obj;
-        var dataSource;
-        dataSource = this.findItemFromDS(listDataSource, fields, true);
+        var dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
-            var data_1;
-            data_1 = this.findItemFromDS(dataSource, fields);
+            var data_1 = this.findItemFromDS(dataSource, fields);
             var index = curViewDS.indexOf(data_1);
             var li = this.getLiFromObjOrElement(obj);
             var groupLi = void 0;
@@ -3013,18 +3054,18 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.removeMultipleItems = function (item) {
         if (item.length) {
             for (var i = 0; i < item.length; i++) {
-                this.removeItem(item[i]);
+                this.removeItem(item[parseInt(i.toString(), 10)]);
             }
         }
     };
     ListView.prototype.findParent = function (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 (var i = 0; i < Object.keys(dataSource).length; i++) {
-            if (dataSource[Object.keys(dataSource)[i]]
-                && typeof dataSource[Object.keys(dataSource)[i]] === 'object') {
-                var 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') {
+                var result = this.findParent(dataSource[Object.keys(dataSource)[parseInt(i.toString(), 10)]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
                         result.parent = parent;
@@ -3047,15 +3088,15 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         return modules;
     };
     ListView.prototype.onListScroll = function (e) {
-        var args = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
+        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.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);
         }
@@ -3182,9 +3223,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.wireScrollEvent(false);
         var curViewDS = this.listViewInstance.curViewDS;
         var 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);
@@ -3194,9 +3233,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.uiFirstIndex = 0;
         this.uiLastIndex = this.domItemCount - 1;
         var otherDs = curViewDS.slice(1, this.domItemCount);
-        var listItems = ListBase.createListItemFromJson(
-        // eslint-disable-next-line
-        this.listViewInstance.createElement, otherDs, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
+        var 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');
@@ -3228,31 +3265,9 @@ var Virtualization = /** @__PURE__ @class */ (function () {
             }
             else {
                 EventHandler.remove(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll);
-                EventHandler.remove(this.listViewInstance.element, 'scroll', this.updateUlContainer);
             }
         }
     };
-    Virtualization.prototype.updateUlContainer = function (e) {
-        var listDiff;
-        var 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';
-        }
-    };
     Virtualization.prototype.ValidateItemCount = function (dataSourceLength) {
         var height = parseFloat(formatUnit(this.listViewInstance.height));
         var itemCount;
@@ -3261,7 +3276,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         }
         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 {
@@ -3280,10 +3294,8 @@ var Virtualization = /** @__PURE__ @class */ (function () {
             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));
             }
         }
@@ -3308,7 +3320,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
             (pageYOffset - startingHeight)) : ((this.listViewInstance.element.scrollTop - startingHeight) <= 0) ? 0 :
             (this.listViewInstance.element.scrollTop - startingHeight);
     };
-    Virtualization.prototype.onVirtualUiScroll = function (e) {
+    Virtualization.prototype.onVirtualUiScroll = function () {
         var _a;
         var startingHeight;
         var curViewDS = this.listViewInstance.curViewDS;
@@ -3383,7 +3395,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         }
     };
     Virtualization.prototype.updateUiContent = function (element, index) {
-        // eslint-disable-next-line
         var curViewDs = this.listViewInstance.curViewDS;
         if (typeof this.listViewInstance.dataSource[0] === 'string' ||
             typeof this.listViewInstance.dataSource[0] === 'number') {
@@ -3392,13 +3403,10 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                 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)) {
@@ -3501,9 +3509,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         if (!isNullOrUndefined(fields)) {
             ds.some(function (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;
@@ -3531,7 +3537,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                     }
                     return {
                         text: dataCollection,
-                        // eslint-disable-next-line
                         data: dataCollection,
                         index: this.uiIndices.activeIndices.map(function (index) {
                             return _this.listViewInstance.dataSource.indexOf(curViewDS_1[index]);
@@ -3553,15 +3558,12 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                     var indexArray = this.uiIndices.activeIndices;
                     for (var i = 0; i < indexArray.length; i++) {
                         textCollection.push(curViewDS_2[indexArray[i]]["" + text]);
-                        // eslint-disable-next-line
-                        dataCollection.push(curViewDS_2[indexArray[i]]);
+                        dataCollection.push(curViewDS_2[indexArray[parseInt(i.toString(), 10)]]);
                     }
-                    // eslint-disable-next-line
                     var dataSource_1 = this.listViewInstance.dataSource instanceof DataManager
                         ? curViewDS_2 : this.listViewInstance.dataSource;
                     return {
                         text: textCollection,
-                        // eslint-disable-next-line
                         data: dataCollection,
                         index: this.uiIndices.activeIndices.map(function (index) {
                             return dataSource_1.indexOf(curViewDS_2[index]);
@@ -3569,12 +3571,10 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                     };
                 }
                 else {
-                    // eslint-disable-next-line
                     var dataSource = this.listViewInstance.dataSource instanceof DataManager
                         ? curViewDS_2 : this.listViewInstance.dataSource;
                     return {
                         text: curViewDS_2[this.activeIndex][this.listViewInstance.fields.text],
-                        // eslint-disable-next-line
                         data: curViewDS_2[this.activeIndex],
                         index: dataSource.indexOf(curViewDS_2[this.activeIndex])
                     };
@@ -3586,7 +3586,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         }
     };
     Virtualization.prototype.selectItem = function (obj) {
-        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             var isSelected = this.activeIndex === resutJSON.index;
@@ -3614,7 +3613,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                // eslint-disable-next-line
                 var eventArgs = void 0;
                 if (typeof this.listViewInstance.dataSource[0] === 'string' ||
                     typeof this.listViewInstance.dataSource[0] === 'number') {
@@ -3648,28 +3646,24 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         }
     };
     Virtualization.prototype.enableItem = function (obj) {
-        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
         }
     };
     Virtualization.prototype.disableItem = function (obj) {
-        // eslint-disable-next-line
         var 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);
         }
     };
     Virtualization.prototype.showItem = function (obj) {
-        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
         }
     };
     Virtualization.prototype.hideItem = function (obj) {
-        // eslint-disable-next-line
         var 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);
@@ -3678,7 +3672,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     Virtualization.prototype.removeItem = function (obj) {
         var dataSource;
         var curViewDS = this.listViewInstance.curViewDS;
-        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
@@ -3899,7 +3892,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                // eslint-disable-next-line
                 var index_2 = this.listViewInstance.curViewDS.indexOf(currentItem);
                 // virtually new add list item based on the scollbar position
                 this.addUiItem(index_2);
@@ -3914,9 +3906,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     Virtualization.prototype.createAndInjectNewItem = function (itemData, index) {
         // generate li item for given datasource
         var target;
-        var li = ListBase.createListItemFromJson(this.listViewInstance.createElement, 
-        // eslint-disable-next-line
-        [itemData], this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
+        var 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;
@@ -3949,7 +3939,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
             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))) {
@@ -4005,9 +3994,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
-            // eslint-disable-next-line
             element.dataset.uid = (curViewDS[this.listViewInstance.fields.id]) ?
-                // eslint-disable-next-line
                 (curViewDS[this.listViewInstance.fields.id]) : ListBase.generateId();
             onChange(curViewDS, element, this);
         }
@@ -4028,9 +4015,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
      * @returns {void}
      */
     Virtualization.prototype.onChange = function (newData, listElement, virtualThis) {
-        var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
-        // eslint-disable-next-line
-        [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
+        var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
         if (virtualThis.listViewInstance.isReact) {
             virtualThis.listViewInstance.renderReactTemplates();
         }
@@ -4061,14 +4046,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     return Virtualization;
 }());
 
-/**
- * Listview Component
- */
-
-/**
- * Listview Component
- */
-
 var __extends$1 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4088,6 +4065,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     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 */
 /**
  * Sortable Module provides support to enable sortable functionality in Dom Elements.
  * ```html
@@ -4109,7 +4087,6 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
     function Sortable(element, options) {
         var _this = _super.call(this, options, element) || this;
         _this.getHelper = function (e) {
-            // eslint-disable-next-line prefer-const
             var target = _this.getSortableElement(e.sender.target);
             if (!_this.isValidTarget(target, _this)) {
                 return false;
@@ -4127,7 +4104,6 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
             document.body.appendChild(element);
             return element;
         };
-        // eslint-disable-next-line
         _this.onDrag = function (e) {
             if (!e.target) {
                 return;
@@ -4205,7 +4181,6 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
                 });
             }
         };
-        // eslint-disable-next-line
         _this.onDragStart = function (e) {
             _this.target = _this.getSortableElement(e.target);
             var cancelDrag = false;
@@ -4232,11 +4207,10 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
                 _this.trigger('dragStart', { event: e.event, element: _this.element, target: _this.target });
             }
         };
-        // eslint-disable-next-line
         _this.onDragStop = function (e) {
             var dropInst = _this.getSortableInstance(_this.curTarget);
-            var prevIdx;
             var curIdx;
+            var prevIdx;
             var handled;
             prevIdx = _this.getIndex(_this.target);
             var isPlaceHolderPresent = _this.isPlaceHolderPresent(dropInst);
@@ -4267,12 +4241,17 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
                 });
             }
             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)) {
                 var 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, function (observedArgs) {
@@ -4519,6 +4498,11 @@ var Sortable = /** @__PURE__ @class */ (function (_super) {
 /**
  * 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) {
@@ -4547,13 +4531,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.es5.js.map