@syncfusion/ej2-navigations 20.1.57 → 20.1.61

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

@@ -7565,7 +7565,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.tbObj = null;
         }
         this.unWireEvents();
-        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach(function (val) {
+        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation', 'aria-owns'].forEach(function (val) {
             _this.element.removeAttribute(val);
         });
         this.expTemplateContent();
@@ -7646,7 +7646,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var 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();
     };
@@ -7831,6 +7831,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         attributes(this.hdrEle, { 'aria-label': 'tab-header' });
         this.updateOrientationAttribute();
         this.setCloseButton(this.showCloseButton);
+        var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
+        if (!isNullOrUndefined(toolbarHeader)) {
+            toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
+        }
     };
     Tab.prototype.renderContent = function () {
         this.cntEle = select('.' + CLS_CONTENT$1, this.element);
@@ -9189,7 +9193,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());
             this.isAdd = true;
-            var tabItems = this.parseObject(items, index);
+            var tabItems_2 = this.parseObject(items, index);
             this.isAdd = false;
             var i_1 = 0;
             var textValue_1;
@@ -9197,6 +9201,12 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 textValue_1 = item.headerTemplate || item.header.text;
                 if (!(isNullOrUndefined(item.headerTemplate || item.header) || isNullOrUndefined(textValue_1) ||
                     (textValue_1.length === 0) && !isNullOrUndefined(item.header) && isNullOrUndefined(item.header.iconCss))) {
+                    if (tabItems_2[place]) {
+                        if (isNullOrUndefined(item.id)) {
+                            item.id = TABITEMPREFIX + (lastEleIndex + place).toString();
+                        }
+                        tabItems_2[place].htmlAttributes['data-id'] = item.id;
+                    }
                     _this.items.splice((index + i_1), 0, item);
                     i_1++;
                 }
@@ -9211,7 +9221,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     _this.getContent(eleTrg, item.content, 'render', index);
                 }
             });
-            this.tbObj.addItems(tabItems, index);
+            this.tbObj.addItems(tabItems_2, index);
             if (!this.isReplace) {
                 this.trigger('added', { addedItems: items });
             }
@@ -9220,6 +9230,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
             else {
                 this.setActiveBorder();
+                this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
             }
             this.bindDraggable();
         }
@@ -13417,8 +13428,23 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             dropUl = dropEle;
         }
         var refNode = dropUl.childNodes[index];
-        for (var i = 0; i < li.length; i++) {
-            dropUl.insertBefore(li[i], refNode);
+        if (refNode || this.sortOrder === 'None') {
+            for (var i = 0; i < li.length; i++) {
+                dropUl.insertBefore(li[i], refNode);
+            }
+        }
+        if (!refNode && ((this.sortOrder === 'Ascending') || (this.sortOrder === 'Descending'))) {
+            var cNodes = dropUl.childNodes;
+            for (var i = 0; i < li.length; i++) {
+                for (var j = 0; j < cNodes.length; j++) {
+                    var 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]);
+                }
+            }
         }
         var id = this.getId(dropLi);
         if (this.dataType === 1) {
@@ -14821,7 +14847,6 @@ var CLOSE = 'e-close';
 var OPEN = 'e-open';
 var TRASITION = 'e-transition';
 var DEFAULTBACKDROP = 'e-sidebar-overlay';
-var CONTEXTBACKDROP = 'e-backdrop';
 var RTL$2 = 'e-rtl';
 var RIGHT = 'e-right';
 var LEFT = 'e-left';
@@ -14991,7 +15016,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     Sidebar.prototype.destroyBackDrop = function () {
         var 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';
@@ -15129,8 +15154,12 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
     };
     Sidebar.prototype.createBackDrop = function () {
         if (this.target && this.showBackdrop && this.getState()) {
+            var targetString = this.target;
             var 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');