@syncfusion/ej2-lists 19.4.55 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.55
+*  version : 20.1.47
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-lists@*",
-  "_id": "@syncfusion/ej2-lists@19.4.48",
+  "_id": "@syncfusion/ej2-lists@18.13.11",
   "_inBundle": false,
-  "_integrity": "sha512-1JpG5bMlrGPy9aV4mLRfAP418B7J61L3wiNu2FKxnvlMsrClreMOjvBXtjerHdxCiy2SWajW+ZUsuKiV+XQPVA==",
+  "_integrity": "sha512-ajtPRbAdXjzlzaJ/ZD8YGhCwuH/lrvveMBkHDCeSOvhwUWSpGCRjJgVAH3bjZmQBYTA4VCiu6gTeC0vP+YEZ1Q==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-lists/-/ej2-lists-19.4.48.tgz",
-  "_shasum": "eccf3c199e93da9c263bd4c794a1a75e08a4ed74",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-lists/-/ej2-lists-18.13.11.tgz",
+  "_shasum": "241466ef35e057a37eac6617a21fce4016fdb396",
   "_spec": "@syncfusion/ej2-lists@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,9 +43,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-data": "~19.4.54"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-data": "~20.1.47"
   },
   "deprecated": false,
   "description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.",
@@ -85,6 +85,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "19.4.55",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/src/common/list-base.js

@@ -214,7 +214,8 @@ export var ListBase;
         var curOpt = extend({}, defaultListBaseOptions, options);
         cssClass = getModuleClass(curOpt.moduleName);
         var fields = (componentInstance &&
-            (componentInstance.getModuleName() == "listview" || componentInstance.getModuleName() == "multiselect")) ? curOpt.fields : extend({}, ListBase.defaultMappedFields, curOpt.fields);
+            (componentInstance.getModuleName() === 'listview' || componentInstance.getModuleName() === 'multiselect'))
+            ? curOpt.fields : extend({}, ListBase.defaultMappedFields, curOpt.fields);
         var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);
         var id;
         var checkboxElement = [];
