@syncfusion/ej2-lists 23.1.42 → 23.2.4

package/dist/es6/ej2-lists.es2015.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]);
+                    const 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]) {
@@ -2758,16 +2759,17 @@ let ListView = class ListView extends Component {
      *
      * @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.
      */
-    addItem(data, fields = undefined) {
+    addItem(data, fields = undefined, index) {
         const dataSource = this.dataSource instanceof DataManager
             ? this.localData : this.dataSource;
-        this.addItemInternally(data, fields, dataSource);
+        this.addItemInternally(data, fields, dataSource, index);
     }
-    addItemInternally(data, fields, dataSource) {
+    addItemInternally(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 {
                 const ds = this.findItemFromDS(dataSource, fields);
@@ -2783,7 +2785,7 @@ let ListView = class ListView extends Component {
                 // check for whether target is nested level or top level in list
                 if (ds instanceof Array) {
                     for (let i = 0; i < data.length; i++) {
-                        dataSource.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
@@ -2811,6 +2813,16 @@ let ListView = class ListView extends Component {
             }
         }
     }
+    addItemAtIndex(index, newDataSource, itemData) {
+        let 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;
+    }
     addItemInNestedList(targetItemData, itemQueue) {
         // eslint-disable-next-line
         const targetItemId = targetItemData[this.fields.id];
@@ -3103,10 +3115,6 @@ class Virtualization {
      * @private
      */
     uiVirtualization() {
-        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);
         const curViewDS = this.listViewInstance.curViewDS;
         const firstDs = curViewDS.slice(0, 1);
@@ -3238,6 +3246,9 @@ class Virtualization {
     }
     onVirtualUiScroll(e) {
         let startingHeight;
+        const 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;
@@ -3353,7 +3364,13 @@ class Virtualization {
                 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));
                 }
             }
         }
@@ -3771,11 +3788,11 @@ class Virtualization {
             });
         }
     }
-    addItem(data, fields, dataSource) {
+    addItem(data, fields, dataSource, index) {
         for (let i = 0; i < data.length; i++) {
             const 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
@@ -3855,191 +3872,50 @@ class Virtualization {
         this.refreshItemHeight();
     }
     createUIItem(args) {
-        const 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))) {
-                const div = document.createElement('div');
-                const nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach((ele) => {
-                    div.appendChild(ele);
-                });
-                if (div.children && div.children[0]) {
-                    div.children[0].classList.add('e-checkbox');
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div.children[0].classList.add('e-checkbox-left');
-                    }
-                    else {
-                        div.children[0].classList.add('e-checkbox-right');
-                    }
-                    if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div.childNodes[0].children[0]);
-                    }
-                    else {
-                        div.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))) {
+                    const div = document.createElement('div');
+                    const commonTemplate = '<div class="e-text-content" role="presentation"> ' +
+                        '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+                    const templateFunction = compile(this.listViewInstance.template || commonTemplate, this.listViewInstance);
+                    const nodes = templateFunction(this.templateData, this.listViewInstance);
+                    if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                        this.listViewInstance.renderReactTemplates();
                     }
-                    template.innerHTML = div.innerHTML;
-                }
-            }
-            else {
-                let div = document.createElement('div');
-                const nodes = this.templateFunction(this.templateData, this.listViewInstance);
-                if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                    this.listViewInstance.renderReactTemplates();
-                }
-                [].slice.call(nodes).forEach((ele) => {
-                    div.appendChild(ele);
-                });
-                template.innerHTML = div.innerHTML;
-            }
-        }
-        else {
-            const nodes = this.templateFunction(this.templateData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach((ele) => {
-                template.appendChild(ele);
-            });
-        }
-        if (args.curData.isHeader) {
-            this.headerData = args.curData;
-        }
-        const groupTemplate = this.listViewInstance.createElement('div');
-        if (this.listViewInstance.fields.groupBy) {
-            const nodes = this.groupTemplateFunction(this.headerData, this.listViewInstance);
-            if (this.listViewInstance.template && this.listViewInstance.isReact) {
-                this.listViewInstance.renderReactTemplates();
-            }
-            [].slice.call(nodes).forEach((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 (let i = 0; i < template.children.length; i++) {
-            this.compileTemplate(template.children[i], args.item, false);
-        }
-        for (let 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';
-        const element = args.curData.isHeader ? groupTemplate : template;
-        if (element.firstElementChild && !this.listViewInstance.isReact && !this.listViewInstance.isVue) {
-            args.item.insertBefore(element.firstElementChild, null);
-        }
-    }
-    compileTemplate(element, item, isHeader) {
-        const subNode = {};
-        subNode.onChange = (value) => {
-            let groupTemplateElements;
-            let 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();
-            }
-            let currentTemplate = templateElements;
-            if (value.isHeader) {
-                currentTemplate = groupTemplateElements;
-            }
-            [].slice.call(currentTemplate).forEach(function (currentElement) {
-                let 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 (let i = 0; i < element.attributes.length; i++) {
-                    if (element.attributes[i].name != 'class') {
-                        const newData = currentElement.getAttribute(element.attributes[i].name);
-                        element.setAttribute(element.attributes[i].name, newData);
+                    [].slice.call(nodes).forEach((ele) => {
+                        div.appendChild(ele);
+                    });
+                    if (div.children && div.children[0]) {
+                        div.children[0].classList.add('e-checkbox');
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div.children[0].classList.add('e-checkbox-left');
+                        }
+                        else {
+                            div.children[0].classList.add('e-checkbox-right');
+                        }
+                        if (this.listViewInstance.checkBoxPosition === 'Left') {
+                            div.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div.childNodes[0].children[0]);
+                        }
+                        else {
+                            div.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+                        }
+                        while (args.item.lastChild) {
+                            args.item.removeChild(args.item.lastChild);
+                        }
+                        [].slice.call(div.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);
-    }
-    onChange(newData, listElement) {
-        listElement.context.data = newData;
-        // eslint-disable-next-line max-len
-        const groupTemplateNodes = listElement.context.nodes.groupTemplateNodes;
-        // eslint-disable-next-line max-len
-        const flatTemplateNodes = listElement.context.nodes.flatTemplateNodes;
-        // eslint-disable-next-line
-        if (!isNullOrUndefined(newData.isHeader) && newData.isHeader && listElement.context.type === 'groupList') {
-            // eslint-disable-next-line
-            const element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'flatList';
-            for (let i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader && listElement.context.type === 'flatList') {
-            const element = listElement.firstElementChild;
-            detach(listElement.firstElementChild);
-            listElement.insertBefore(listElement.context.template, null);
-            listElement.context.template = element;
-            listElement.context.type = 'groupList';
-            for (let i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else if (!newData.isHeader) {
-            for (let i = 0; i < flatTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                flatTemplateNodes[i].onChange(newData);
-            }
-        }
-        else {
-            for (let i = 0; i < groupTemplateNodes.length; i++) {
-                // eslint-disable-next-line
-                groupTemplateNodes[i].onChange(newData);
             }
         }
     }
-    // eslint-disable-next-line
-    updateContextData(listElement, node, isHeader) {
-        if (isHeader) {
-            listElement.context.nodes.groupTemplateNodes.push(node);
-        }
-        else {
-            listElement.context.nodes.flatTemplateNodes.push(node);
-        }
-    }
     reRenderUiVirtualization() {
         this.wireScrollEvent(true);
         if (this.listViewInstance.contentContainer) {
@@ -4054,7 +3930,7 @@ class Virtualization {
     }
     updateUI(element, index, targetElement) {
         // eslint-disable-next-line @typescript-eslint/ban-types
-        const onChange = this.isNgTemplate() ? this.onNgChange : (this.isVueFunctionTemplate()) ? this.onVueChange : this.onChange;
+        const onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             const curViewDS = this.listViewInstance.curViewDS[index];
             // eslint-disable-next-line
@@ -4078,14 +3954,19 @@ class Virtualization {
      * @param {ElementContext} listElement - The HTML element context for the list view.
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
-    onVueChange(newData, listElement, virtualThis) {
+    onChange(newData, listElement, virtualThis) {
         let 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);
+        });
     }
     onNgChange(newData, listElement, virtualThis) {
         // compile given target element with template for new data