@syncfusion/ej2-navigations 20.4.44 → 20.4.49

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

@@ -2608,6 +2608,10 @@ let MenuBase = class MenuBase extends Component {
                     let idx;
                     let navIdx;
                     let item;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this.isReact && this.template) {
+                        this.clearTemplate(['template']);
+                    }
                     if (!Object.keys(oldProp.items).length) {
                         this.updateItem(this.element, this.items);
                         if (this.enableScrolling && this.element.parentElement.classList.contains('e-custom-scroll')) {
@@ -3620,8 +3624,11 @@ let Toolbar = class Toolbar extends Component {
                     if (popObj && closest(trgt, '.e-popup')) {
                         const popEle = popObj.element;
                         const popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {
-                            return;
+                        if ((value === 'previous' && popFrstEle === clst)) {
+                            popEle.lastElementChild.firstChild.focus();
+                        }
+                        else if (value === 'next' && popEle.lastElementChild === clst) {
+                            popFrstEle.firstChild.focus();
                         }
                         else {
                             this.eleFocus(clst, value);
@@ -3715,7 +3722,7 @@ let Toolbar = class Toolbar extends Component {
         }
     }
     eleContains(el) {
-        return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);
+        return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
     }
     eleFocus(closest$$1, pos) {
         const sib = Object(closest$$1)[pos + 'ElementSibling'];
@@ -3754,6 +3761,15 @@ let Toolbar = class Toolbar extends Component {
                 }
             }
         }
+        else if (!isNullOrUndefined(closest$$1)) {
+            const tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE$2 + ')' + ':not(.' + CLS_HIDDEN + ')');
+            if (pos === 'next' && tbrItems) {
+                this.elementFocus(tbrItems[0]);
+            }
+            else if (pos === 'previous' && tbrItems) {
+                this.elementFocus(tbrItems[tbrItems.length - 1]);
+            }
+        }
     }
     clickHandler(e) {
         const trgt = e.target;
@@ -5280,7 +5296,7 @@ let Toolbar = class Toolbar extends Component {
                                     this.destroyMode();
                                 }
                                 const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
-                                if (this.isReact) {
+                                if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
                                     this.clearTemplate();
                                 }
                                 detach(itemCol[parseInt(index.toString(), 10)]);
@@ -6955,6 +6971,7 @@ let Menu = class Menu extends MenuBase {
             catch (e) {
                 /* action on catch */
             }
+            this.updateMenuItems(this.items);
         }
         else {
             this.updateMenuItems(this.items);
@@ -7540,6 +7557,14 @@ let Tab = class Tab extends Component {
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
         attributes(this.hdrEle, { role: 'tablist' });
+        if (!isNullOrUndefined(this.element.getAttribute('aria-label'))) {
+            this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
+            this.element.removeAttribute('aria-label');
+        }
+        else if (!isNullOrUndefined(this.element.getAttribute('aria-labelledby'))) {
+            this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
+            this.element.removeAttribute('aria-labelledby');
+        }
         this.setCloseButton(this.showCloseButton);
         const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNullOrUndefined(toolbarHeader)) {
@@ -8206,10 +8231,6 @@ let Tab = class Tab extends Component {
             return;
         }
         if (!this.isTemplate) {
-            const prev = this.tbItem[this.prevIndex];
-            if (!isNullOrUndefined(prev)) {
-                prev.firstElementChild.removeAttribute('aria-controls');
-            }
             attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
         }
         const id = trg.id;
@@ -9668,6 +9689,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         // Specifies whether the node is dropped or not
         this.isNodeDropped = false;
         this.isInteracted = false;
+        this.isRightClick = false;
         this.mouseDownStatus = false;
     }
     /**
@@ -10969,6 +10991,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     }
                 }
             }
+            if (event.originalEvent.which === 3) {
+                this.isRightClick = true;
+            }
             this.triggerClickEvent(event.originalEvent, li);
         }
     }
@@ -11399,7 +11424,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'select', e);
             this.trigger('nodeSelecting', eventArgs, (observedArgs) => {
-                if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
+                if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
                     this.nodeSelectAction(li, e, observedArgs, multiSelect);
                 }
             });
@@ -11439,6 +11464,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
         }
+        this.isRightClick = false;
     }
     unselectNode(li, e) {
         let eventArgs;
@@ -12259,7 +12285,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
             this.updateText(liEle, txtEle, newText, isInput);
             if (observedArgs.oldText !== newText) {
-                this.triggerEvent();
+                this.triggerEvent('nodeEdited', [this.getNode(liEle)]);
             }
         });
     }
@@ -12572,6 +12598,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         let level;
         let drop = false;
         let dragInstance;
+        let nodeData = [];
+        let liArray = [];
         dragInstance = e.dragData.draggable;
         for (let i = 0; i < dragInstance.ej2_instances.length; i++) {
             if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
@@ -12583,6 +12611,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             let dragTarget = dragObj.dragTarget;
             let dragLi = (closest(dragTarget, '.' + LISTITEM));
             let dropLi = (closest(dropTarget, '.' + LISTITEM));
+            liArray.push(dragLi);
             if (dropLi == null && dropTarget.classList.contains(ROOT)) {
                 dropLi = dropTarget.firstElementChild;
             }
@@ -12596,6 +12625,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             }
             if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
                 let sNodes = selectAll('.' + ACTIVE, dragObj.element);
+                liArray = sNodes;
                 if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
                     for (let i = sNodes.length - 1; i >= 0; i--) {
                         if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
@@ -12622,13 +12652,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
+        for (var i = 0; i < liArray.length; i++) {
+            nodeData.push(this.getNode(liArray[i]));
+        }
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
         if (dragObj.element.id !== this.element.id) {
-            dragObj.triggerEvent();
+            dragObj.triggerEvent('nodeDropped', nodeData);
             this.isNodeDropped = true;
             this.fields.dataSource = this.treeData;
         }
-        this.triggerEvent();
+        this.triggerEvent('nodeDropped', nodeData);
     }
     appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
         let checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
@@ -13447,9 +13480,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         return removedData;
     }
-    triggerEvent() {
+    triggerEvent(action, node) {
         this.renderReactTemplates();
-        let eventArgs = { data: this.treeData };
+        if (action === 'addNodes') {
+            let nodeData = [];
+            for (let i = 0; i < node.length; i++) {
+                nodeData.push(this.getNode(this.getElement(isNullOrUndefined(node[i][this.fields.id]) ? getValue(this.fields.id, node[i]).toString() : null)));
+            }
+            node = nodeData;
+        }
+        let eventArgs = { data: this.treeData, action: action, nodeData: node };
         this.trigger('dataSourceChanged', eventArgs);
     }
     wireInputEvents(inpEle) {
@@ -13824,8 +13864,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     deleteSuccess(nodes) {
+        let nodeData = [];
         for (let i = 0, len = nodes.length; i < len; i++) {
             let liEle = this.getElement(nodes[i]);
+            nodeData.push(this.getNode(liEle));
             if (isNullOrUndefined(liEle)) {
                 continue;
             }
@@ -13835,7 +13877,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.dataType === 1) {
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        this.triggerEvent();
+        this.triggerEvent('removeNode', nodeData);
     }
     editSucess(target, newText, prevent) {
         let liEle = this.getElement(target);
@@ -13851,12 +13893,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             proxy.renderChildNodes(dropLi, null, () => {
                 dropUl = dropLi.querySelector('.' + PARENTITEM);
                 proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
-                proxy.triggerEvent();
+                proxy.triggerEvent('addNodes', nodes);
             });
         }
         else {
             this.addGivenNodes(nodes, dropLi, index, true);
-            this.triggerEvent();
+            this.triggerEvent('addNodes', nodes);
         }
     }
     dmFailure(e, target, prevent) {
@@ -13870,6 +13912,26 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         let txtEle = select('.' + LISTTEXT, liEle);
         this.updateText(liEle, txtEle, this.oldText, prevent);
     }
+    getHierarchicalParentId(node, data, parentsID) {
+        let index = data.findIndex((data) => data[this.fields.id] && data[this.fields.id].toString() === node);
+        if (index == -1) {
+            for (let i = 0; i < data.length; i++) {
+                let childItems = getValue(this.fields.child.toString(), data[i]);
+                if (!isNullOrUndefined(childItems)) {
+                    index = childItems.findIndex((data) => data[this.fields.id] && data[this.fields.id].toString() === node);
+                    if (index == -1) {
+                        this.getHierarchicalParentId(node, childItems, parentsID);
+                    }
+                    else {
+                        parentsID.push(data[i][this.fields.id].toString());
+                        this.getHierarchicalParentId(data[i][this.fields.id].toString(), this.treeData, parentsID);
+                        break;
+                    }
+                }
+            }
+        }
+        return parentsID;
+    }
     /**
      * Called internally if any of the property value changed.
      * @param  {TreeView} newProp
@@ -14066,7 +14128,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         if ((this.fields.dataSource instanceof DataManager === false)) {
             this.preventExpand = false;
-            this.triggerEvent();
+            this.triggerEvent('addNodes', nodes);
         }
     }
     /**
@@ -14138,13 +14200,26 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView nodes.
      */
     ensureVisible(node) {
+        let parentsId = [];
+        if (this.dataType == 1) {
+            let nodeData = this.getTreeData(node);
+            while (nodeData.length != 0 && !isNullOrUndefined(nodeData[0][this.fields.parentID])) {
+                parentsId.push(nodeData[0][this.fields.parentID].toString());
+                nodeData = this.getTreeData(nodeData[0][this.fields.parentID].toString());
+            }
+        }
+        else if (this.dataType == 2) {
+            parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId).reverse();
+        }
+        this.expandAll(parentsId);
         let liEle = this.getElement(node);
-        if (isNullOrUndefined(liEle)) {
-            return;
+        if (!isNullOrUndefined(liEle)) {
+            if (typeof node == 'object') {
+                let parents = this.parents(liEle, '.' + LISTITEM);
+                this.expandAll(parents);
+            }
+            setTimeout(() => { liEle.scrollIntoView({ behavior: "smooth" }); }, 450);
         }
-        let parents = this.parents(liEle, '.' + LISTITEM);
-        this.expandAll(parents);
-        setTimeout(() => { liEle.scrollIntoView(true); }, 450);
     }
     /**
      * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes
@@ -14218,11 +14293,13 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      */
     moveNodes(sourceNodes, target, index, preventTargetExpand) {
         let dropLi = this.getElement(target);
+        let nodeData = [];
         if (isNullOrUndefined(dropLi)) {
             return;
         }
         for (let i = 0; i < sourceNodes.length; i++) {
             let dragLi = this.getElement(sourceNodes[i]);
+            nodeData.push(this.getNode(dragLi));
             if (isNullOrUndefined(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
                 continue;
             }
@@ -14232,7 +14309,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
-        this.triggerEvent();
+        this.triggerEvent('moveNodes', nodeData);
     }
     /**
      * Refreshes a particular node of the TreeView.
@@ -14336,7 +14413,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             addClass([liEle], ACTIVE);
         }
         this.isRefreshed = false;
-        this.triggerEvent();
+        this.triggerEvent('refreshNode', [this.getNode(liEle)]);
     }
     /**
      * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
@@ -14715,7 +14792,7 @@ let Sidebar = class Sidebar extends Component {
     }
     destroyBackDrop() {
         const sibling = document.querySelector('.e-main-content') || this.targetEle;
-        if (this.target && this.showBackdrop && sibling) {
+        if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
             removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
         }
         else if (this.showBackdrop && this.modal) {
@@ -16554,17 +16631,15 @@ let Carousel = class Carousel extends Component {
                     container.style.transform = `translateX(${-(slideWidth) * (currentIndex)}px)`;
                 }
             }
-            let slideHeight;
             if (this.animationEffect === 'Slide') {
                 if (direction === 'Previous') {
                     addClass([args.nextSlide], CLS_PREV_SLIDE);
-                    slideHeight = args.nextSlide.offsetHeight;
+                    args.nextSlide.setAttribute('data-slide-height', args.nextSlide.offsetHeight.toString());
                     addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_END);
                 }
                 else {
                     addClass([args.nextSlide], CLS_NEXT_SLIDE);
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    slideHeight = args.nextSlide.offsetHeight;
+                    args.nextSlide.setAttribute('data-slide-height', args.nextSlide.offsetHeight.toString());
                     addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_START);
                 }
             }
@@ -17225,5 +17300,5 @@ AppBar = __decorate$12([
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
+export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
 //# sourceMappingURL=ej2-navigations.es2015.js.map