@syncfusion/ej2-lists 23.2.4 → 24.1.46

package/dist/es6/ej2-lists.es5.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)) {
-                    var tooltipText = SanitizeHtmlHelper.sanitize(fieldData[fields.tooltip]);
+                    var tooltipText = fieldData[fields.tooltip];
+                    if (options && options.enableHtmlSanitizer) {
+                        tooltipText = SanitizeHtmlHelper.sanitize(tooltipText);
+                    }
+                    else {
+                        var 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]);
+                    var 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) {
@@ -509,7 +522,6 @@ var ListBase;
         var curOpt = extend({}, defaultListBaseOptions, options);
         var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);
         var curEle = element.cloneNode(true);
-        // eslint-disable-next-line
         var jsonAr = [];
         curEle.classList.add('json-parent');
         var childs = curEle.querySelectorAll('.json-parent>li');
@@ -518,7 +530,6 @@ var ListBase;
             var li = childs[i];
             var anchor = li.querySelector('a');
             var ul = li.querySelector('ul');
-            // eslint-disable-next-line
             var json = {};
             var childNodes = anchor ? anchor.childNodes : li.childNodes;
             var keys = Object.keys(childNodes);
@@ -592,7 +603,6 @@ var ListBase;
         var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });
         var curOpt = extend({}, defaultListBaseOptions, options);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
-        // eslint-disable-next-line
         var compiledString = compileTemplate(template);
         var liCollection = [];
         var value;
@@ -641,7 +651,7 @@ var ListBase;
             else {
                 var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
-                    if (componentInstance && componentInstance.getModuleName() != 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                         // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -699,7 +709,6 @@ var ListBase;
     function renderGroupTemplate(groupTemplate, groupDataSource, fields, 
     // eslint-disable-next-line
     headerItems, options, componentInstance) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var compiledString = compileTemplate(groupTemplate);
         var curFields = extend({}, ListBase.defaultMappedFields, fields);
         var curOpt = extend({}, defaultListBaseOptions, options);
@@ -709,7 +718,7 @@ var ListBase;
             var headerData = {};
             headerData["" + category] = header.textContent;
             header.innerHTML = '';
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
@@ -745,7 +754,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
             var expandElement = options.expandIconPosition === 'Left' ? prepend : append;
             expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));
         }
@@ -891,9 +899,8 @@ var ListBase;
             li.setAttribute('data-uid', generateId());
         }
         if (grpLI && options && options.groupTemplate) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.groupTemplate);
-            if (componentInstance && componentInstance.getModuleName() !== "listview") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -905,7 +912,6 @@ var ListBase;
             }
         }
         else if (!grpLI && options && options.template) {
-            // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
@@ -977,7 +983,6 @@ var ListBase;
     function generateIcon(createElement, liElement, className, options) {
         var curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;
         expandElement([createElement('div', {
                 className: 'e-icons ' + curOpt.expandIconClass + ' ' +
@@ -1336,7 +1341,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.headerEle.appendChild(hedBackButton);
             this.headerEle.appendChild(textEle);
             if (this.headerTemplate) {
-                // eslint-disable-next-line
                 var compiledString = compile(this.headerTemplate);
                 var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
                 // eslint-disable-next-line
@@ -1456,7 +1460,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             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();
     };
@@ -1498,8 +1502,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData_1 = getFieldValues(args.curData, this.listBaseOption.fields);
                 if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
-                    var index = this.selectedId.findIndex(function (e) { return e == fieldData_1[_this.listBaseOption.fields.id].toString(); });
-                    if (index != -1) {
+                    var index = this.selectedId.findIndex(function (e) { return e === fieldData_1[_this.listBaseOption.fields.id].toString(); });
+                    if (index !== -1) {
                         this.checkInternally(args, checkboxElement);
                     }
                 }
@@ -1512,7 +1516,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 this.checkInternally(args, checkboxElement);
             }
             checkboxElement.setAttribute('aria-checked', frameElement_1.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);
@@ -1709,7 +1713,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 }
                 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;
                     }
@@ -1717,7 +1721,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             }
             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;
                 }
@@ -1979,6 +1983,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         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);
+        }
     };
     ListView.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
@@ -1986,6 +1993,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         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;
     };
@@ -2069,7 +2079,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             selectedItem =
-                // eslint-disable-next-line
                 {
                     item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
                     // eslint-disable-next-line
@@ -2311,7 +2320,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         this.removeElement(this.headerEle);
         this.removeElement(this.ulElement);
         this.removeElement(this.contentContainer);
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2350,7 +2358,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.UpdateCurrentUL = function () {
         this.ulElement = this.curUL = this.element.querySelector('.' + classNames.parentItem);
         if (this.curUL) {
-            // eslint-disable-next-line
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         }
     };
@@ -2365,7 +2372,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (!ele) {
                 var 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();
                 }
@@ -2379,7 +2385,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
             if (this.selectedItems) {
                 var fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);
-                // eslint-disable-next-line
                 this.header((fieldData[this.listBaseOption.fields.text]), true, 'header');
             }
             this.selectedLI = undefined;
@@ -2403,7 +2408,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             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();
             }
@@ -2412,7 +2416,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     ListView.prototype.getElementUID = function (obj) {
         var fields = {};
         if (obj instanceof Element) {
-            // eslint-disable-next-line
             fields[this.fields.id] = obj.getAttribute('data-uid');
         }
         else {
@@ -2438,12 +2441,12 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             selector: '.' + classNames.listItem
         });
         this.renderComplete();
