@syncfusion/ej2-navigations 20.4.51 → 20.4.53

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

@@ -2105,6 +2105,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         var iconLi = menu.querySelector('.e-menu-item:not(.e-blankicon):not(.e-separator)');
+        if (!iconLi) {
+            return;
+        }
         var icon = iconLi.querySelector('.e-menu-icon');
         if (!icon) {
             return;
@@ -9248,6 +9251,21 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 _this.refreshActiveBorder();
                 var cntTrg = select('#' + CLS_CONTENT$1 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));
                 if (!isNullOrUndefined(cntTrg)) {
+                    var registeredTemplate = _this.registeredTemplate;
+                    if (registeredTemplate && registeredTemplate.content) {
+                        var templateToClear = [];
+                        for (var i = 0; i < registeredTemplate.content.length; i++) {
+                            var registeredItem = registeredTemplate.content[i].rootNodes[0];
+                            var closestItem = closest(registeredItem, '.' + CLS_ITEM$2);
+                            if (!isNullOrUndefined(registeredItem) && closestItem === cntTrg) {
+                                templateToClear.push(registeredTemplate.content[i]);
+                                break;
+                            }
+                        }
+                        if (templateToClear.length > 0) {
+                            _this.clearTemplate(['content'], templateToClear);
+                        }
+                    }
                     detach(cntTrg);
                 }
                 _this.trigger('removed', tabRemovingArgs);
@@ -10129,7 +10147,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     };
     TreeView.prototype.initialize = function () {
         this.element.setAttribute('role', 'tree');
-        this.element.setAttribute('tabindex', '0');
         this.element.setAttribute('aria-activedescendant', this.element.id + '_active');
         this.setCssClass(null, this.cssClass);
         this.setEnableRtl();
@@ -10569,6 +10586,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         var fields = e.fields;
         this.addActionClass(e, fields.selected, SELECTED$1);
         this.addActionClass(e, fields.expanded, EXPANDED);
+        e.item.setAttribute("tabindex", "-1");
+        EventHandler.add(e.item, 'focus', this.focusIn, this);
         if (!isNullOrUndefined(this.nodeTemplateFn)) {
             var textEle = e.item.querySelector('.' + LISTTEXT);
             var dataId = e.item.getAttribute('data-uid');
@@ -11130,7 +11149,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             this.setMultiSelect(this.allowMultiSelection);
             var firstNode = select('.' + LISTITEM, this.element);
             if (firstNode) {
-                addClass([firstNode], FOCUS);
+                firstNode.setAttribute('tabindex', '0');
                 this.updateIdAttr(null, firstNode);
             }
             if (this.allowTextWrap) {
@@ -11790,7 +11809,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             this.startNode = li;
             this.addSelect(li);
         }
-        this.setFocusElement(li);
         if (this.isLoaded) {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
@@ -11825,8 +11843,11 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             var focusedNode = this.getFocusedNode();
             if (focusedNode) {
                 removeClass([focusedNode], FOCUS);
+                focusedNode.setAttribute("tabindex", "-1");
             }
             addClass([li], FOCUS);
+            li.setAttribute('tabindex', '0');
+            EventHandler.add(li, 'blur', this.focusOut, this);
             this.updateIdAttr(focusedNode, li);
         }
     };
@@ -11951,14 +11972,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             var inpEle = target;
             if (e.action === 'enter') {
                 inpEle.blur();
-                this.element.focus();
-                addClass([focusedNode], HOVER);
             }
             else if (e.action === 'escape') {
                 inpEle.value = this.oldText;
                 inpEle.blur();
-                this.element.focus();
-                addClass([focusedNode], HOVER);
             }
             return;
         }
@@ -12342,7 +12359,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     };
     TreeView.prototype.getFocusedNode = function () {
         var selectedItem;
-        var fNode = select('.' + LISTITEM + '.' + FOCUS, this.element);
+        var fNode = select('.' + LISTITEM + '[tabindex="0"]', this.element);
         if (isNullOrUndefined(fNode)) {
             selectedItem = select('.' + LISTITEM, this.element);
         }
@@ -12412,8 +12429,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     };
     TreeView.prototype.setFocus = function (preNode, nextNode) {
         removeClass([preNode], [HOVER, FOCUS]);
+        preNode.setAttribute("tabindex", "-1");
         if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
             addClass([nextNode], [HOVER, FOCUS]);
+            nextNode.setAttribute('tabindex', '0');
+            nextNode.focus();
+            EventHandler.add(nextNode, 'blur', this.focusOut, this);
             this.updateIdAttr(preNode, nextNode);
         }
     };
