@syncfusion/ej2-lists 23.2.4 → 24.1.46

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

@@ -280,18 +280,31 @@ var ListBase;
                 li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);
                 li.classList.add(cssClass.level + '-' + ariaAttributes.level);
                 li.setAttribute('aria-level', ariaAttributes.level.toString());
-                if (ariaAttributes.groupItemRole == 'presentation' || ariaAttributes.itemRole == 'presentation') {
+                if (ariaAttributes.groupItemRole === 'presentation' || ariaAttributes.itemRole === 'presentation') {
                     li.removeAttribute('aria-level');
                 }
                 anchorElement = li.querySelector('.' + cssClass.anchorWrap);
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.tooltip)) {
-                    const tooltipText = SanitizeHtmlHelper.sanitize(fieldData[fields.tooltip]);
+                    let tooltipText = fieldData[fields.tooltip];
+                    if (options && options.enableHtmlSanitizer) {
+                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
+                    }
+                    else {
+                        let tooltipTextElement = createElement('span', { innerHTML: tooltipText });
+                        tooltipText = tooltipTextElement.innerText;
+                        tooltipTextElement = null;
+                    }
                     li.setAttribute('title', tooltipText);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {
-                    setAttribute(li, fieldData[fields.htmlAttributes]);
+                    const htmlAttributes = fieldData[fields.htmlAttributes];
+                    // Check if 'class' attribute is present and not an empty string
+                    if (htmlAttributes.hasOwnProperty('class') && typeof htmlAttributes['class'] === 'string' && htmlAttributes['class'].trim() === '') {
+                        delete htmlAttributes['class'];
+                    }
+                    setAttribute(li, htmlAttributes);
                 }
                 // eslint-disable-next-line no-prototype-builtins
                 if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {
@@ -507,7 +520,6 @@ var ListBase;
         const curOpt = extend({}, defaultListBaseOptions, options);
         const fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);
         const curEle = element.cloneNode(true);
-        // eslint-disable-next-line
         const jsonAr = [];
         curEle.classList.add('json-parent');
         const childs = curEle.querySelectorAll('.json-parent>li');
@@ -516,7 +528,6 @@ var ListBase;
             const li = childs[i];
             const anchor = li.querySelector('a');
             const ul = li.querySelector('ul');
-            // eslint-disable-next-line
             const json = {};
             const childNodes = anchor ? anchor.childNodes : li.childNodes;
             const keys = Object.keys(childNodes);
@@ -590,7 +601,6 @@ var ListBase;
         const ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         const curOpt = extend({}, defaultListBaseOptions, options);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
-        // eslint-disable-next-line
         const compiledString = compileTemplate(template);
         const liCollection = [];
         let value;
@@ -639,7 +649,7 @@ var ListBase;
             else {
                 const currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
-                    if (componentInstance && componentInstance.getModuleName() != 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                         // eslint-disable-next-line
                         const compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -697,7 +707,6 @@ var ListBase;
     function renderGroupTemplate(groupTemplate, groupDataSource, fields, 
     // eslint-disable-next-line
     headerItems, options, componentInstance) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         const compiledString = compileTemplate(groupTemplate);
         const curFields = extend({}, ListBase.defaultMappedFields, fields);
         const curOpt = extend({}, defaultListBaseOptions, options);
@@ -706,7 +715,7 @@ var ListBase;
             const headerData = {};
             headerData[`${category}`] = header.textContent;
             header.innerHTML = '';
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 const compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
@@ -742,7 +751,6 @@ var ListBase;
         // Create expand and collapse node
         if (!!options.expandCollapse && hasChildren && !options.template) {
             element.firstElementChild.classList.add(cssClass.iconWrapper);
-            // eslint-disable-next-line @typescript-eslint/ban-types
             const expandElement = options.expandIconPosition === 'Left' ? prepend : append;
             expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));
         }
@@ -888,9 +896,8 @@ var ListBase;
             li.setAttribute('data-uid', generateId());
         }
         if (grpLI && options && options.groupTemplate) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             const compiledString = compileTemplate(options.groupTemplate);
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 const compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -902,7 +909,6 @@ var ListBase;
             }
         }
         else if (!grpLI && options && options.template) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             const compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