+        this.previousScrollTop = this.element.scrollTop;
     };
     /**
      * It is used to destroy the ListView component.
      */
     ListView.prototype.destroy = function () {
-        // eslint-disable-next-line
         if (this.isReact) {
             this.clearTemplate();
         }
@@ -2485,7 +2488,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             toUL = toUL.parentElement;
         }
         var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);
-        // eslint-disable-next-line
         var text = fieldData[this.fields.text];
         this.switchView(fromUL, toUL, true);
         this.removeFocus();
@@ -2558,7 +2560,6 @@ 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++) {
-                            // eslint-disable-next-line
                             if (curLi[i].innerText.trim() === fieldData[this.fields.text]) {
                                 li = curLi[i];
                             }
@@ -2608,7 +2609,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
      *
      */
     ListView.prototype.getSelectedItems = function () {
-        // eslint-disable-next-line
         var finalValue;
         var isCompleted = false;
         this.selectedId = [];
@@ -2619,7 +2619,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             isCompleted = true;
         }
         else if (this.showCheckBox && !isCompleted) {
-            // eslint-disable-next-line
             var liCollection = this.curUL.getElementsByClassName(classNames.selected);
             var liTextCollection = [];
             var liDataCollection = [];
@@ -2639,9 +2638,7 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                         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 {
@@ -2683,7 +2680,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                     isCompleted = true;
                 }
                 else {
-                    // eslint-disable-next-line
                     this.selectedId.push(fieldData[this.listBaseOption.fields.id]);
                     finalValue = {
                         text: fieldData[this.listBaseOption.fields.text], item: liElement,
@@ -2741,7 +2737,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 if (li) {
                     li.classList.add(classNames.disable);
                 }
-                // eslint-disable-next-line
                 resultJSON[this.fields.enabled] = false;
             }
         }
@@ -2777,7 +2772,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
                 li.style.display = display;
             }
             if (isHide) {
-                // eslint-disable-next-line
                 resultJSON[this.fields.isVisible] = false;
             }
             else {
@@ -2861,7 +2855,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         return newDataSource;
     };
     ListView.prototype.addItemInNestedList = function (targetItemData, itemQueue) {
-        // eslint-disable-next-line
         var targetItemId = targetItemData[this.fields.id];
         var targetChildDS = targetItemData[this.fields.child];
         var isAlreadyRenderedUL = this.element.querySelector('[pid=\'' + targetItemId + '\']');
@@ -2902,7 +2895,6 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             this.getLiFromObjOrElement(curViewDS[index + 2]) || null;
         var 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();
         }
@@ -2935,11 +2927,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
         var curViewDS = this.curViewDS;
         var fields = obj instanceof Element ? this.getElementUID(obj) : obj;
         var dataSource;
-        // eslint-disable-next-line prefer-const
         dataSource = this.findItemFromDS(listDataSource, fields, true);
         if (dataSource) {
             var data_1;
-            // eslint-disable-next-line prefer-const
             data_1 = this.findItemFromDS(dataSource, fields);
             var index = curViewDS.indexOf(data_1);
             var li = this.getLiFromObjOrElement(obj);
@@ -2960,11 +2950,8 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             if (groupLi) {
                 detach(groupLi);
             }
-            // eslint-disable-next-line
             var foundData = (dataSource.length - 1) <= 0
-                ? this.findParent(this.localData, this.fields.id, 
-                // eslint-disable-next-line
-                function (value) { return value === data_1[_this.fields.id]; }, null) : null;
+                ? this.findParent(this.localData, this.fields.id, function (value) { return value === data_1[_this.fields.id]; }, null) : null;
             var dsIndex = dataSource.indexOf(data_1);
             dataSource.splice(dsIndex, 1);
             this.setViewDataSource(listDataSource);
@@ -3007,16 +2994,13 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    // eslint-disable-next-line
     ListView.prototype.findParent = function (dataSource, id, callback, parent) {
-        // eslint-disable-next-line no-prototype-builtins
         if (dataSource.hasOwnProperty(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') {
-                // eslint-disable-next-line
                 var result = this.findParent(dataSource[Object.keys(dataSource)[i]], id, callback, dataSource);
                 if (result != null) {
                     if (!result.parent) {
@@ -3039,6 +3023,21 @@ 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 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.
      */
@@ -3119,6 +3118,9 @@ var ListView = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], ListView.prototype, "actionFailure", void 0);
+    __decorate([
+        Event()
+    ], ListView.prototype, "scroll", void 0);
     ListView = __decorate([
         NotifyPropertyChanges
     ], ListView);
@@ -3287,7 +3289,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         var _a;
         var startingHeight;
         var 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 -
@@ -3654,7 +3656,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         var curViewDS = this.listViewInstance.curViewDS;
         // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(curViewDS, obj);
-        // eslint-disable-next-line
         if (Object.keys(resutJSON).length) {
             dataSource = resutJSON.data;
             if (curViewDS[resutJSON.index - 1] &&
@@ -3918,7 +3919,7 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.refreshItemHeight();
     };
     Virtualization.prototype.createUIItem = function (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) {
@@ -3975,7 +3976,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
         this.listViewInstance.setLocalData();
     };
     Virtualization.prototype.updateUI = function (element, index, targetElement) {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         var onChange = this.isNgTemplate() ? this.onNgChange : this.onChange;
         if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
             var curViewDS = this.listViewInstance.curViewDS[index];
@@ -4016,7 +4016,6 @@ var Virtualization = /** @__PURE__ @class */ (function () {
     };
     Virtualization.prototype.onNgChange = function (newData, listElement, virtualThis) {
         // compile given target element with template for new data
-        // eslint-disable-next-line
         var templateCompiler = compile(virtualThis.listViewInstance.template);
         var resultElement = templateCompiler(newData);
         while (listElement.lastChild) {