@syncfusion/ej2-lists 23.1.42 → 23.2.4

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

@@ -1,4 +1,4 @@
-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 } from '@syncfusion/ej2-base';
+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 { createCheckBox } from '@syncfusion/ej2-buttons';
 
@@ -286,7 +286,8 @@ var ListBase;
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.tooltip)) {
-                    li.setAttribute('title', fieldData[fields.tooltip]);
+                    var tooltipText = SanitizeHtmlHelper.sanitize(fieldData[fields.tooltip]);
+                    li.setAttribute('title', tooltipText);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
@@ -2794,17 +2795,18 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
      *
      * @param  {Fields} fields - Target item to add the given data as its children (can be null).
      *
+     * @param {number} index - Indicates the index where the data to be added.
      */
-    ListView.prototype.addItem = function (data, fields) {
+    ListView.prototype.addItem = function (data, fields, index) {
         if (fields === void 0) { fields = undefined; }
         var dataSource = this.dataSource instanceof DataManager
             ? this.localData : this.dataSource;
-        this.addItemInternally(data, fields, dataSource);
+        this.addItemInternally(data, fields, dataSource, index);
     };
-    ListView.prototype.addItemInternally = function (data, fields, dataSource) {
+    ListView.prototype.addItemInternally = function (data, fields, dataSource, index) {
         if (data instanceof Array) {
             if (this.enableVirtualization) {
-                this.virtualizationModule.addItem(data, fields, dataSource);
+                this.virtualizationModule.addItem(data, fields, dataSource, index);
             }
             else {
                 var ds = this.findItemFromDS(dataSource, fields);
@@ -2820,7 +2822,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.push(data[i]);
+                        dataSource = this.addItemAtIndex(index, dataSource, data[i]);
                         this.setViewDataSource(dataSource);
                         // since it is top level target, get the content container's first child
                         // as it is always the top level UL
@@ -2848,6 +2850,16 @@ 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);
+        if (isIndexValid) {
+            newDataSource.splice(index, 0, itemData);
+        }
+        else {
+            newDataSource.push(itemData);
+        }
+        return newDataSource;
+    };
     ListView.prototype.addItemInNestedList = function (targetItemData, itemQueue) {
         // eslint-disable-next-line
         var targetItemId = targetItemData[this.fields.id];
@@ -3142,10 +3154,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
      * @private
      */
     Virtualization.prototype.uiVirtualization = function () {
-        this.commonTemplate = '<div class="e-text-content" role="presentation"> ' +
-            '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
-        this.templateFunction = compile(this.listViewInstance.template || this.commonTemplate, this.listViewInstance);
-        this.groupTemplateFunction = compile(this.listViewInstance.groupTemplate || this.commonTemplate, this.listViewInstance);
         this.wireScrollEvent(false);
         var curViewDS = this.listViewInstance.curViewDS;
         var firstDs = curViewDS.slice(0, 1);
@@ -3278,6 +3286,9 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     Virtualization.prototype.onVirtualUiScroll = function (e) {
         var _a;
         var startingHeight;
+        var curViewDS = this.listViewInstance.curViewDS;
+        this.listItemHeight = select(".e-list-item", this.listViewInstance.element).getBoundingClientRect().height;
+        this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
         if (this.listViewInstance.isWindow) {
             startingHeight = this.listViewInstance.ulElement.getBoundingClientRect().top -
                 document.documentElement.getBoundingClientRect().top;
@@ -3393,7 +3404,13 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                 if (!element.querySelector('.' + classNames.checkboxWrapper)) {
                     element.classList.add(classNames.checklist);
                     textContent.classList.add(classNames.checkbox);
-                    textContent.insertBefore(this.checkListWrapper.cloneNode(true), element.querySelector('.' + classNames.listItemText));
+                    if (this.listViewInstance.checkBoxPosition === 'Left') {
+                        textContent.classList.add('e-checkbox-left');
+                    }
+                    else {
+                        textContent.classList.add('e-checkbox-right');
+                    }
+                    textContent.append(this.checkListWrapper.cloneNode(true));
                 }
             }
         }
@@ -3817,11 +3834,11 @@ var Virtualization = /** @__PURE__ @class */ (function () {
             });
         }
     };
-    Virtualization.prototype.addItem = function (data, fields, dataSource) {
+    Virtualization.prototype.addItem = function (data, fields, dataSource, index) {
         for (var i = 0; i < data.length; i++) {
             var currentItem = data[i];
             // push the given data to main data array
-            dataSource.push(currentItem);
+            dataSource = this.listViewInstance.addItemAtIndex(index, dataSource, currentItem);
             // recalculate all the group data or other datasource related things
             this.listViewInstance.setViewDataSource(dataSource);
             // render list items for first time due to no datasource present earlier
@@ -3839,16 +3856,16 @@ var Virtualization = /** @__PURE__ @class */ (function () {
                 var ds = this.listViewInstance.findItemFromDS(dataSource, fields);
                 if (ds instanceof Array) {
                     if (this.listViewInstance.ulElement) {
-                        var index = this.listViewInstance.curViewDS.indexOf(currentItem);
+                        var index_1 = this.listViewInstance.curViewDS.indexOf(currentItem);
                         // inject new list item into DOM
-                        this.createAndInjectNewItem(currentItem, index);
+                        this.createAndInjectNewItem(currentItem, index_1);
                         // check for group header item
-                        var curViewDS = this.listViewInstance.curViewDS[index - 1];
+                        var curViewDS = this.listViewInstance.curViewDS[index_1 - 1];
                         if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {
                             // target group item index in datasource
-                            --index;
+                            --index_1;
                             // inject new group header into DOM for previously created list item
-                            this.createAndInjectNewItem(curViewDS, index);
+                            this.createAndInjectNewItem(curViewDS, index_1);
                         }
                     }
                     // recollect all the list item into collection
@@ -3858,13 +3875,13 @@ var Virtualization = /** @__PURE__ @class */ (function () {
             }
             else {
                 // eslint-disable-next-line
-                var index = this.listViewInstance.curViewDS.indexOf(currentItem);
+                var index_2 = this.listViewInstance.curViewDS.indexOf(currentItem);
                 // virtually new add list item based on the scollbar position
-                this.addUiItem(index);
+                this.addUiItem(index_2);
                 // check for group header item needs to be added
-                var curViewDS = this.listViewInstance.curViewDS[index - 1];
+                var curViewDS = this.listViewInstance.curViewDS[index_2 - 1];
                 if (curViewDS && curViewDS.isHeader && curViewDS.items.length === 1) {
-                    this.addUiItem(index - 1);
+                    this.addUiItem(index_2 - 1);
                 }
             }
         }
@@ -3901,192 +3918,50 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.refreshItemHeight();
     };
     Virtualization.prototype.createUIItem = function (args) {
-        var template = document.createElement('div');
-        this.templateData = args.curData.isHeader ? args.curData.items[0] :
-            args.curData;
-        if (this.listViewInstance.isReact) {
-            this.commonTemplate = null;
-        }
-        if (this.listViewInstance.showCheckBox) {
-            // eslint-disable-next-line
-            this.listViewInstance.renderCheckbox(args);
-            if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
-                (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
-                var div_1 = document.createElement('div');
-                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach(function (ele) {
-                    div_1.appendChild(ele);
-                });
-                if (div_1.children && div_1.children[0]) {
-                    div_1.children[0].classList.add('e-checkbox');
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div_1.children[0].classList.add('e-checkbox-left');
-                    }
-                    else {
-                        div_1.children[0].classList.add('e-checkbox-right');
-                    }
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
-                    }
-                    else {
-                        div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+        if (!args.item.classList.contains("e-list-group-item")) {
+            this.templateData = args.curData.isHeader ? args.curData.items[0] :
+                args.curData;
+            if (this.listViewInstance.showCheckBox) {
+                // eslint-disable-next-line
+                this.listViewInstance.renderCheckbox(args);
+                if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
+                    (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
+                    var div_1 = document.createElement('div');
+                    var commonTemplate = '<div class="e-text-content" role="presentation"> ' +
+                        '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+                    var templateFunction = compile(this.listViewInstance.template || commonTemplate, this.listViewInstance);
+                    var nodes = templateFunction(this.templateData, this.listViewInstance);
+                    if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                        this.listViewInstance.renderReactTemplates();
                     }
-                    template.innerHTML = div_1.innerHTML;
-                }
-            }
-            else {
-                var div_2 = document.createElement('div');
-                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach(function (ele) {
-                    div_2.appendChild(ele);
-                });
-                template.innerHTML = div_2.innerHTML;
-            }
-        }
-        else {
-            var nodes = this.templateFunction(this.templateData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach(function (ele) {
-                template.appendChild(ele);
-            });
-        }
-        if (args.curData.isHeader) {
-            this.headerData = args.curData;
-        }
-        var groupTemplate = this.listViewInstance.createElement('div');
-        if (this.listViewInstance.fields.groupBy) {
-            var nodes = this.groupTemplateFunction(this.headerData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach(function (ele) {
-                groupTemplate.appendChild(ele);
-            });
-        }
-        if ((!this.listViewInstance.isReact || (typeof this.listViewInstance.template == "string" && !args.item.classList.contains("e-list-group-item")) ||
-            (typeof this.listViewInstance.groupTemplate == "string" && args.item.classList.contains("e-list-group-item"))) && !this.listViewInstance.isVue) {
-            args.item.innerHTML = '';
-        }
-        args.item.context = { data: args.curData, nodes: { flatTemplateNodes: [], groupTemplateNodes: [] } };
-        for (var i = 0; i < template.children.length; i++) {
-            this.compileTemplate(template.children[i], args.item, false);
-        }
-        for (var i = 0; i < groupTemplate.children.length; i++) {
-            this.compileTemplate(groupTemplate.children[i], args.item, true);
-        }
-        args.item.context.template = args.curData.isHeader ? template.firstElementChild :
-            groupTemplate.firstElementChild;
-        args.item.context.type = args.curData.isHeader ? 'flatList' : 'groupList';
-        var element = args.curData.isHeader ? groupTemplate : template;
-        if (element.firstElementChild && !this.listViewInstance.isReact && !this.listViewInstance.isVue) {
-            args.item.insertBefore(element.firstElementChild, null);
-        }
-    };
-    Virtualization.prototype.compileTemplate = function (element, item, isHeader) {
-        var _this = this;
-        var subNode = {};
-        subNode.onChange = function (value) {
-            var groupTemplateElements;
-            var templateElements;
-            if (_this.listViewInstance.isVue) {
-                groupTemplateElements = _this.groupTemplateFunction(value);
-                templateElements = _this.templateFunction(value);
-            }
-            else {
-                groupTemplateElements = _this.groupTemplateFunction(value, _this.listViewInstance);
-                templateElements = _this.templateFunction(value, _this.listViewInstance);
-            }
-            if (_this.listViewInstance.template && _this.listViewInstance.isReact) {
-                _this.listViewInstance.renderReactTemplates();
-            }
-            var currentTemplate = templateElements;
-            if (value.isHeader) {
-                currentTemplate = groupTemplateElements;
-            }
-            [].slice.call(currentTemplate).forEach(function (currentElement) {
-                var RemovableClass = element.classList.value.replace('e-checkbox', '');
-                RemovableClass = RemovableClass.replace('e-checkbox-left', '');
-                RemovableClass = RemovableClass.replace('e-checkbox-right', '');
-                removeClass([element], RemovableClass.split(' ').filter(function (css) { return css; }));
-                addClass([element], Array.from(currentElement.classList));
-                for (var i = 0; i < element.attributes.length; i++) {
-                    if (element.attributes[i].name != 'class') {
-                        var newData = currentElement.getAttribute(element.attributes[i].name);
-                        element.setAttribute(element.attributes[i].name, newData);
+                    [].slice.call(nodes).forEach(function (ele) {
+                        div_1.appendChild(ele);
+                    });
+                    if (div_1.children && div_1.children[0]) {
+                        div_1.children[0].classList.add('e-checkbox');
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div_1.children[0].classList.add('e-checkbox-left');
+                        }
+                        else {
+                            div_1.children[0].classList.add('e-checkbox-right');
+                        }
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
+                        }
+                        else {
+                            div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+                        }
+                        while (args.item.lastChild) {
+                            args.item.removeChild(args.item.lastChild);
+                        }
+                        [].slice.call(div_1.children).forEach(function (ele) {
+                            args.item.appendChild(ele);
+                        });
                     }
                 }
-                [].slice.call(element.children).forEach(function (ele) {
-                    if (!ele.classList.contains('e-listview-checkbox') && !(ele.classList.contains('e-checkbox-left') || ele.classList.contains('e-checkbox-right'))) {
-                        ele.remove();
-                    }
-                });
-                [].slice.call(currentElement.children).forEach(function (ele) {
-                    element.appendChild(ele);
-                });
-            });
-        };
-        this.updateContextData(item, subNode, isHeader);
-    };
-    Virtualization.prototype.onChange = function (newData, listElement) {
-        listElement.context.data = newData;
-        // eslint-disable-next-line max-len
-        var groupTemplateNodes = listElement.context.nodes.groupTemplateNodes;
-        // eslint-disable-next-line max-len
-        var flatTemplateNodes = listElement.context.nodes.flatTemplateNodes;
-        // eslint-disable-next-line
-        if (!isNullOrUndefined(newData.isHeader) && newData.isHeader && listElement.context.type === 'groupList') {
-            // eslint-disable-next-line
-            var element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'flatList';
-            for (var i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader && listElement.context.type === 'flatList') {
-            var element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'groupList';
-            for (var i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader) {
-            for (var i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else {
-            for (var i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
             }
         }
     };
-    // eslint-disable-next-line
-    Virtualization.prototype.updateContextData = function (listElement, node, isHeader) {
-        if (isHeader) {
-            listElement.context.nodes.groupTemplateNodes.push(node);
-        }
-        else {
-            listElement.context.nodes.flatTemplateNodes.push(node);
-        }
-    };
     Virtualization.prototype.reRenderUiVirtualization = function () {
         this.wireScrollEvent(true);
         if (this.listViewInstance.contentContainer) {
@@ -4101,7 +3976,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     };
     Virtualization.prototype.updateUI = function (element, index, targetElement) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        var onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
+        var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -4125,14 +4000,19 @@ var Virtualization = /** @__PURE__ @class */ (function () {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    Virtualization.prototype.onVueChange = function (newData, listElement, virtualThis) {
+    Virtualization.prototype.onChange = function (newData, listElement, virtualThis) {
         var liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
         // eslint-disable-next-line
         [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
+        if (virtualThis.listViewInstance.isReact) {
+            virtualThis.listViewInstance.renderReactTemplates();
+        }
         while (listElement.lastChild) {
             listElement.removeChild(listElement.lastChild);
         }
-        listElement.appendChild(liItem[0].firstChild);
+        [].slice.call(liItem[0].children).forEach(function (ele) {
+            listElement.appendChild(ele);
+        });
     };
     Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {
         // compile given target element with template for new data