@@ -636,7 +637,7 @@ export 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) {
@@ -648,7 +649,7 @@ export var ListBase;
                     }
                 }
                 else {
-                    if (componentInstance && componentInstance.getModuleName() != "listview") {
+                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                         // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -704,7 +705,7 @@ export 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) {
@@ -888,7 +889,7 @@ export var ListBase;
         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) {
@@ -902,7 +903,7 @@ export 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") {
+            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -1014,6 +1015,9 @@ function compileTemplate(template) {
             if (document.querySelector(template)) {
                 return compile(document.querySelector(template).innerHTML.trim());
             }
+            else {
+                return compile(template);
+            }
         }
         catch (e) {
             return compile(template);

package/src/list-view/list-view.d.ts

@@ -585,6 +585,7 @@ export interface ClassNames {
     disable: string;
     content: string;
     backIcon: string;
+    backButton: string;
     icon: string;
     checkboxWrapper: string;
     checkbox: string;

package/src/list-view/list-view.js

@@ -63,6 +63,7 @@ export var classNames = {
     content: 'e-content',
     icon: 'e-icons',
     backIcon: 'e-icon-back',
+    backButton: 'e-back-button',
     checkboxWrapper: 'e-checkbox-wrapper',
     checkbox: 'e-checkbox',
     checked: 'e-check',
@@ -303,7 +304,7 @@ var ListView = /** @class */ (function (_super) {
             var innerHeaderEle = this.createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });
             var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
             var hedBackButton = this.createElement('div', {
-                className: classNames.icon + ' ' + classNames.backIcon + ' e-but-back',
+                className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
                 attrs: { style: 'display:none;' }
             });
             this.headerEle.appendChild(hedBackButton);
@@ -420,7 +421,7 @@ var ListView = /** @class */ (function (_super) {
             groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',
             ariaAttributes: {
                 itemRole: 'option', listRole: 'presentation', itemText: '',
-                groupItemRole: 'group', wrapperRole: 'presentation'
+                groupItemRole: 'option', wrapperRole: 'presentation'
             },
             // eslint-disable-next-line
             fields: (this.fields.properties),
@@ -674,6 +675,7 @@ var ListView = /** @class */ (function (_super) {
             }
             else {
                 this.setSelectLI(li, e);
+                this.element.focus();
             }
             closestElement = closest(e.target, 'li');
             if (!isNullOrUndefined(closestElement)) {
@@ -696,6 +698,7 @@ var ListView = /** @class */ (function (_super) {
         this.removeHover();
     };
     ListView.prototype.homeKeyHandler = function (e, end) {
+        e.preventDefault();
         if (Object.keys(this.dataSource).length && this.curUL) {
             if (this.selectedItems) {
                 (this.selectedItems.item).setAttribute('aria-selected', 'false');
@@ -854,6 +857,7 @@ var ListView = /** @class */ (function (_super) {
         }
     };
     ListView.prototype.spaceKeyHandler = function (e) {
+        e.preventDefault();
         if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
             var li = this.curUL.querySelector('.' + classNames.focused);
             var checkboxElement = void 0;
@@ -1018,9 +1022,11 @@ var ListView = /** @class */ (function (_super) {
         else {
             selectedItem =
                 // eslint-disable-next-line
-                { item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
+                {
+                    item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
                     // eslint-disable-next-line
-                    data: data };
+                    data: data
+                };
         }
         var eventArgs = {};
         merge(eventArgs, selectedItem);
@@ -1173,16 +1179,19 @@ var ListView = /** @class */ (function (_super) {
     };
     ListView.prototype.setViewDataSource = function (dataSource) {
         if (dataSource === void 0) { dataSource = this.localData; }
+        // eslint-disable-next-line
+        var fieldValue = (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy;
+        var query = ListBase.addSorting(this.sortOrder, fieldValue);
         if (dataSource && this.fields.groupBy) {
             if (this.sortOrder !== 'None') {
-                this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy)), this.listBaseOption.fields, this.sortOrder);
+                this.curViewDS = ListBase.groupDataSource(ListBase.getDataSource(dataSource, query), this.listBaseOption.fields, this.sortOrder);
             }
             else {
                 this.curViewDS = ListBase.groupDataSource(dataSource, this.listBaseOption.fields, this.sortOrder);
             }
         }
         else if (dataSource && this.sortOrder !== 'None') {
-            this.curViewDS = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, (isNullOrUndefined(this.fields.sortBy)) ? this.fields.text : this.fields.sortBy));
+            this.curViewDS = ListBase.getDataSource(dataSource, query);
         }
         else {
             this.curViewDS = dataSource;

package/src/list-view/virtualization.js

@@ -224,6 +224,7 @@ var Virtualization = /** @class */ (function () {
         }
     };
     Virtualization.prototype.updateUiContent = function (element, index) {
+        // eslint-disable-next-line
         var curViewDs = this.listViewInstance.curViewDS;
         if (typeof this.listViewInstance.dataSource[0] === 'string' ||
             typeof this.listViewInstance.dataSource[0] === 'number') {
@@ -386,8 +387,10 @@ var Virtualization = /** @class */ (function () {
                     var indexArray = this.uiIndices.activeIndices;
                     for (var i = 0; i < indexArray.length; i++) {
                         textCollection.push(curViewDS_2[indexArray[i]][text]);
+                        // eslint-disable-next-line
                         dataCollection.push(curViewDS_2[indexArray[i]]);
                     }
+                    // eslint-disable-next-line
                     var dataSource_1 = this.listViewInstance.dataSource instanceof DataManager
                         ? curViewDS_2 : this.listViewInstance.dataSource;
                     return {
@@ -400,6 +403,7 @@ var Virtualization = /** @class */ (function () {
                     };
                 }
                 else {
+                    // eslint-disable-next-line
                     var dataSource = this.listViewInstance.dataSource instanceof DataManager
                         ? curViewDS_2 : this.listViewInstance.dataSource;
                     return {
@@ -416,6 +420,7 @@ var Virtualization = /** @class */ (function () {
         }
     };
     Virtualization.prototype.selectItem = function (obj) {
+        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             var isSelected = this.activeIndex === resutJSON.index;
@@ -443,6 +448,7 @@ var Virtualization = /** @class */ (function () {
                 }
             }
             else {
+                // eslint-disable-next-line
                 var eventArgs = void 0;
                 if (typeof this.listViewInstance.dataSource[0] === 'string' ||
                     typeof this.listViewInstance.dataSource[0] === 'number') {
@@ -476,24 +482,28 @@ var Virtualization = /** @class */ (function () {
         }
     };
     Virtualization.prototype.enableItem = function (obj) {
+        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index), 1);
         }
     };
     Virtualization.prototype.disableItem = function (obj) {
+        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index) === -1) {
             this.uiIndices.disabledItemIndices.push(resutJSON.index);
         }
     };
     Virtualization.prototype.showItem = function (obj) {
+        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length) {
             this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index), 1);
         }
     };
     Virtualization.prototype.hideItem = function (obj) {
+        // eslint-disable-next-line
         var resutJSON = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
         if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index) === -1) {
             this.uiIndices.hiddenItemIndices.push(resutJSON.index);
@@ -502,7 +512,9 @@ var Virtualization = /** @class */ (function () {
     Virtualization.prototype.removeItem = function (obj) {
         var dataSource;
         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] &&
@@ -722,6 +734,7 @@ var Virtualization = /** @class */ (function () {
                 }
             }
             else {
+                // eslint-disable-next-line
                 var index = this.listViewInstance.curViewDS.indexOf(currentItem);
                 // virtually new add list item based on the scollbar position
                 this.addUiItem(index);

package/src/sortable/sortable.js

@@ -64,6 +64,8 @@ var Sortable = /** @class */ (function (_super) {
         };
         // eslint-disable-next-line
         _this.onDrag = function (e) {
+            if (!e.target)
+                return;
             _this.trigger('drag', { event: e.event, element: _this.element, target: e.target });
             var newInst = _this.getSortableInstance(e.target);
             var target = _this.getSortableElement(e.target, newInst);

package/styles/bootstrap-dark.css

@@ -58,6 +58,11 @@
   font-size: 15px;
 }
 
+.e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
+.e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
+  width: calc(100% - 40px);
+}
+
 .e-listview {
   -webkit-overflow-scrolling: touch;
   border: 0 solid;
@@ -112,7 +117,7 @@
   top: 45px;
 }
 
-.e-listview .e-but-back {
+.e-listview .e-back-button {
   cursor: pointer;
   padding-right: 10px;
 }
@@ -131,6 +136,10 @@
   padding: 0 15px;
 }
 
+.e-listview .e-list-group-item .e-list-text {
+  cursor: default;
+}
+
 .e-listview .e-icon-collapsible {
   cursor: pointer;
   font-size: 12px;
@@ -208,8 +217,12 @@
   position: relative;
 }
 
-.e-listview .e-list-header .e-text {
+.e-listview .e-list-header.e-list-navigation .e-text {
   cursor: pointer;
+}
+
+.e-listview .e-list-header .e-text {
+  cursor: default;
   text-indent: 0;
 }
 
@@ -238,7 +251,7 @@
   cursor: pointer;
 }
 
-.e-listview.e-rtl .e-but-back {
+.e-listview.e-rtl .e-back-button {
   transform: rotate(180deg);
 }
 

package/styles/bootstrap.css

@@ -58,6 +58,11 @@
   font-size: 15px;
 }
 
+.e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
+.e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
+  width: calc(100% - 40px);
+}
+
 .e-listview {
   -webkit-overflow-scrolling: touch;
   border: 0 solid;
@@ -112,7 +117,7 @@
   top: 45px;
 }
 
-.e-listview .e-but-back {
+.e-listview .e-back-button {
   cursor: pointer;
   padding-right: 10px;
 }
@@ -131,6 +136,10 @@
   padding: 0 15px;
 }
 
+.e-listview .e-list-group-item .e-list-text {
+  cursor: default;
+}
+
 .e-listview .e-icon-collapsible {
   cursor: pointer;
   font-size: 12px;
@@ -208,8 +217,12 @@
   position: relative;
 }
 
-.e-listview .e-list-header .e-text {
+.e-listview .e-list-header.e-list-navigation .e-text {
   cursor: pointer;
+}
+
+.e-listview .e-list-header .e-text {
+  cursor: default;
   text-indent: 0;
 }
 
@@ -238,7 +251,7 @@
   cursor: pointer;
 }
 
-.e-listview.e-rtl .e-but-back {
+.e-listview.e-rtl .e-back-button {
   transform: rotate(180deg);
 }
 

package/styles/bootstrap4.css

@@ -69,8 +69,8 @@
   font-size: 20px;
 }
 
-.e-bigger .e-listview .e-but-back,
-.e-listview.e-bigger .e-but-back {
+.e-bigger .e-listview .e-back-button,
+.e-listview.e-bigger .e-back-button {
   margin-top: -3px;
   padding-right: 12px;
 }
@@ -105,6 +105,11 @@
   margin: 0 0 0 12px;
 }
 
+.e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
+.e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
+  width: calc(100% - 40px);
+}
+
 .e-listview {
   -webkit-overflow-scrolling: touch;
   border: 1px solid;
@@ -159,7 +164,7 @@
   top: 45px;
 }
 
-.e-listview .e-but-back {
+.e-listview .e-back-button {
   cursor: pointer;
   padding-right: 10px;
 }
@@ -178,6 +183,10 @@
   padding: 8px 16px 8px 16px;
 }
 
+.e-listview .e-list-group-item .e-list-text {
+  cursor: default;
+}
+
 .e-listview .e-icon-collapsible {
   cursor: pointer;
   font-size: 10px;
@@ -255,8 +264,12 @@
   position: relative;
 }
 
-.e-listview .e-list-header .e-text {
+.e-listview .e-list-header.e-list-navigation .e-text {
   cursor: pointer;
+}
+
+.e-listview .e-list-header .e-text {
+  cursor: default;
   text-indent: 0;
 }
 
@@ -285,7 +298,7 @@
   cursor: pointer;
 }
 
-.e-listview.e-rtl .e-but-back {
+.e-listview.e-rtl .e-back-button {
   transform: rotate(180deg);
 }
 

package/styles/bootstrap5-dark.css

@@ -18,7 +18,7 @@
 .e-bigger .e-listview:not(.e-list-template) .e-list-item,
 .e-listview.e-bigger:not(.e-list-template) .e-list-item {
   height: 40px;
-  line-height: 20px;
+  line-height: 21px;
   position: relative;
 }
 
@@ -40,7 +40,7 @@
   display: -ms-flexbox;
   display: flex;
   font-weight: 500;
-  height: 38px;
+  height: 40px;
 }
 
 .e-bigger .e-listview .e-list-header .e-text.header,
@@ -58,6 +58,11 @@
   font-size: 14px;
 }
 
+.e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
+.e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
+  width: calc(100% - 40px);
+}
+
 .e-listview {
   -webkit-overflow-scrolling: touch;
   border: 1px solid;
@@ -103,7 +108,7 @@
   display: -ms-flexbox;
   display: flex;
   font-weight: 500;
-  height: 30px;
+  height: 36px;
   border-bottom: 1px solid;
   padding: 0 12px;
 }
@@ -112,7 +117,7 @@
   top: 45px;
 }
 
-.e-listview .e-but-back {
+.e-listview .e-back-button {
   cursor: pointer;
   padding-right: 8px;
 }
@@ -131,6 +136,10 @@
   padding: 7px 9px 7px 12px;
 }
 
+.e-listview .e-list-group-item .e-list-text {
+  cursor: default;
+}
+
 .e-listview .e-icon-collapsible {
   cursor: pointer;
   font-size: 12px;
@@ -208,8 +217,12 @@
   position: relative;
 }
 
-.e-listview .e-list-header .e-text {
+.e-listview .e-list-header.e-list-navigation .e-text {
   cursor: pointer;
+}
+
+.e-listview .e-list-header .e-text {
+  cursor: default;
   text-indent: 0;
 }
 
@@ -238,7 +251,7 @@
   cursor: pointer;
 }
 
-.e-listview.e-rtl .e-but-back {
+.e-listview.e-rtl .e-back-button {
   transform: rotate(180deg);
 }
 
@@ -262,7 +275,7 @@
 
 .e-listview .e-list-header {
   background-color: transparent;
-  border-color: #6c757d;
+  border-color: #444c54;
   color: #7b848d;
   font-size: 12px;
 }
@@ -271,11 +284,11 @@
   color: #adb5bd;
 }
 
-.e-listview .e-icons .e-but-back:hover {
+.e-listview .e-icons.e-back-button:hover {
   color: #dee2e6;
 }
 
-.e-listview .e-icons .e-but-back:active {
+.e-listview .e-icons.e-back-button:active {
   color: #f8f9fa;
 }
 
@@ -320,7 +333,7 @@
 
 .e-listview .e-list-group-item {
   background-color: transparent;
-  border-color: #6c757d;
+  border-color: #444c54;
   color: #7b848d;
   font-size: 12px;
 }
@@ -335,11 +348,11 @@
 }
 
 .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
-  padding: 8px 16px;
+  padding: 10px 16px;
 }
 
 .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line).e-list-badge:not(.e-list-avatar) {
-  padding: 0 10px 0 16px;
+  padding: 0 8px 0 12px;
 }
 
 .e-listview.e-list-template .e-list-wrapper.e-list-multi-line {