@@ -12427,12 +12448,19 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     };
     TreeView.prototype.focusIn = function () {
         if (!this.mouseDownStatus) {
-            addClass([this.getFocusedNode()], HOVER);
+            var focusedElement = this.getFocusedNode();
+            focusedElement.setAttribute("tabindex", "0");
+            addClass([focusedElement], [HOVER, FOCUS]);
+            EventHandler.add(focusedElement, 'blur', this.focusOut, this);
         }
         this.mouseDownStatus = false;
     };
-    TreeView.prototype.focusOut = function () {
-        removeClass([this.getFocusedNode()], HOVER);
+    TreeView.prototype.focusOut = function (event) {
+        var focusedElement = this.getFocusedNode();
+        if (event.target == focusedElement) {
+            removeClass([focusedElement], [HOVER, FOCUS]);
+            EventHandler.remove(focusedElement, 'blur', this.focusOut);
+        }
     };
     TreeView.prototype.onMouseOver = function (e) {
         var target = e.target;
@@ -12640,7 +12668,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         }
         if (isInput) {
             removeClass([liEle], EDITING);
-            txtEle.focus();
+            liEle.focus();
+            EventHandler.add(liEle, 'blur', this.focusOut, this);
+            addClass([liEle], HOVER);
         }
         if (this.allowTextWrap) {
             this.calculateWrap(liEle);
@@ -12832,7 +12862,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         });
         this.dropObj = new Droppable(this.element, {
             out: function (e) {
-                if (!isNullOrUndefined(e) && !e.target.classList.contains(SIBLING)) {
+                if (!isNullOrUndefined(e) && !e.target.classList.contains(SIBLING) && (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {
                     document.body.style.cursor = 'not-allowed';
                 }
             },
@@ -13531,15 +13561,29 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             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;
+                if (dropUl.childNodes.length === 0) {
+                    for (var i = 0; i < li.length; i++) {
+                        dropUl.insertBefore(li[i], refNode);
+                    }
+                    if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
+                        this.preventExpand = false;
+                        var dropIcon = select('div.' + ICON, dropLi);
+                        if (dropIcon && dropIcon.classList.contains(EXPANDABLE)) {
+                            this.expandAction(dropLi, dropIcon, null);
+                        }
+                    }
+                }
+                else {
+                    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]);
                         }
-                        dropUl.insertBefore(li[i], cNodes[cNodes.length]);
                     }
                 }
             }
@@ -13909,8 +13953,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         if (this.expandOnType !== 'None') {
             this.wireExpandOnEvent(true);
         }
-        EventHandler.add(this.element, 'focus', this.focusIn, this);
-        EventHandler.add(this.element, 'blur', this.focusOut, this);
         EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);
         EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);
         this.keyboardModule = new KeyboardEvents(this.element, {
@@ -13923,8 +13965,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);
         this.wireClickEvent(false);
         this.wireExpandOnEvent(false);
-        EventHandler.remove(this.element, 'focus', this.focusIn);
-        EventHandler.remove(this.element, 'blur', this.focusOut);
         EventHandler.remove(this.element, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);
         if (!this.disabled) {
@@ -14414,7 +14454,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     TreeView.prototype.destroy = function () {
         this.clearTemplate();
         this.element.removeAttribute('aria-activedescendant');
-        this.element.removeAttribute('tabindex');
         this.unWireEvents();
         this.wireEditingEvents(false);
         if (!this.disabled) {
@@ -15757,7 +15796,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
      * @param {string | HTMLElement} element - Specifies the element.
      */
     function Breadcrumb(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.isPopupCreated = false;
+        return _this;
     }
     /**
      * @private
@@ -16198,7 +16239,7 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
             this.isExpanded = true;
             this.reRenderItems();
         }
-        if (e.target.classList.contains(MENUCLASS)) {
+        if (e.target.classList.contains(MENUCLASS) && !this.isPopupCreated) {
             this.renderPopup();
         }
     };
@@ -16206,6 +16247,7 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var wrapper = this.createElement('div', { className: POPUPCLASS + ' ' + this.cssClass + (this.enableRtl ? ' e-rtl' : '') });
         document.body.appendChild(wrapper);
+        this.isPopupCreated = true;
         this.popupObj = new Popup(wrapper, {
             content: this.popupUl,
             relateTo: this.element.querySelector(DOT + MENUCLASS),
@@ -16223,6 +16265,7 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
         if (this.overflowMode === 'Menu' && this.popupObj && this.popupObj.element.classList.contains('e-popup-open') && !closest(e.target, DOT + MENUCLASS)) {
             this.popupObj.hide();
             this.popupObj.destroy();
+            this.isPopupCreated = false;
             detach(this.popupObj.element);
         }
     };