@syncfusion/ej2-lists 20.4.40 → 20.4.48

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

@@ -1436,7 +1436,7 @@ let ListView = class ListView extends Component {
         this.currentLiElements = [];
         this.isNestedList = false;
         this.selectedData = [];
-        this.selectedId = [];
+        this.selectedId = this.enablePersistence ? this.selectedId : [];
         this.LISTVIEW_TEMPLATE_ID = `${this.element.id}${LISTVIEW_TEMPLATE_PROPERTY}`;
         this.LISTVIEW_GROUPTEMPLATE_ID = `${this.element.id}${LISTVIEW_GROUPTEMPLATE_PROPERTY}`;
         this.LISTVIEW_HEADERTEMPLATE_ID = `${this.element.id}${LISTVIEW_HEADERTEMPLATE_PROPERTY}`;
@@ -1465,7 +1465,13 @@ let ListView = class ListView extends Component {
             args.item.firstElementChild.classList.add(classNames.checkbox);
             if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
                 fieldData = getFieldValues(args.curData, this.listBaseOption.fields);
-                if (fieldData[this.listBaseOption.fields.isChecked]) {
+                if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
+                    let index = this.selectedId.findIndex(e => e == fieldData[this.listBaseOption.fields.id].toString());
+                    if (index != -1) {
+                        this.checkInternally(args, checkboxElement);
+                    }
+                }
+                else if (fieldData[this.listBaseOption.fields.isChecked]) {
                     this.checkInternally(args, checkboxElement);
                 }
             }
@@ -1496,7 +1502,6 @@ let ListView = class ListView extends Component {
     }
     checkInternally(args, checkboxElement) {
         args.item.classList.add(classNames.selected);
-        args.item.setAttribute('aria-selected', 'true');
         checkboxElement.querySelector('.' + classNames.checkboxIcon).classList.add(classNames.checked);
         checkboxElement.setAttribute('aria-checked', 'true');
     }
@@ -1522,7 +1527,6 @@ let ListView = class ListView extends Component {
                 else {
                     liElement.classList.remove(classNames.selected);
                 }
-                liElement.setAttribute('aria-selected', checked ? 'true' : 'false');
                 if (checked === true) {
                     checkboxIcon.classList.add(classNames.checked);
                 }
@@ -1532,6 +1536,7 @@ let ListView = class ListView extends Component {
                 checkboxIcon.parentElement.setAttribute('aria-checked', checked ? 'true' : 'false');
             }
             this.setSelectedItemData(liElement);
+            this.updateSelectedId();
         }
     }
     /**
@@ -1574,6 +1579,7 @@ let ListView = class ListView extends Component {
             if (this.enableVirtualization) {
                 this.virtualizationModule.checkedItem(checked);
             }
+            this.updateSelectedId();
         }
     }
     setCheckbox() {
@@ -1689,6 +1695,7 @@ let ListView = class ListView extends Component {
                 }
             }
         }
+        this.updateSelectedId();
     }
     removeElement(element) {
         return element && element.parentNode && element.parentNode.removeChild(element);
@@ -1704,9 +1711,6 @@ let ListView = class ListView extends Component {
     homeKeyHandler(e, end) {
         e.preventDefault();
         if (Object.keys(this.dataSource).length && this.curUL) {
-            if (this.selectedItems) {
-                (this.selectedItems.item).setAttribute('aria-selected', 'false');
-            }
             const li = this.curUL.querySelectorAll('.' + classNames.listItem);
             const focusedElement = this.curUL.querySelector('.' + classNames.focused) ||
                 this.curUL.querySelector('.' + classNames.selected);
@@ -1880,6 +1884,7 @@ let ListView = class ListView extends Component {
             const eventArgs = this.selectEventData(li, e);
             merge(eventArgs, { isChecked: checkIcon ? checkIcon.classList.contains(classNames.checked) : false });
             this.trigger('select', eventArgs);
+            this.updateSelectedId();
         }
     }
     keyActionHandler(e) {
@@ -1923,11 +1928,10 @@ let ListView = class ListView extends Component {
     focusout() {
         if (Object.keys(this.dataSource).length && this.curUL) {
             const focusedElement = this.curUL.querySelector('.' + classNames.focused);
-            const activeElement = this.curUL.querySelector('[aria-selected = true]');
             if (focusedElement) {
                 focusedElement.classList.remove(classNames.focused);
-                if (activeElement && !this.showCheckBox) {
-                    activeElement.classList.add(classNames.selected);
+                if (!this.showCheckBox) {
+                    this.selectedLI.classList.add(classNames.selected);
                 }
             }
         }
@@ -1968,14 +1972,12 @@ let ListView = class ListView extends Component {
                     continue;
                 }
                 else {
-                    ele.setAttribute('aria-selected', 'false');
                     ele.classList.remove(classNames.selected);
                 }
             }
         }
         else {
             li.classList.remove(classNames.selected);
-            li.setAttribute('aria-selected', 'false');
         }
     }
     isValidLI(li) {
@@ -2001,12 +2003,10 @@ let ListView = class ListView extends Component {
             if (!checkIcon.classList.contains(classNames.checked)) {
                 checkIcon.classList.add(classNames.checked);
                 li.classList.add(classNames.selected);
-                li.setAttribute('aria-selected', 'true');
             }
             else {
                 checkIcon.classList.remove(classNames.checked);
                 li.classList.remove(classNames.selected);
-                li.setAttribute('aria-selected', 'false');
             }
             checkboxElement.setAttribute('aria-checked', checkIcon.classList.contains(classNames.checked) ?
                 'true' : 'false');
@@ -2072,7 +2072,6 @@ let ListView = class ListView extends Component {
                 this.removeSelect();
             }
             li.classList.add(classNames.selected);
-            li.setAttribute('aria-selected', 'true');
             this.removeHover();
             this.setSelectedItemData(li);
             if (this.enableVirtualization) {
@@ -2289,7 +2288,6 @@ let ListView = class ListView extends Component {
             const element = liElements[i];
             if (element.classList.contains('e-list-item')) {
                 element.setAttribute('id', this.element.id + '_' + element.getAttribute('data-uid'));
-                element.setAttribute('aria-selected', 'false');
                 element.setAttribute('tabindex', '-1');
             }
         }
@@ -2454,12 +2452,8 @@ let ListView = class ListView extends Component {
         const li = this.element.querySelector('[data-uid=\'' + pID + '\']');
         li.classList.remove(classNames.disable);
         li.classList.add(classNames.focused);
-        if (this.showCheckBox && li.querySelector('.' + classNames.checkboxIcon).classList.contains(classNames.checked)) {
-            li.setAttribute('aria-selected', 'true');
-        }
-        else {
+        if (!(this.showCheckBox && li.querySelector('.' + classNames.checkboxIcon).classList.contains(classNames.checked))) {
             li.classList.remove(classNames.selected);
-            li.setAttribute('aria-selected', 'false');
         }
         this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);
         if (this.enableHtmlSanitizer) {
@@ -2559,6 +2553,16 @@ let ListView = class ListView extends Component {
         }
         return parentId;
     }
+    updateSelectedId() {
+        this.selectedId = [];
+        const liCollection = this.curUL.getElementsByClassName(classNames.selected);
+        for (let i = 0; i < liCollection.length; i++) {
+            const tempData = this.getItemData(liCollection[i]);
+            if (tempData[this.listBaseOption.fields.id]) {
+                this.selectedId.push(tempData[this.listBaseOption.fields.id]);
+            }
+        }
+    }
     /**
      * Gets the details of the currently selected item from the list items.
      *
@@ -2988,7 +2992,7 @@ let ListView = class ListView extends Component {
     getPersistData() {
         return this.addOnPersist(['cssClass', 'enableRtl', 'htmlAttributes',
             'enable', 'fields', 'animation', 'headerTitle',
-            'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition']);
+            'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition', 'selectedId']);
     }
 };
 __decorate([