@syncfusion/ej2-navigations 20.1.57 → 20.1.61

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

@@ -7297,7 +7297,7 @@ let Tab = class Tab extends Component {
             this.tbObj = null;
         }
         this.unWireEvents();
-        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach((val) => {
+        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation', 'aria-owns'].forEach((val) => {
             this.element.removeAttribute(val);
         });
         this.expTemplateContent();
@@ -7378,7 +7378,7 @@ let Tab = class Tab extends Component {
         const css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
         this.setCssClass(this.element, this.cssClass, true);
-        attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '' });
+        attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '', 'aria-owns': this.element.id + '_' + 'tab_header_items' });
         this.setCssClass(this.element, css, true);
         this.updatePopAnimationConfig();
     }
@@ -7562,6 +7562,10 @@ let Tab = class Tab extends Component {
         attributes(this.hdrEle, { 'aria-label': 'tab-header' });
         this.updateOrientationAttribute();
         this.setCloseButton(this.showCloseButton);
+        const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
+        if (!isNullOrUndefined(toolbarHeader)) {
+            toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+        }
     }
     renderContent() {
         this.cntEle = select('.' + CLS_CONTENT$1, this.element);
@@ -8916,6 +8920,12 @@ let Tab = class Tab extends Component {
                 textValue = item.headerTemplate || item.header.text;
                 if (!(isNullOrUndefined(item.headerTemplate || item.header) || isNullOrUndefined(textValue) ||
                     (textValue.length === 0) && !isNullOrUndefined(item.header) && isNullOrUndefined(item.header.iconCss))) {
+                    if (tabItems[place]) {
+                        if (isNullOrUndefined(item.id)) {
+                            item.id = TABITEMPREFIX + (lastEleIndex + place).toString();
+                        }
+                        tabItems[place].htmlAttributes['data-id'] = item.id;
+                    }
                     this.items.splice((index + i), 0, item);
                     i++;
                 }
@@ -8939,6 +8949,7 @@ let Tab = class Tab extends Component {
             }
             else {
                 this.setActiveBorder();
+                this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
             }
             this.bindDraggable();
         }
@@ -13078,8 +13089,23 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             dropUl = dropEle;
         }
         let refNode = dropUl.childNodes[index];
-        for (let i = 0; i < li.length; i++) {
-            dropUl.insertBefore(li[i], refNode);
+        if (refNode || this.sortOrder === 'None') {
+            for (let i = 0; i < li.length; i++) {
+                dropUl.insertBefore(li[i], refNode);
+            }
+        }
+        if (!refNode && ((this.sortOrder === 'Ascending') || (this.sortOrder === 'Descending'))) {
+            let cNodes = dropUl.childNodes;
+            for (let i = 0; i < li.length; i++) {
+                for (let j = 0; j < cNodes.length; j++) {
+                    let returnValue = (this.sortOrder === 'Ascending') ? cNodes[j].textContent.toUpperCase() > li[i].innerText.toUpperCase() : cNodes[j].textContent.toUpperCase() < li[i].innerText.toUpperCase();
+                    if (returnValue) {
+                        dropUl.insertBefore(li[i], cNodes[j]);
+                        break;
+                    }
+                    dropUl.insertBefore(li[i], cNodes[cNodes.length]);
+                }
+            }
         }
         let id = this.getId(dropLi);
         if (this.dataType === 1) {
@@ -14461,7 +14487,6 @@ const CLOSE = 'e-close';
 const OPEN = 'e-open';
 const TRASITION = 'e-transition';
 const DEFAULTBACKDROP = 'e-sidebar-overlay';
-const CONTEXTBACKDROP = 'e-backdrop';
 const RTL$2 = 'e-rtl';
 const RIGHT = 'e-right';
 const LEFT = 'e-left';
@@ -14630,7 +14655,7 @@ let Sidebar = class Sidebar extends Component {
     destroyBackDrop() {
         const sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling) {
-            removeClass([sibling], CONTEXTBACKDROP);
+            sibling.removeChild(this.defaultBackdropDiv);
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -14766,8 +14791,12 @@ let Sidebar = class Sidebar extends Component {
     }
     createBackDrop() {
         if (this.target && this.showBackdrop && this.getState()) {
+            const targetString = this.target;
             const sibling = document.querySelector('.e-main-content') || this.targetEle;
-            addClass([sibling], CONTEXTBACKDROP);
+            this.defaultBackdropDiv = this.createElement('div');
+            addClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            setStyleAttribute(this.defaultBackdropDiv, { height: targetString.style.height });
+            sibling.appendChild(this.defaultBackdropDiv);
         }
         else if (this.showBackdrop && !this.modal && this.getState()) {
             this.modal = this.createElement('div');