@@ -974,7 +980,6 @@ var ListBase;
     function generateIcon(createElement, liElement, className, options) {
         const curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
-        // eslint-disable-next-line @typescript-eslint/ban-types
         const expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;
         expandElement([createElement('div', {
                 className: 'e-icons ' + curOpt.expandIconClass + ' ' +
@@ -1311,7 +1316,6 @@ let ListView = class ListView extends Component {
             this.headerEle.appendChild(hedBackButton);
             this.headerEle.appendChild(textEle);
             if (this.headerTemplate) {
-                // eslint-disable-next-line
                 const compiledString = compile(this.headerTemplate);
                 const headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
                 // eslint-disable-next-line
@@ -1430,7 +1434,7 @@ let ListView = class ListView extends Component {
             itemCreated: this.renderCheckbox.bind(this),
             templateID: `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`,
             groupTemplateID: `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`,
-            enableHtmlSanitizer: this.enableHtmlSanitizer,
+            enableHtmlSanitizer: this.enableHtmlSanitizer
         };
         this.initialization();
     }
@@ -1471,8 +1475,8 @@ let ListView = class ListView extends Component {
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData = getFieldValues(args.curData, this.listBaseOption.fields);
                 if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
-                    let index = this.selectedId.findIndex(e => e == fieldData[this.listBaseOption.fields.id].toString());
-                    if (index != -1) {
+                    const index = this.selectedId.findIndex(e => e === fieldData[this.listBaseOption.fields.id].toString());
+                    if (index !== -1) {
                         this.checkInternally(args, checkboxElement);
                     }
                 }
@@ -1485,7 +1489,7 @@ let ListView = class ListView extends Component {
                 this.checkInternally(args, checkboxElement);
             }
             checkboxElement.setAttribute('aria-checked', frameElement.classList.contains(classNames.checked) ? 'true' : 'false');
-            checkboxElement.setAttribute('aria-label', 'checkbox');
+            checkboxElement.setAttribute('aria-label', args.text);
             if (this.checkBoxPosition === 'Left') {
                 checkboxElement.classList.add(classNames.checkboxLeft);
                 args.item.firstElementChild.classList.add(classNames.checkboxLeft);
@@ -1682,7 +1686,7 @@ let ListView = class ListView extends Component {
                 }
                 else {
                     this.setCheckboxLI(li, e);
-                    if ((target.nodeName == "INPUT") || (target.nodeName == "TEXTAREA")) {
+                    if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                         target.classList.add('e-focused');
                         this.targetElement = target;
                     }
@@ -1690,7 +1694,7 @@ let ListView = class ListView extends Component {
             }
             else {
                 this.setSelectLI(li, e);
-                if ((target.nodeName == "INPUT") || (target.nodeName == "TEXTAREA")) {
+                if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
                     target.classList.add('e-focused');
                     this.targetElement = target;
                 }
@@ -1951,6 +1955,9 @@ let ListView = class ListView extends Component {
         EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);
         EventHandler.add(this.element, 'focusout', this.focusout, this);
         this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });
+        if (!isNullOrUndefined(this.scroll)) {
+            EventHandler.add(this.element, 'scroll', this.onListScroll, this);
+        }
     }
     unWireEvents() {
         EventHandler.remove(this.element, 'click', this.clickHandler);
@@ -1958,6 +1965,9 @@ let ListView = class ListView extends Component {
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
         EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
+        if (!isNullOrUndefined(this.scroll)) {
+            EventHandler.remove(this.element, 'scroll', this.onListScroll);
+        }
         this.touchModule.destroy();
         this.touchModule = null;
     }
@@ -1999,7 +2009,7 @@ let ListView = class ListView extends Component {
             if (this.curUL.querySelector('.' + classNames.focused)) {
                 this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
             }
-            let textAreaFocus = li.querySelector('textarea') || li.querySelector('input');
+            const textAreaFocus = li.querySelector('textarea') || li.querySelector('input');
             li.classList.add(classNames.focused);
             if (!isNullOrUndefined(e)) {
                 if (e.target === textAreaFocus) {
@@ -2039,7 +2049,6 @@ let ListView = class ListView extends Component {
         }
         else {
             selectedItem =
-                // eslint-disable-next-line
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
                     // eslint-disable-next-line
@@ -2197,7 +2206,7 @@ let ListView = class ListView extends Component {
     setViewDataSource(dataSource = this.localData) {
         // eslint-disable-next-line
         let fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
-        let query = ListBase.addSorting(this.sortOrder, fieldValue);
+        const query = ListBase.addSorting(this.sortOrder, fieldValue);
         if (dataSource && this.fields.groupBy) {
             if (this.sortOrder !== 'None') {
                 this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, query), this.listBaseOption.fields, this.sortOrder);
@@ -2275,7 +2284,6 @@ let ListView = class ListView extends Component {
         this.removeElement(this.headerEle);
         this.removeElement(this.ulElement);
         this.removeElement(this.contentContainer);
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2314,7 +2322,6 @@ let ListView = class ListView extends Component {
     UpdateCurrentUL() {
         this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
         if (this.curUL) {
-            // eslint-disable-next-line
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     }
@@ -2329,7 +2336,6 @@ let ListView = class ListView extends Component {
             if (!ele) {
                 const data = this.curViewDS;
                 ele = ListBase.createListFromJson(this.createElement, data, this.listBaseOption, this.curDSLevel.length, null, this);
-                // eslint-disable-next-line
                 if (this.isReact) {
                     this.renderReactTemplates();
                 }
@@ -2343,7 +2349,6 @@ let ListView = class ListView extends Component {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
             if (this.selectedItems) {
                 const fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
-                // eslint-disable-next-line
                 this.header((fieldData[this.listBaseOption.fields.text]), true, 'header');
             }
             this.selectedLI = undefined;
@@ -2367,7 +2372,6 @@ let ListView = class ListView extends Component {
             this.contentContainer = this.createElement('div', { className: classNames.container });
             this.element.appendChild(this.contentContainer);
             this.renderIntoDom(this.ulElement);
-            // eslint-disable-next-line
             if (this.isReact) {
                 this.renderReactTemplates();
             }
@@ -2376,7 +2380,6 @@ let ListView = class ListView extends Component {
     getElementUID(obj) {
         let fields = {};
         if (obj instanceof Element) {
-            // eslint-disable-next-line
             fields[this.fields.id] = obj.getAttribute('data-uid');
         }
         else {
@@ -2402,12 +2405,12 @@ let ListView = class ListView extends Component {
             selector: '.' + classNames.listItem
         });
         this.renderComplete();
+        this.previousScrollTop = this.element.scrollTop;
     }
     /**
      * It is used to destroy the ListView component.
      */
     destroy() {
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2449,7 +2452,6 @@ let ListView = class ListView extends Component {
             toUL = toUL.parentElement;
         }
         const fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
-        // eslint-disable-next-line
         const text = fieldData[this.fields.text];
         this.switchView(fromUL, toUL, true);
         this.removeFocus();
@@ -2522,7 +2524,6 @@ let ListView = class ListView extends Component {
                     if (!this.enableVirtualization && isNullOrUndefined(li)) {
                         const curLi = this.element.querySelectorAll('.' + classNames.listItem);
                         for (let i = 0; i < curLi.length; i++) {
-                            // eslint-disable-next-line
                             if (curLi[i].innerText.trim() === fieldData[this.fields.text]) {
                                 li = curLi[i];
                             }
@@ -2572,7 +2573,6 @@ let ListView = class ListView extends Component {
      *
      */
     getSelectedItems() {
-        // eslint-disable-next-line
         let finalValue;
         let isCompleted = false;
         this.selectedId = [];
@@ -2583,7 +2583,6 @@ let ListView = class ListView extends Component {
             isCompleted = true;
         }
         else if (this.showCheckBox && !isCompleted) {
-            // eslint-disable-next-line
             const liCollection = this.curUL.getElementsByClassName(classNames.selected);
             const liTextCollection = [];
             const liDataCollection = [];
@@ -2603,9 +2602,7 @@ let ListView = class ListView extends Component {
                         liDataCollection.push(tempData);
                     }
                     if (fieldData) {
-                        // eslint-disable-next-line
                         liTextCollection.push(fieldData[this.listBaseOption.fields.text]);
-                        // eslint-disable-next-line
                         this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     }
                     else {
@@ -2647,7 +2644,6 @@ let ListView = class ListView extends Component {
                     isCompleted = true;
                 }
                 else {
-                    // eslint-disable-next-line
                     this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     finalValue = {
                         text: fieldData[this.listBaseOption.fields.text], item: liElement,
@@ -2705,7 +2701,6 @@ let ListView = class ListView extends Component {
                 if (li) {
                     li.classList.add(classNames.disable);
                 }
-                // eslint-disable-next-line
                 resultJSON[this.fields.enabled] = false;
             }
         }
@@ -2741,7 +2736,6 @@ let ListView = class ListView extends Component {
                 li.style.display = display;
             }
             if (isHide) {
-                // eslint-disable-next-line
                 resultJSON[this.fields.isVisible] = false;
             }
             else {
@@ -2824,7 +2818,6 @@ let ListView = class ListView extends Component {
         return newDataSource;
     }
     addItemInNestedList(targetItemData, itemQueue) {
-        // eslint-disable-next-line
         const targetItemId = targetItemData[this.fields.id];
         const targetChildDS = targetItemData[this.fields.child];
         const isAlreadyRenderedUL = this.element.querySelector('[pid=\'' + targetItemId + '\']');
@@ -2865,7 +2858,6 @@ let ListView = class ListView extends Component {
             this.getLiFromObjOrElement(curViewDS[index + 2]) || null;
         const li = ListBase.createListItemFromJson(this.createElement, [dataSource], this.listBaseOption, null, null, this);
         this.setAttributes(li);
-        // eslint-disable-next-line
         if (this.template && this.isReact) {
             this.renderReactTemplates();
         }
@@ -2897,11 +2889,9 @@ let ListView = class ListView extends Component {
         const curViewDS = this.curViewDS;
         const fields = obj instanceof Element ? this.getElementUID(obj) : obj;
         let dataSource;
-        // eslint-disable-next-line prefer-const
         dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
             let data;
-            // eslint-disable-next-line prefer-const
             data = this.findItemFromDS(dataSource, fields);
             const index = curViewDS.indexOf(data);
             const li = this.getLiFromObjOrElement(obj);
@@ -2922,11 +2912,8 @@ let ListView = class ListView extends Component {
             if (groupLi) {
                 detach(groupLi);
             }
-            // eslint-disable-next-line
             const foundData = (dataSource.length - 1) <= 0
-                ? this.findParent(this.localData, this.fields.id, 
-                // eslint-disable-next-line
-                (value) => value === data[this.fields.id], null) : null;
+                ? this.findParent(this.localData, this.fields.id, (value) => value === data[this.fields.id], null) : null;
             const dsIndex = dataSource.indexOf(data);
             dataSource.splice(dsIndex, 1);
             this.setViewDataSource(listDataSource);
@@ -2969,16 +2956,13 @@ let ListView = class ListView extends Component {
             }
         }
     }
-    // eslint-disable-next-line
     findParent(dataSource, id, callback, parent) {
-        // eslint-disable-next-line no-prototype-builtins
         if (dataSource.hasOwnProperty(id) && callback(dataSource[id]) === true) {
             return extend({}, dataSource);
         }
         for (let i = 0; i < Object.keys(dataSource).length; i++) {
             if (dataSource[Object.keys(dataSource)[i]]
                 && typeof dataSource[Object.keys(dataSource)[i]] === 'object') {
-                // eslint-disable-next-line
                 const result = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
@@ -3001,6 +2985,21 @@ let ListView = class ListView extends Component {
         }
         return modules;
     }
+    onListScroll(e) {
+        let args = { originalEvent: e, scrollDirection: "Bottom", distanceY: this.element.scrollHeight - this.element.scrollTop };
+        let currentScrollTop = this.element.scrollTop;
+        if (currentScrollTop > this.previousScrollTop) {
+            args.scrollDirection = "Bottom";
+            args.distanceY = this.element.scrollHeight - this.element.clientHeight - this.element.scrollTop;
+            this.trigger('scroll', args);
+        }
+        else if (this.previousScrollTop > currentScrollTop) {
+            args.scrollDirection = "Top";
+            args.distanceY = this.element.scrollTop;
+            this.trigger('scroll', args);
+        }
+        this.previousScrollTop = currentScrollTop;
+    }
     /**
      * Get the properties to be maintained in the persisted state.
      */
@@ -3082,6 +3081,9 @@ __decorate([
 __decorate([
     Event()
 ], ListView.prototype, "actionFailure", void 0);
+__decorate([
+    Event()
+], ListView.prototype, "scroll", void 0);
 ListView = __decorate([
     NotifyPropertyChanges
 ], ListView);
@@ -3247,7 +3249,7 @@ class Virtualization {
     onVirtualUiScroll(e) {
         let startingHeight;
         const curViewDS = this.listViewInstance.curViewDS;
-        this.listItemHeight = select(".e-list-item", this.listViewInstance.element).getBoundingClientRect().height;
+        this.listItemHeight = select('.e-list-item', this.listViewInstance.element).getBoundingClientRect().height;
         this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
         if (this.listViewInstance.isWindow) {
             startingHeight = this.listViewInstance.ulElement.getBoundingClientRect().top -
@@ -3608,7 +3610,6 @@ class Virtualization {
         const curViewDS = this.listViewInstance.curViewDS;
         // eslint-disable-next-line
         const resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
-        // eslint-disable-next-line
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
             if (curViewDS[resutJSON.index - 1] &&
@@ -3856,7 +3857,7 @@ class Virtualization {
                 this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 2]);
         }
         if (this.listViewInstance.fields.groupBy && this.listViewInstance.curViewDS[index + 1] && this.listViewInstance.curViewDS[index + 1].isHeader) {
-            let targetEle = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);
+            const targetEle = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);
             if (targetEle) {
                 target = targetEle.nextElementSibling;
             }
@@ -3872,7 +3873,7 @@ class Virtualization {
         this.refreshItemHeight();
     }
     createUIItem(args) {
-        if (!args.item.classList.contains("e-list-group-item")) {
+        if (!args.item.classList.contains('e-list-group-item')) {
             this.templateData = args.curData.isHeader ? args.curData.items[0] :
                 args.curData;
             if (this.listViewInstance.showCheckBox) {
@@ -3929,7 +3930,6 @@ class Virtualization {
         this.listViewInstance.setLocalData();
     }
     updateUI(element, index, targetElement) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         const onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             const curViewDS = this.listViewInstance.curViewDS[index];
@@ -3955,7 +3955,7 @@ class Virtualization {
      * @param {Virtualization} virtualThis - The virtualization context for the list view.
      */
     onChange(newData, listElement, virtualThis) {
-        let liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
+        const liItem = ListBase.createListItemFromJson(virtualThis.listViewInstance.createElement, 
         // eslint-disable-next-line
         [newData], virtualThis.listViewInstance.listBaseOption, null, null, virtualThis.listViewInstance);
         if (virtualThis.listViewInstance.isReact) {
@@ -3970,7 +3970,6 @@ class Virtualization {
     }
     onNgChange(newData, listElement, virtualThis) {
         // compile given target element with template for new data
-        // eslint-disable-next-line
         const templateCompiler = compile(virtualThis.listViewInstance.template);
         const resultElement = templateCompiler(newData);
         while (listElement.lastChild) {